@import "_erazm.css";
@import "_fira-sans.css";

@import "_article.css";
@import "_base.css";
@import "_blog.css";
@import "_pagination.css";
@import "_picture.css";
@import "_search.css";

:root {
  --muted-color: #5d5d5d;
  --highlight-color: #990033;

  --default-font-family: "Fira Sans", sans-serif;
  --default-font-weight: normal;

  --highlight-font-family: Erazm-Regular;
  --highlight-font-weight: normal;
  --highlight-font-family-light: Erazm-Light;
  --article-content-width: 824px;
  --subtitle-display: initial;

  --header-shadow: 0px 0px 8px #a8a8a8;

  --frame-spacing: 6px;
  --frame-shadow: 0 0 6px 0px #b0b0b0;

  --picture-max-width: 100%;
  --picture-max-height: 1000px;
  --picture-description-padding: 6px;

  --picture-scrollbox-height: 1000px;
  --picture-scrollbox-width: 90vw;
}

@media screen and (max-width: 1700px) {
  :root {
    --article-content-width: 824px;

    --picture-max-width: 800px;
    --picture-max-height: 680px;

    --picture-scrollbox-height: 680px;
    --picture-scrollbox-width: 90vw;
  }
}

@media screen and (max-width: 824px) {
  :root {
    --article-content-width: 100%;
    --subtitle-display: block;

    --frame-spacing: 0px;
    --frame-shadow: none;

    --picture-max-width: 100%;
    --picture-max-height: initial;

    --picture-description-padding: 0px 18px 0px;

    --picture-scrollbox-height: 680px;
    --picture-scrollbox-width: 97vw;
  }
}