#bars {
  height: 30px;
  left: 100px;
  margin: -30px 0 0 -20px;
  position: absolute;
  bottom: 80px;
  width: 40px;
}

.bar {
  background: #666;
  bottom: 1px;
  height: 3px;
  position: absolute;
  width: 3px;
  animation: sound 0ms -800ms linear infinite alternate;
}

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 28px;
  }
}
.bar:nth-child(1) {
  left: 1px;
  animation-duration: 474ms;
}

.bar:nth-child(2) {
  left: 5px;
  animation-duration: 433ms;
}

.bar:nth-child(3) {
  left: 9px;
  animation-duration: 407ms;
}

.bar:nth-child(4) {
  left: 13px;
  animation-duration: 458ms;
}

.bar:nth-child(5) {
  left: 17px;
  animation-duration: 400ms;
}

.bar:nth-child(6) {
  left: 21px;
  animation-duration: 427ms;
}

.bar:nth-child(7) {
  left: 25px;
  animation-duration: 441ms;
}

.bar:nth-child(8) {
  left: 29px;
  animation-duration: 419ms;
}

.bar:nth-child(9) {
  left: 33px;
  animation-duration: 487ms;
}

.bar:nth-child(10) {
  left: 37px;
  animation-duration: 442ms;
}
@font-face {
  font-family: vinque;
  src: url("fonts/Vinque Rg.ttf");
}
.title-char {
  font-family: vinque;
  color: #FFFFFF;
  font-size: 80px;
  font-style: italic;
  position: absolute;
}

.title-char-flickering-top {
  top: 250px;
}

.title-char-flickering-bottom,
.title-char-main {
  top: 325px;
}

@keyframes resizing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  99.9% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.title-char-blind-top {
  top: 250px;
  animation: blind-title-top 7s infinite;
}

.title-char-blind-bottom {
  top: 325px;
  animation: blind-title-bottom 7s infinite;
}

@keyframes blind-title-top {
  0% {
    opacity: 0%;
  }
  25% {
    opacity: 10%;
  }
  50% {
    opacity: 0%;
  }
  75% {
    opacity: 10%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes blind-title-bottom {
  0% {
    opacity: 0%;
  }
  25% {
    opacity: 20%;
  }
  50% {
    opacity: 0%;
  }
  75% {
    opacity: 20%;
  }
  100% {
    opacity: 0%;
  }
}
.outer-scratch, .inner-scratch {
  height: inherit;
}

.outer-scratch:after, .inner-scratch:after {
  content: "";
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 100px;
  opacity: 0.08;
  background: url(3ceb31d528b1600c88789a27ba94e4d1.png) repeat center center;
  -webkit-animation: scratch 0.45s steps(1) infinite;
  animation: scratch 0.45s steps(1) infinite;
}

.inner-scratch:after {
  left: 30%;
  -webkit-animation: inner-scratch 2s infinite;
  animation: inner-scratch 2s infinite;
}

.grain:after {
  content: "";
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  opacity: 0.11;
  background: url(21a56168dd935a1818afe97425eb9378.png) repeat center center;
  -webkit-animation: grain 0.5s steps(1) infinite;
  animation: grain 0.5s steps(1) infinite;
}

/* Film Animations */
@keyframes grain {
  0%, 100% {
    transform: translate(0, 0, 0);
  }
  10% {
    transform: translate(-1%, -1%);
  }
  20% {
    transform: translate(1%, 1%);
  }
  30% {
    transform: translate(-2%, -2%);
  }
  40% {
    transform: translate(3%, 3%);
  }
  50% {
    transform: translate(-3%, -3%);
  }
  60% {
    transform: translate(4%, 4%);
  }
  70% {
    transform: translate(-4%, -4%);
  }
  80% {
    transform: translate(2%, 2%);
  }
  90% {
    transform: translate(-3%, -3%);
  }
}
@keyframes scratch {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.075;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
    opacity: 0.09;
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.05;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.02;
  }
  90% {
    transform: translateX(-2%);
  }
}
@keyframes inner-scratch {
  0% {
    transform: translateX(0);
    opacity: 0.08;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.06;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.03;
  }
  90% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(30%);
  }
}
.scene, .scene * {
  box-sizing: border-box;
}

.scene {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 40%;
  left: 50%;
  margin: -75px;
  perspective: 400px;
  animation: scene-move 1s forwards linear 6s;
}

@keyframes scene-move {
  100% {
    top: 550px;
    left: 200px;
    width: 100px;
    height: 100px;
    margin: -50px;
  }
}
.outer-cube {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  animation: incline 1s forwards linear 6s;
}

@keyframes incline {
  100% {
    transform: rotateZ(-30deg);
    width: 100px;
    height: 100px;
  }
}
.cube {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-75px) translateX(0px);
  animation: cube-rotation 2s linear 1s infinite, cube-compression 1s forwards linear 6s;
}

@keyframes cube-rotation {
  0% {
    transform: translateZ(-75px) translateX(0px);
  }
  25% {
    transform: translateZ(-75px) translateX(0px) rotateY(-90deg);
  }
  50% {
    transform: translateZ(-75px) translateX(0px) rotateY(-180deg);
  }
  75% {
    transform: translateZ(-75px) translateX(0px) rotateY(-270deg);
  }
  100% {
    transform: translateZ(-75px) translateX(0px) rotateY(-360deg);
  }
}
@keyframes cube-compression {
  100% {
    width: 100px;
    height: 100px;
  }
}
.cube__face {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  line-height: 150px;
}

.cube__face--front {
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(75px);
}

.cube__face--right {
  transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(75px);
}

.cube__face--back {
  transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(75px);
}

.cube__face--left {
  transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(75px);
}

.cube__face--top {
  transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(75px);
}

.cube__face--bottom {
  transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(75px);
}

.cube__face--front {
  animation: cube-face-front 7s forwards linear;
}

.cube__face--right {
  animation: cube-face-right 7s forwards linear;
}

.cube__face--back {
  animation: cube-face-back 7s forwards linear;
}

.cube__face--left {
  animation: cube-face-left 7s forwards linear;
}

.cube__face--top {
  animation: cube-face-top 7s forwards linear;
}

.cube__face--bottom {
  animation: cube-face-bottom 7s forwards linear;
}

@keyframes cube-face-front {
  0% {
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
@keyframes cube-face-right {
  0% {
    transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
@keyframes cube-face-back {
  0% {
    transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
@keyframes cube-face-left {
  0% {
    transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
@keyframes cube-face-top {
  0% {
    transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
@keyframes cube-face-bottom {
  0% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(500px);
  }
  14.29% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(75px);
  }
  85.71% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(75px);
    width: 150px;
    height: 150px;
  }
  100% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(50px);
    width: 100px;
    height: 100px;
  }
}
.scene-index, .scene-index * {
  box-sizing: border-box;
}

.scene-index {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 300px;
  left: 100px;
  margin: -75px;
  perspective: 400px;
}

.outer-cube-index {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateZ(-30deg);
}

.cube-index {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px) translateX(0px);
  animation: cube-rotation 2s linear infinite;
}

@keyframes cube-rotation {
  0% {
    transform: translateZ(-75px) translateX(0px);
  }
  25% {
    transform: translateZ(-75px) translateX(0px) rotateY(-90deg);
  }
  50% {
    transform: translateZ(-75px) translateX(0px) rotateY(-180deg);
  }
  75% {
    transform: translateZ(-75px) translateX(0px) rotateY(-270deg);
  }
  100% {
    transform: translateZ(-75px) translateX(0px) rotateY(-360deg);
  }
}
.cube__face-index {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  line-height: 100px;
}

.cube__face-index-front {
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) translateZ(50px);
}

.cube__face-index-right {
  transform: rotateX(135deg) rotateY(45deg) rotateZ(0deg) translateZ(50px);
}

.cube__face-index-back {
  transform: rotateX(45deg) rotateY(180deg) rotateZ(45deg) translateZ(50px);
}

.cube__face-index-left {
  transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) translateZ(50px);
}

.cube__face-index-top {
  transform: rotateX(135deg) rotateY(-45deg) rotateZ(90deg) translateZ(50px);
}

.cube__face-index-bottom {
  transform: rotateX(-45deg) rotateY(45deg) rotateZ(90deg) translateZ(50px);
}
.flickering-square {
  border: 0.5px solid;
  z-index: 3;
  position: absolute;
}

@keyframes flickering-square {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes horizontal-bars-moving {
  0% {
    left: 50%;
  }
  25% {
    left: 80%;
  }
  50% {
    left: 50%;
  }
  75% {
    left: 20%;
  }
  100% {
    left: 50%;
  }
}
.horizontal-bars {
  display: flex;
  align-items: center;
  width: 25px;
  height: 400px;
  overflow: hidden;
  background-color: transparent;
  transform: rotate(90deg);
  position: absolute;
  top: 200px;
  left: 400px;
  animation: horizontal-bars-moving 8s linear infinite;
}
.horizontal-bars div {
  flex: 1 0 auto;
  height: 100%;
  margin: 0 0.5px;
  background-color: white;
  animation: animate-bar 300ms linear infinite alternate;
  transform-origin: center;
  opacity: 0;
}
.horizontal-bars div:first-child {
  margin-left: 0;
}
.horizontal-bars div:last-child {
  margin-right: 0;
}
.horizontal-bars div:nth-child(1) {
  animation-duration: 610ms;
  animation-delay: 461ms;
}
.horizontal-bars div:nth-child(2) {
  animation-duration: 744ms;
  animation-delay: 192ms;
}
.horizontal-bars div:nth-child(3) {
  animation-duration: 583ms;
  animation-delay: 377ms;
}
.horizontal-bars div:nth-child(4) {
  animation-duration: 356ms;
  animation-delay: 310ms;
}
.horizontal-bars div:nth-child(5) {
  animation-duration: 370ms;
  animation-delay: 213ms;
}
.horizontal-bars div:nth-child(6) {
  animation-duration: 412ms;
  animation-delay: 59ms;
}
.horizontal-bars div:nth-child(7) {
  animation-duration: 784ms;
  animation-delay: 328ms;
}
.horizontal-bars div:nth-child(8) {
  animation-duration: 589ms;
  animation-delay: 399ms;
}

@keyframes animate-bar {
  0% {
    transform: scaleY(0);
    opacity: 0.8;
  }
  100% {
    transform: scaleY(100%);
    opacity: 0.4;
  }
}
.cont-img-2 {
  position: absolute;
  overflow: hidden;
  border-bottom: 1px solid #ffffff;
}

.cont-img-2-eagle {
  width: 113px;
  height: 129px;
  top: 250px;
  left: 828px;
  animation: cont-appearance-2-eagle 1.5s forwards linear;
  background: url(efd4ea249a778c045b0d1c9591711378.png) no-repeat;
}

@keyframes cont-appearance-2-eagle {
  0% {
    height: 0%;
  }
  66.6% {
    height: 129px;
    filter: brightness(1);
  }
  66.7% {
    opacity: 100%;
  }
  66.8% {
    top: 250px;
    left: 828px;
    border-bottom: 1px solid #ffffff;
    filter: brightness(4);
  }
  100% {
    top: 50px;
    left: 628px;
    border: none;
    opacity: 0%;
    filter: brightness(1);
  }
}
.cont-img-2-planet {
  width: 128px;
  height: 128px;
  top: 250px;
  left: 172px;
  animation: cont-appearance-2-planet 1.5s forwards linear;
  background: url(1bf544aff979f154d7c210f5fffb99fc.png) no-repeat;
}

@keyframes cont-appearance-2-planet {
  0% {
    height: 0%;
  }
  66.6% {
    height: 128px;
    filter: brightness(1);
  }
  66.7% {
    opacity: 100%;
  }
  66.8% {
    top: 250px;
    left: 172px;
    border-bottom: 1px solid #ffffff;
    filter: brightness(4);
  }
  100% {
    top: 50px;
    left: 372px;
    border: none;
    opacity: 0%;
    filter: brightness(1);
  }
}
.cont-img-2-frombehind {
  width: 256px;
  height: 256px;
  top: 200px;
  left: 372px;
  animation: cont-appearance-2-frombehind 1.5s forwards linear;
  background: url(0d0338437ecd0070d4872a58b0cf7209.png) no-repeat;
}

@keyframes cont-appearance-2-frombehind {
  0% {
    height: 0%;
  }
  66.6% {
    height: 256px;
    filter: brightness(1);
  }
  66.7% {
    height: 256px;
    opacity: 100%;
  }
  66.8% {
    top: 200px;
    height: 256px;
    border-bottom: 1px solid #ffffff;
    filter: brightness(4);
  }
  100% {
    top: 50px;
    height: 256px;
    border: none;
    opacity: 0%;
    filter: brightness(1);
  }
}
.cont-img-3 {
  position: absolute;
  overflow: hidden;
  border-bottom: 1px solid #ffffff;
}

.cont-img-3-building {
  width: 627px;
  height: 216px;
  top: 25px;
  left: 186.5px;
  animation: cont-appearance-3-building 1s forwards linear;
  background: url(34fb4e9a48545ecad3d57d27412e56c0.png) no-repeat;
  box-shadow: inset 0px 0px 40px 40px #000000;
}

@keyframes cont-appearance-3-building {
  0% {
    height: 0px;
  }
  49.9% {
    border-bottom: 1px solid white;
    height: 216px;
    filter: brightness(1);
  }
  50% {
    border-bottom: none;
    filter: brightness(4);
  }
  100% {
    filter: brightness(1);
    border-bottom: none;
  }
}
.cont-img-3-eagle {
  width: 113px;
  height: 129px;
  top: 150px;
  left: 700px;
  animation: cont-appearance-3-eagle 1s forwards linear;
  background: url(efd4ea249a778c045b0d1c9591711378.png) no-repeat;
}

@keyframes cont-appearance-3-eagle {
  0% {
    height: 0px;
  }
  49.9% {
    border-bottom: 1px solid white;
    height: 129px;
    filter: brightness(1);
  }
  50% {
    border-bottom: none;
    filter: brightness(4);
  }
  100% {
    filter: brightness(1);
    border-bottom: none;
  }
}
.cont-img-3-planet {
  width: 128px;
  height: 128px;
  top: 150px;
  left: 200px;
  animation: cont-appearance-3-planet 1.5s forwards linear;
  background: url(1bf544aff979f154d7c210f5fffb99fc.png) no-repeat;
}

@keyframes cont-appearance-3-planet {
  0% {
    height: 0px;
  }
  49.9% {
    border-bottom: 1px solid white;
    height: 128px;
    filter: brightness(1);
  }
  50% {
    border-bottom: none;
    filter: brightness(4);
  }
  100% {
    filter: brightness(1);
    border-bottom: none;
  }
}
.cont-img-3-frombehind {
  width: 256px;
  height: 256px;
  top: 10px;
  left: 372px;
  animation: cont-appearance-3-frombehind 1.5s forwards linear;
  background: url(0d0338437ecd0070d4872a58b0cf7209.png) no-repeat;
}

@keyframes cont-appearance-3-frombehind {
  0% {
    height: 0px;
  }
  49.9% {
    border-bottom: 1px solid white;
    height: 256px;
    filter: brightness(1);
  }
  50% {
    border-bottom: none;
    filter: brightness(4);
  }
  100% {
    filter: brightness(1);
    border-bottom: none;
  }
}
@keyframes appearance {
  0% {
    transform: scale(0);
    border: 1px solid #ffffff;
  }
  100% {
    transform: scale(1);
    border: 1px solid #ffffff;
  }
}
@keyframes growing-dark {
  0% {
    top: 100%;
    opacity: 50%;
  }
  50% {
    top: 100%;
    opacity: 50%;
  }
  75% {
    top: 0%;
    opacity: 50%;
  }
  100% {
    top: 0%;
    opacity: 100%;
  }
}
@keyframes white-border-rise {
  0% {
    top: 100%;
    visibility: visible;
  }
  50% {
    top: 100%;
    visibility: visible;
  }
  75% {
    top: 0%;
    visibility: visible;
  }
  75.1% {
    top: 0%;
    visibility: hidden;
  }
  100% {
    top: 0%;
    visibility: hidden;
  }
}
.cont-img {
  position: absolute;
  width: 190px;
  height: 190px;
  overflow: hidden;
  animation: appearance 0.5s linear;
  border: 0;
}

.curtain {
  width: 100%;
  animation: growing-dark 1.5s linear;
}

.white-border {
  width: 100%;
  height: 1px;
  visibility: hidden;
  animation: white-border-rise 1.5s linear;
}

#img-1-1 {
  margin: 0px -106px -106px 0px;
}

#img-1-2 {
  margin: -106px -53px 0px -53px;
}

#img-1-3 {
  margin: 0px 0px -106px -106px;
}

#img-2-1 {
  margin: 0px -13px -29px 0px;
}

#img-2-2 {
  margin: 0px 0px -29px -13px;
}

#img-2-3 {
  margin: -29px -6.5px 0px -6.5px;
}
@font-face {
  font-family: NewCyrillicGoth;
  src: url(fonts/NewCyrillicGoth.ttf);
}
/* Works on Firefox */
* {
  --scrollbarBg: rgb(0, 0, 0);
  --scrollbarThumb: rgb(170, 170, 170);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarBg) var(--scrollbarThumb);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbarThumb);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarBg);
  border-radius: 20px;
  border: 2px solid var(--scrollbarThumb);
}

#index * {
  position: absolute;
  font-family: arial;
}

#index {
  cursor: crosshair;
  border-bottom: 0.5px solid #ffffff50;
  position: absolute;
  height: 80vh;
  width: 100vw;
  overflow-x: scroll;
  top: 0px;
  left: 0px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.314);
  background: #080096;
  background: linear-gradient(0deg, #040051 0%, black 20%, black 77%, #040051 100%);
}

#header {
  background-color: #030839;
  height: 120px;
  width: 2350px;
  top: 0px;
  left: 0px;
}

#index-img-main {
  top: 38px;
  left: 25px;
}

#e-mail {
  top: 450px;
  left: 25px;
  color: gray;
  text-decoration: none;
}
#e-mail:hover #e-mail-label {
  visibility: visible;
}
#e-mail #e-mail-label {
  width: 200px;
  top: 15px;
  left: 130px;
  color: #D627FF;
  font-weight: 600;
  visibility: hidden;
}

#rabbit-hole {
  top: 250px;
  left: 225px;
  color: #030839;
  font-weight: 600;
  font-size: 24px;
}
#rabbit-hole:hover {
  color: #060B69;
  cursor: pointer;
}
#rabbit-hole img {
  transform: rotate(-75deg);
  top: 25px;
  left: 80px;
  height: 50px;
}
#rabbit-hole span {
  width: 180px;
}
#rabbit-hole #rabbit-hole-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#rabbit-hole:hover #rabbit-hole-descr {
  top: -200px;
  opacity: 1;
  left: 225px;
  transform: scale(1);
}
#rabbit-hole:hover #rabbit-hole-label {
  visibility: visible;
}
#rabbit-hole #rabbit-hole-label {
  font-size: 14px;
  width: 200px;
  top: 55px;
  left: 130px;
  color: #00C3DA;
  font-weight: 600;
  visibility: hidden;
}

#short-story {
  top: 225px;
  left: 500px;
  color: #030839;
  font-weight: 600;
  font-size: 24px;
}
#short-story:hover {
  color: #060B69;
  cursor: pointer;
}
#short-story img {
  transform: rotate(-75deg);
  top: 60px;
  left: 100px;
  height: 50px;
}
#short-story #short-story-descr {
  top: 5px;
  left: -50px;
  width: 200px;
  font-size: 14px;
}
#short-story:hover #short-story-descr {
  top: -200px;
  opacity: 1;
  left: 0px;
  transform: scale(1);
}
#short-story:hover #short-story-label {
  visibility: visible;
}
#short-story #short-story-label {
  font-size: 14px;
  width: 200px;
  top: 105px;
  left: 100px;
  color: #D57D00;
  font-weight: 600;
  visibility: hidden;
}

#navigation {
  top: 155px;
  left: 390px;
  width: 127px;
  height: 50px;
}
#navigation:hover {
  cursor: pointer;
}
#navigation:hover #navigation-1 {
  color: #060B69;
}
#navigation #navigation-bordered {
  top: 25px;
  left: 20px;
}
#navigation #navigation-1 {
  top: 0px;
  left: 0px;
  color: #030839;
  font-weight: 600;
  font-size: 24px;
}
#navigation:hover #navigation-label {
  visibility: visible;
}
#navigation #navigation-label {
  font-size: 14px;
  width: 200px;
  top: 50px;
  left: 100px;
  color: #C21603;
  font-weight: 600;
  visibility: hidden;
}
#navigation #navigation-descr {
  top: 5px;
  left: -50px;
  width: 200px;
  font-size: 14px;
}
#navigation:hover #navigation-descr {
  top: -125px;
  opacity: 1;
  left: 100px;
  transform: scale(1);
}

#key {
  top: 350px;
  left: 350px;
  width: 200px;
  height: 200px;
}
#key:hover {
  cursor: pointer;
}
#key img {
  height: 75px;
}
#key img:hover {
  animation: key-flickering 1s infinite;
}
#key:hover span {
  color: #060B69;
}
#key span {
  top: 100px;
  left: -40px;
  color: #030839;
  font-weight: 600;
  font-size: 24px;
  width: 500px;
}
#key #key-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#key:hover #key-descr {
  top: -300px;
  opacity: 1;
  left: 150px;
  transform: scale(1);
}

#its-me {
  top: 400px;
  left: 600px;
  width: 250px;
  height: 75px;
}
#its-me:hover #its-me-1 {
  color: #060B69;
}
#its-me img {
  top: 0px;
  left: 0px;
  width: 200px;
}
#its-me #its-me-1 {
  top: 25px;
  left: 35px;
  font-size: 40px;
  color: #030839;
  font-weight: 600;
}
#its-me #its-me-bordered {
  top: 60px;
  left: 70px;
}
#its-me #its-me-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#its-me:hover #its-me-descr {
  top: -300px;
  opacity: 1;
  left: 150px;
  transform: scale(1);
}

@keyframes key-flickering {
  0% {
    filter: none;
  }
  50% {
    filter: contrast(2);
  }
  100% {
    filter: none;
  }
}
.bordered {
  color: #CC5F0F;
  border: 1px solid #CC5F0F;
  padding: 2px 5px;
  cursor: pointer;
}

.radial-background {
  padding: 12px;
  background: radial-gradient(#505050 0%, transparent 70%);
}

#soul {
  top: 420px;
  left: 900px;
  font-style: italic;
  width: 500px;
  cursor: pointer;
}
#soul #soul-1 {
  font-size: 12px;
  color: #C97D48;
}
#soul #soul-2 {
  text-decoration: none;
  top: 20px;
  left: -32px;
  font-size: 20px;
  color: white;
  font-family: NewCyrillicGoth;
}

#travel {
  top: 200px;
  left: 725px;
  font-weight: 600px;
  width: 300px;
  height: 175px;
}
#travel #rio {
  top: -50px;
  left: -50px;
  height: 175px;
  width: 264px;
  background: url(5a54b6d0ed2a49335028d38509668d5a.jpg);
  box-shadow: inset 0px 0px 40px 40px #000000;
}
#travel #index-planet {
  top: 25px;
  left: 100px;
  height: 128px;
  width: 128px;
  font-weight: 600px;
  cursor: pointer;
}
#travel #travel-1 {
  top: 25px;
  left: 160px;
  color: #013DFF;
  font-size: 40px;
  visibility: hidden;
  cursor: pointer;
}
#travel #travel-2 {
  top: 60px;
  left: 185px;
  color: #FF28D3;
  font-size: 40px;
  visibility: hidden;
  cursor: pointer;
}
#travel #travel-descr-1 {
  top: 5px;
  left: 0px;
  width: 450px;
}
#travel #travel-descr-2 {
  top: 5px;
  left: 425px;
  width: 200px;
}
#travel:hover #travel-descr-1 {
  top: -200px;
  opacity: 1;
  transform: scale(1);
}
#travel:hover #travel-descr-2 {
  top: -200px;
  opacity: 1;
  transform: scale(1);
}

#news {
  top: 150px;
  left: 1250px;
  width: 450px;
  color: white;
}
#news #news-title {
  font-size: 16px;
  left: 60px;
}
#news span,
#news a {
  position: relative;
  text-indent: 1em;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  display: inline-block;
}
#news .news-date {
  padding-top: 12px;
}
#news #block {
  top: 25px;
  border: 1px solid white;
  width: 220px;
  height: 300px;
  padding: 10px;
  overflow-y: overlay;
}
#news #inner-block {
  position: relative;
}
#news #up {
  left: 250px;
  width: 21px;
  height: 32px;
  top: 25px;
  background: url(a12250208558690d7634807ff3d5feb4.png) no-repeat;
  cursor: pointer;
}
#news #up:hover {
  background: url(bf1209f28d62cde3fbc6c5668b65fdf6.png) no-repeat;
}
#news #up:active {
  background: url(bfb0a6fc8f819dabc0ab1e395e8a0668.png) no-repeat;
}
#news #down {
  left: 250px;
  width: 21px;
  height: 32px;
  top: 315px;
  background: url(517d83fb6316fc3752f3d1437dfff712.png) no-repeat;
  cursor: pointer;
}
#news #down:hover {
  background: url(3683101b34465068a9b5ce781552a605.png) no-repeat;
}
#news #down:active {
  background: url(9c2d1a64fd83423fac379b77eccc11e5.png) no-repeat;
}

#forum {
  top: 150px;
  left: 1600px;
}
#forum #forum-img {
  width: 173px;
  height: 114px;
  background: url(22y22.jpg);
  box-shadow: inset 0px 0px 20px 20px #000000;
}
#forum #forum-bordered {
  left: 125px;
  top: 50px;
  padding: 2px 20px;
}
#forum #forum-bordered:hover {
  background-color: white;
}
#forum #forum-bordered:hover #forum-1 {
  visibility: visible;
}
#forum #forum-bordered #forum-1 {
  left: 50px;
  top: 25px;
  color: #00C3DA;
  visibility: hidden;
}
#forum #forum-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#forum:hover #forum-descr {
  top: -125px;
  opacity: 1;
  left: 0px;
  transform: scale(1);
}

#entertainment {
  top: 450px;
  left: 1600px;
}
#entertainment #entertainment-bordered:hover #entertainment-1 {
  visibility: visible;
}
#entertainment #entertainment-1 {
  top: 25px;
  left: 75px;
  font-weight: 600;
  color: #7DBE5A;
  visibility: hidden;
}
#entertainment #entertainment-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#entertainment:hover #entertainment-descr {
  top: -350px;
  opacity: 1;
  left: 150px;
  transform: scale(1);
}

#gallery {
  top: 320px;
  left: 1800px;
  width: 200px;
  height: 200px;
}
#gallery:hover #gallery-1 {
  visibility: visible;
}
#gallery:hover #gallery-2 {
  visibility: visible;
}
#gallery img {
  top: 25px;
}
#gallery #gallery-bordered {
  left: 110px;
  top: 80px;
}
#gallery #gallery-1 {
  color: #007FFF;
  text-shadow: 2px -2px #3798fa;
  font-weight: 600;
  font-size: 24px;
  top: 0px;
  left: 25px;
  width: 300px;
  visibility: hidden;
}
#gallery #gallery-2 {
  color: #0CA213;
  text-shadow: 2px -2px #5fc464;
  font-weight: 600;
  font-size: 24px;
  top: 25px;
  left: 115px;
  width: 300px;
  visibility: hidden;
}
#gallery #gallery-descr-1 {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#gallery:hover #gallery-descr-1 {
  top: -275px;
  opacity: 1;
  left: -50px;
  transform: scale(1);
}
#gallery #gallery-descr-2 {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#gallery:hover #gallery-descr-2 {
  top: -300px;
  opacity: 1;
  left: 150px;
  transform: scale(1);
}

#extreme {
  top: 150px;
  left: 2100px;
}
#extreme #extreme-img {
  background: url(22h22.jpg);
  box-shadow: inset 0px 0px 20px 20px #000000;
  width: 250px;
  height: 250px;
}
#extreme #extreme-bordered {
  top: 225px;
  left: 0px;
  padding: 2px 20px;
  font-weight: 600;
  border-width: 2px;
}
#extreme #extreme-bordered:hover {
  background-color: white;
}
#extreme #extreme-bordered:hover #extreme-1 {
  visibility: visible;
}
#extreme #extreme-bordered #extreme-1 {
  top: 37px;
  left: 50px;
  font-weight: 600;
  color: #d7d6e6;
  visibility: hidden;
}
#extreme #extreme-bordered #extreme-descr {
  top: 5px;
  left: 0px;
  width: 200px;
  font-size: 14px;
  color: #00C3DA;
  font-weight: 500;
}
#extreme #extreme-bordered:hover #extreme-descr {
  top: -300px;
  opacity: 1;
  left: -50px;
  transform: scale(1);
}

.index-description {
  color: #00C3DA;
  transition: all 1s;
  opacity: 0;
  transform: scale(0);
}

#fakel {
  top: 415px;
  left: 2230px;
  width: 100px;
  height: 100px;
}

#smoke {
  display: none;
  top: 398px;
  left: 2255px;
  width: 100px;
  height: 80px;
  animation: burning 7s infinite;
}

@keyframes burning {
  0% {
    opacity: 0.3;
  }
  10% {
    opacity: 0.8;
  }
  20% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
.bracket {
  width: 25px;
  height: 100px;
  border-color: white;
  border-style: solid;
  visibility: hidden;
}
.scene, .scene * {
  box-sizing: border-box;
}

.papers-scene {
  width: 15px;
  height: 12px;
  position: absolute;
  top: 200px;
  left: 100px;
  margin: 0px;
  perspective: 400px;
  transform: rotate(60deg);
  border: 1px solid white;
  background-color: yellow;
}

#papers-scene-1 {
  animation: papers-move 12s linear 0s infinite, papers-rotating 2s infinite;
}

#papers-scene-2 {
  animation: papers-move 10s linear 0.25s infinite, papers-rotating 1s infinite;
}

#papers-scene-3 {
  animation: papers-move 9s linear 0.5s infinite, papers-rotating 3s infinite;
}

#papers-scene-4 {
  animation: papers-move 7s linear 0.75s infinite, papers-rotating 1s infinite;
}

@keyframes papers-move {
  17% {
    top: 15px;
    left: 400px;
  }
  34% {
    top: 76vh;
    left: 800px;
  }
  51% {
    top: 15px;
    left: 1200px;
  }
  67% {
    top: 76vh;
    left: 1600px;
  }
  83% {
    top: 15px;
    left: 2000px;
  }
  100% {
    top: 48vh;
    left: 2285px;
  }
}
@keyframes papers-rotating {
  0% {
    transform: rotate(60deg) rotateX(0deg);
    filter: contrast(1);
  }
  25% {
    transform: rotate(-60deg) rotateX(90deg);
    filter: contrast(2);
  }
  50% {
    transform: rotate(60deg) rotateX(180deg);
    filter: contrast(1);
  }
  75% {
    transform: rotate(-60deg) rotateX(270deg);
    filter: contrast(2);
  }
  100% {
    transform: rotate(60deg) rotateX(360deg);
    filter: contrast(1);
  }
}
#start-page {
  background: black;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

#start-page span {
  color: white;
  font-family: vinque;
  font-size: 80px;
  top: 40%;
  text-align: center;
  position: absolute;
  width: 100%;
}
body {
  background-color: #000000;
}

#intro {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.Typewriter-container {
  color: #EEEEEE;
  width: 200px;
  position: absolute;
}

#central-container {
  margin: auto;
  width: 1000px;
  height: 800px;
  position: absolute;
  top: 5px;
  margin-left: -500px;
  left: 50%;
}

#img-3-1 {
  width: 128px;
  height: 128px;
  margin: 0px -53px -53px 0px;
}

#img-3-2 {
  width: 128px;
  height: 128px;
  margin: -53px -26.5px 0px -26.5px;
}

#img-3-3 {
  width: 128px;
  height: 128px;
  margin: 0px 0px -53px -53px;
}

img {
  position: absolute;
}

#eagles {
  position: absolute;
  top: 500px;
  left: 500px;
}

@keyframes disappearance {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
#photo-behind-small {
  top: 180px;
  left: 275px;
  width: 100px;
  height: 100px;
  animation: photo-behind-small-appearance 1s linear;
}

@keyframes photo-behind-small-appearance {
  0% {
    opacity: 100%;
  }
  25% {
    filter: brightness(2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.25);
    top: 190px;
    left: 265px;
  }
  100% {
    top: 200px;
    left: 255px;
  }
}
#skip-intro {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 200px;
  text-align: center;
  margin-left: -100px;
  color: #63B7D4;
  z-index: 2;
}

#skip-intro:hover {
  color: #4CC6FB;
  cursor: pointer;
}

.timer {
  position: absolute;
  top: 175px;
  left: 850px;
  color: #ffffff50;
}

.last-title {
  position: absolute;
  font-size: 60px;
  font-family: vinque;
  color: white;
  top: 500px;
  z-index: 2;
}

.last-title:hover {
  cursor: pointer;
}

.last-title-1 {
  animation: last-title-1-move 0.5s forwards;
}

@keyframes last-title-1-move {
  0% {
    left: 700px;
    opacity: 0%;
  }
  100% {
    left: 600px;
    opacity: 100%;
  }
}
.last-title-2 {
  animation: last-title-2-move 0.5s forwards;
}

@keyframes last-title-2-move {
  0% {
    left: 1500px;
  }
  100% {
    left: 767px;
  }
}
.last-title-3 {
  animation: last-title-3-move 0.5s forwards;
}

@keyframes last-title-3-move {
  0% {
    left: 1600px;
  }
  100% {
    left: 900px;
  }
}
#enter-label {
  color: white;
  position: absolute;
  left: 935px;
  top: 575px;
  visibility: hidden;
  font-weight: 600;
}

#mute-button {
  position: absolute;
  left: -14px;
  top: 662px;
  opacity: 0.5;
  height: 54px;
  z-index: 3;
}