:root {
  --unit: 10px;
  --unit_half: calc(var(--unit) / 2);
  --unit_third: calc(var(--unit) / 3);
  --unit_x2: calc(var(--unit) * 2);
  --unit_x3: calc(var(--unit) * 3);
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1280));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1280));
    --width_image_small-square: calc(400px * var(--sf_1920-1280));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1280));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1440));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1440));
    --width_image_small-square: calc(400px * var(--sf_1920-1440));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1440));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1680));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1680));
    --width_image_small-square: calc(400px * var(--sf_1920-1680));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1680));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --unit: 10px;
    --unit_half: calc(var(--unit) / 2);
    --unit_third: calc(var(--unit) / 3);
    --unit_x2: calc(var(--unit) * 2);
    --unit_x3: calc(var(--unit) * 3);
    --width_image_tiny-square: 200px;
    --width_image_small-square: 400px;
    --width_image_large-landscape: 800px;
    --width_image_small-portrait: 600px;
  }
}

@font-face {
  font-family: "SOME FONT";
  src: url("../fonts/SOME-FONT.otf") format("opentype");
}
:root {
  --fontsize_normal: 20px;
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --fontsize_normal: 28px;
  }
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

:root {
  --unit: 10px;
  --unit_half: calc(var(--unit) / 2);
  --unit_third: calc(var(--unit) / 3);
  --unit_x2: calc(var(--unit) * 2);
  --unit_x3: calc(var(--unit) * 3);
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1280));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1280));
    --width_image_small-square: calc(400px * var(--sf_1920-1280));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1280));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1440));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1440));
    --width_image_small-square: calc(400px * var(--sf_1920-1440));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1440));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1680));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1680));
    --width_image_small-square: calc(400px * var(--sf_1920-1680));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1680));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --unit: 10px;
    --unit_half: calc(var(--unit) / 2);
    --unit_third: calc(var(--unit) / 3);
    --unit_x2: calc(var(--unit) * 2);
    --unit_x3: calc(var(--unit) * 3);
    --width_image_tiny-square: 200px;
    --width_image_small-square: 400px;
    --width_image_large-landscape: 800px;
    --width_image_small-portrait: 600px;
  }
}

:root {
  --unit: 10px;
  --unit_half: calc(var(--unit) / 2);
  --unit_third: calc(var(--unit) / 3);
  --unit_x2: calc(var(--unit) * 2);
  --unit_x3: calc(var(--unit) * 3);
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1280));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1280));
    --width_image_small-square: calc(400px * var(--sf_1920-1280));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1280));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1440));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1440));
    --width_image_small-square: calc(400px * var(--sf_1920-1440));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1440));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1680));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1680));
    --width_image_small-square: calc(400px * var(--sf_1920-1680));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1680));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --unit: 10px;
    --unit_half: calc(var(--unit) / 2);
    --unit_third: calc(var(--unit) / 3);
    --unit_x2: calc(var(--unit) * 2);
    --unit_x3: calc(var(--unit) * 3);
    --width_image_tiny-square: 200px;
    --width_image_small-square: 400px;
    --width_image_large-landscape: 800px;
    --width_image_small-portrait: 600px;
  }
}

@font-face {
  font-family: "SOME FONT";
  src: url("../fonts/SOME-FONT.otf") format("opentype");
}
:root {
  --fontsize_normal: 20px;
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --fontsize_normal: 28px;
  }
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

.clock {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  padding: var(--unit);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: var(--fontsize_normal);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: end;
      align-items: flex-end;
}

:root {
  --unit: 10px;
  --unit_half: calc(var(--unit) / 2);
  --unit_third: calc(var(--unit) / 3);
  --unit_x2: calc(var(--unit) * 2);
  --unit_x3: calc(var(--unit) * 3);
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1280));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1280));
    --width_image_small-square: calc(400px * var(--sf_1920-1280));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1280));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1440));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1440));
    --width_image_small-square: calc(400px * var(--sf_1920-1440));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1440));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1680));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1680));
    --width_image_small-square: calc(400px * var(--sf_1920-1680));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1680));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --unit: 10px;
    --unit_half: calc(var(--unit) / 2);
    --unit_third: calc(var(--unit) / 3);
    --unit_x2: calc(var(--unit) * 2);
    --unit_x3: calc(var(--unit) * 3);
    --width_image_tiny-square: 200px;
    --width_image_small-square: 400px;
    --width_image_large-landscape: 800px;
    --width_image_small-portrait: 600px;
  }
}

:root {
  --unit: 10px;
  --unit_half: calc(var(--unit) / 2);
  --unit_third: calc(var(--unit) / 3);
  --unit_x2: calc(var(--unit) * 2);
  --unit_x3: calc(var(--unit) * 3);
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1280));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1280));
    --width_image_small-square: calc(400px * var(--sf_1920-1280));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1280));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1440));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1440));
    --width_image_small-square: calc(400px * var(--sf_1920-1440));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1440));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --unit: calc(10px * var(--sf_1920-1680));
    --width_image_tiny-square: calc(200px * var(--sf_1920-1680));
    --width_image_small-square: calc(400px * var(--sf_1920-1680));
    --width_image_large-landscape: calc(800px * var(--sf_1920-1680));
    --width_image_small-portrait: calc(600px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --unit: 10px;
    --unit_half: calc(var(--unit) / 2);
    --unit_third: calc(var(--unit) / 3);
    --unit_x2: calc(var(--unit) * 2);
    --unit_x3: calc(var(--unit) * 3);
    --width_image_tiny-square: 200px;
    --width_image_small-square: 400px;
    --width_image_large-landscape: 800px;
    --width_image_small-portrait: 600px;
  }
}

@font-face {
  font-family: "SOME FONT";
  src: url("../fonts/SOME-FONT.otf") format("opentype");
}
:root {
  --fontsize_normal: 20px;
  --sf_1920-1680: 0.875;
  --sf_1920-1440: 0.75;
  --sf_1920-1280: (1 / 3) * 2;
}
@media (min-width: 1280px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1280));
  }
}
@media (min-width: 1440px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1440));
  }
}
@media (min-width: 1680px) {
  :root {
    --fontsize_normal: calc(28px * var(--sf_1920-1680));
  }
}
@media (min-width: 1920px) {
  :root {
    --fontsize_normal: 28px;
  }
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

.showcase {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.showcase__url-holder img {
  display: none;
}
.showcase__image {
  position: absolute;
}
.showcase__image_tiny-square {
  width: var(--width_image_tiny-square);
}
.showcase__image_small-square {
  width: var(--width_image_small-square);
}
.showcase__image_large-landscape {
  width: var(--width_image_large-landscape);
}
.showcase__image_small-portrait {
  width: var(--width_image_small-portrait);
}

/*# sourceMappingURL=main.css.map */