@font-face {
  font-family: "Crash";
  src: url('../fonts/Crash_Regular.svg#filename') format('svg'),
    url('../fonts/Crash_Regular_ua.otf') format('opentype'),
      url('../fonts/Crash_Regular.ttf') format('truetype'),
      url('../fonts/Crash_Regular.woff') format('woff');
}

@font-face {
  font-family: "Menufont";
  src: 
      url('../fonts/Agatha-modern.ttf') format('truetype'),
      url('../fonts/agatha-modern-webfont.woff2') format('woff2'),
      url('../fonts/agatha-modern-webfont.woff') format('woff');
}

:root {
  --near-image-width: 70%;
  --near-image-height: 70%;
  --near-image-right: 13%;
  --near-image-top: 15%;
  --far-image-width: 0.5%;
  --far-image-height: 0.5%;
  --far-image-right: 47%;
  --far-image-top: 50%;
  --middle-image-width: 50%;
  --middle-image-height: 50%;
  --middle-image-right: 25%;
  --middle-image-top: 25%;
  --minimized-content-title: 70px;
}

html {
  height: 100%;
  background-color: #1e0b25;
  cursor: pointer;
}
body {
  height: 100%;
  margin: 0;
}

#aim {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-top: 1px solid white;
  border-left: 1px solid white;
  left: calc(11.3%);
  top: calc(9.3%);
  z-index: 100;
}

#debugger {
  color: gold;
  position: absolute;
  left: 200px;
  top: 150px;
  font-size: 22px;
}

#content {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.deep {
  position: relative;
  width: 100%;
  background-color: #000022;
  max-width: 950px;
  max-height: 700px;
  margin: 0 auto;
  text-align: center;
}

.deep > img {
  pointer-events: none;
  display: block;
  position: relative;
  max-height: 100%;
  width: 100%;
  z-index: 80;
}

.content-title {
  position: absolute;
  color: gold;
  font-family: Crash;
  font-size: 150px;
  bottom: 35%;
  animation-name: fadein, minimize;
  animation-duration: 1s, 1.3s;
  animation-delay: 0s, 1s;
  animation-timing-function: ease-in, ease-in-out;
  animation-fill-mode: forwards;
  z-index: 22;
}

.content-title.minimize-left {
  bottom: 13%;
  opacity: 0;
  right: 9%;
  font-size: var(--minimized-content-title);
  animation-name: fadein, minimize;
  animation-duration: 1s, 1s;
  animation-delay: 2s, 2s;
  animation-timing-function: ease-out, ease-out;
}

@media (max-width: 949px) {
  .content-title.minimize-left {
    font-size: 6vw;
  }
}

.content-component {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  color: #20c9da;
}

#content .container {
  height: 100%;
}

.fly-in-top {
  top: 20%;
  right: 11%;
  animation-name: content-fly-in-top;
  animation-duration: 1.5s;
  animation-delay: 2s;
}

.fly-in-bottom {
  bottom: 20%;
  left: 15%;
  animation-name: content-fly-in-bottom;
  animation-duration: 1.5s;
  animation-delay: 3.5s;
}

.content-text {
  opacity: 0;
  position: absolute;
  text-align: justify;
  text-indent: 22px;
  width: 70%;
  font-family: 'Crash';
  font-size: 28px;
  line-height: 1.1;
  animation-fill-mode: forwards;
}

@media (max-width: 949px) {
  .content-text {
    font-size: 3.15vw;
  }
}

.fly-in {
  animation-name: fadein, fly-in-image;
  animation-duration: 3s, 3s;
  animation-delay: 0s, 0s;
  animation-timing-function: linear, ease-in;
  animation-fill-mode: forwards;
}

.fly-in.cosmonaut {
  animation-name: fadein, fly-in-image;
  animation-duration: 2s, 30s;
  animation-delay: 38s, 40s;
  animation-timing-function: linear, ease-in;
  animation-fill-mode: forwards;
}

.fly-out {
  animation-name: fadein, fly-out-image, fadeout;
  animation-duration: 3s, 30s, 2s;
  animation-delay: 2s, 8s, 36s;
  animation-timing-function: linear, ease-out, linear;
  animation-fill-mode: forwards;
}

.content-image {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-size: contain;
}

.content-image.jellyfish {
  background-image: url('../imgs/meduza.png');
}

.content-image.cosmonaut {
  background-image: url('../imgs/bcosmo1.gif');
}

.content-image.far {
  opacity: 0;
  width: var(--far-image-width);
  height: var(--far-image-height);
  top: var(--far-image-top);
  right: var(--far-image-right);
}

.content-image.middle {
  opacity: 0;
  width: var(--middle-image-width);
  height: var(--middle-image-height);
  top: var(--middle-image-top);
  right: var(--middle-image-right);
}

.content-image.near {
  opacity: 0;
  width: var(--near-image-width);
  height: var(--near-image-height);
  top: var(--near-image-top);
  right: var(--near-image-right);
}

@keyframes fly-in-image {
  to {
    top: var(--near-image-top);
    right: var(--near-image-right);
    width: var(--near-image-width);
    height: var(--near-image-height);
  }
}

@keyframes fly-out-image {
  to {
    top: var(--far-image-top);
    right: var(--far-image-right);
    width: var(--far-image-width);
    height: var(--far-image-height);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes content-fly-in-top {
  to {
    right: 17%;
    top: 33%;
    opacity: 1;
  }
}

@keyframes content-fly-in-bottom {
  to {
    left: 22%;
    bottom: 32%;
    opacity: 1;
  }
}

@keyframes minimize {
  to {
    right: 30px;
    bottom: 25px;
    font-size: var(--minimized-content-title);
  }
}

@media (max-width: 949px) {
  @keyframes minimize {
    to {
      right: 30px;
      bottom: 25px;
      font-size: 10vw;
    }
  }
}

.content-title.animated {
  width: auto;
  right: 30px;
  bottom: 25px;
  font-size: 80px;
}