* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
  font-family: 'AlumniSans';
  src: url('../fonts/AlumniSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* ВЕРХНИЙ БОКС */
.top-ui-layer {
  width: 100vw;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

/* СИНИЙ ПРЯМОУГОЛЬНИК С ЛОГО */
.top-bar {
  width: 100vw;
  height: 25vw;
  background-color: #2B50AA;
  border: 5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3vw;
}

/* АНИМАЦИЯ */
@keyframes scroll_left {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}

@keyframes scroll_right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.bottom-bar {
  position: relative;
  width: 100vw;
  height: 15vw;
  background-color: #01B37F;
  border: 5px solid black;
  box-sizing: border-box;
  overflow: hidden;
}

.bar_in {
  position: relative;
  top: -10%;
  display: flex;
  width: fit-content;
  animation: scroll_left 16s linear infinite;
}

.bottom-text {
  box-sizing: border-box;
  font-family: 'AlumniSans', sans-serif;
  font-weight: 500;
  font-size: 15vw;
  color: white;
  line-height: 1;
  white-space: nowrap;
  padding: .0em .20em;
}

/* БРОВИ */
.brows-row {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 15vmin;
  display: flex;
  align-items: center;
  z-index: 999;
  overflow: hidden;
}

.brows-strip {
  display: flex;
  height: 100%;
  overflow: hidden;
  animation: scroll_right 8s linear infinite;
  flex-wrap: nowrap;
  min-width: fit-content;
}

.brows-strip:hover {
  animation-play-state: paused;
}

.brow {
  width: 25vw;
  height: 15vmin;
  border: 5px solid black;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.brow.el-1 {
    background-color: #05C1F1;
    background-image: url('../images/eyebrow_blue_up.svg');
}
.brow.el-2 {
    background-color: #05C1F1;
    background-image: url('../images/eyebrow_blue_down.svg');
}
.brow.el-3 {
    background-color: #FF4431;
    background-image: url('../images/eyebrow_red.svg');
}
.brow.el-4 {
    background-color: #FF4431;
    background-image: url('../images/eyebrow_red.svg');
    transform: scaleX(-1);
}
.brow.el-5 {
    background-color: #F7DE1C;
    background-image: url('../images/eyebrow_yellow.svg');
}
.brow.el-6 {
    background-color: #F7DE1C;
    background-image: url('../images/eyebrow_yellow.svg');
    transform: scaleX(-1);
}
.brow.el-7 {
    background-color: #7A59A4;
    background-image: url('../images/eyebrow_purple.svg');
}
.brow.el-8 {
    background-color: #7A59A4;
    background-image: url('../images/eyebrow_purple.svg');
    transform: scaleX(-1);
}
.brow.el-9 {
    background-color: #01B37F;
    background-image: url('../images/eyebrow_green.svg');
}
.brow.el-10 {
    background-color: #01B37F;
    background-image: url('../images/eyebrow_green.svg');
    transform: scaleX(-1);
}

/* БОКС ДЛЯ ВСЕГО ЛИЦА */
.face-layer {
  width: 100vw;
  height: 70vw;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* ЛЕВЫЕ УШИ */
@keyframes scroll_Up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200vh); }
}

.ears-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 25vw;
  height: 400vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scroll_Up 8s linear infinite;
  box-sizing: border-box;
}

.ears-left:hover {
  animation-play-state: paused;
}

.ear {
  width: 100%;
  height: 25vw;
  border: 5px solid black;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.ear.el-1{
  background-color: #05C1F1;
  background-image: url('../images/ear_yellow.svg');
}
.ear.el-2 {
  background-color: #FF4431;
  background-image: url('../images/ear_blue.svg');
}
.ear.el-3 {
  background-color: #F7DE1C;
  background-image: url('../images/ear_purple.svg');
}
.ear.el-4 {
  background-color: #01B37F;
  background-image: url('../images/ear_pink.svg');
}
.ear.el-5 {
  background-color: #FF8CBD;
  background-image: url('../images/ear_red.svg');
}
.ear.el-6 {
  background-color: #7A59A4;
  background-image: url('../images/ear_yellow_big.svg');
}

/* ПРАВЫЕ УШИ */
.ears-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 25vw;
  height: 400vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scroll_Up 8s linear infinite;
  box-sizing: border-box;
}

.ears-right:hover {
  animation-play-state: paused;
}

.ears-right .ear {
  transform: scaleX(-1);
}

/* ГЛАЗА СЛЕВА */
@keyframes scrollEyesDown {
  0% { transform: translateY(-200vh); }
  100% { transform: translateY(0); }
}

.center-left-panel {
  position: relative;
  top: 0;
  left: 25vw;
  width: 25vw;
  height: 400vh;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  animation: scrollEyesDown 8s linear infinite;
}

.eye {
  width: 100%;
  height: 25vw;
  border: 5px solid black;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.eye.el-1 {
  background-color: #FF8CBD;
  background-image: url('../images/eye_pink.svg');
}
.eye.el-2 {
  background-color: #7A59A4;
  background-image: url('../images/eye_purple.svg');
}
.eye.el-3 {
  background-color: #FF4431;
  background-image: url('../images/eye_red.svg');
}
.eye.el-4 {
  background-color: #F7DE1C;
  background-image: url('../images/eye_yellow.svg');
}
.eye.el-5 {
  background-color: #01B37F;
  background-image: url('../images/eye_green.svg');
}
.eye.el-6 {
  background-color: #05C1F1;
  background-image: url('../images/eye_blue.svg');
}

/* ГЛАЗА СПРАВА */
.center-right-panel {
  position: absolute;
  top: 0;
  left: 50vw;
  width: 25vw;
  height: 400vh;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  animation: scrollEyesDown 8s linear infinite;
}

.center-left-panel:hover,
.center-right-panel:hover {
  animation-play-state: paused;
}

/* БЛОК С НОСАМИ */
@keyframes scrollNoses {
  0% {transform: translateX(0);}
  100% {transform: translateX(-200vw);}
}

.scroll-row {
  position: relative;
  width: 100vw;
  height: 25vw;
  overflow: hidden;
}

.noses-row {
  position: absolute;
  width: 400vw;
  height: 25vw;
  display: flex;
  box-sizing: border-box;
  width: fit-content;
  animation: scrollNoses 8s linear infinite;
}

.nose {
  width: 28vw;
  height: 100%;
  background-color: #FF8CBD;
  border: 5px solid black;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.nose.el-1 {
  background-color: #FF4431;
  background-image: url('../images/nose_yellow.svg');
}
.nose.el-2 {
  background-color: #FF8CBD;
  background-image: url('../images/nose_red.svg');
}
.nose.el-3 {
  background-color: #01B37F;
  background-image: url('../images/nose_pink_big.svg');
}
.nose.el-4 {
  background-color: #F7DE1C;
  background-image: url('../images/nose_green.svg');
}
.nose.el-5 {
  background-color: #05C1F1;
  background-image: url('../images/nose_purple.svg');
}
.nose.el-6 {
  background-color: #7A59A4;
  background-image: url('../images/nose_pink.svg');
}
.nose.el-7 {
  background-color: #FF4431;
  background-image: url('../images/nose_blue.svg');
}

.noses-row:hover {
  animation-play-state: paused;
}

/* РОТ И РУКИ */
.mouth-row {
  position: relative;
  width: 100vw;
  height: 28vw;
  z-index: 998;
  display: flex;
  overflow: hidden;
}

/* ОБЩИЙ КОНТЕЙНЕР РУКИ */
.left-hand,
.right-hand {
  width: 25vw;
  height: 28vw;
  border: 5px solid black;
  flex-shrink: 0;
  position: relative;
}

.right-hand {
  transform: scaleX(-1);
}

.hand-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
}

.left-hand .hand-1,
.right-hand .hand-1 {
  opacity: 1;
  background-color: #FF4431;
  background-image: url('../images/hand.svg');
  animation: hideAfter3s 4s infinite;
}

.left-hand .hand-2,
.right-hand .hand-2 {
  background-color: #F7DE1C;
  background-image: url('../images/paw_ogre.svg');
  animation: showFrom3to6s 4s infinite;
}

.left-hand .hand-3,
.right-hand .hand-3 {
  background-color: #01B37F;
  background-image: url('../images/paw_cats.svg');
  animation: showFrom6to9s 4s infinite;
}

@keyframes hideAfter3s {
  0%, 33.33% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

@keyframes showFrom3to6s {
  0%, 33.33% { opacity: 0; }
  33.34%, 66.66% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}

@keyframes showFrom6to9s {
  0%, 66.66% { opacity: 0; }
  66.67%, 100% { opacity: 1; }
}

/* РОТ */
.mouth {
  width: 50vw;
  height: 28vw;
  background-color: #F7DE1C;
  border: 5px solid black;
  flex-shrink: 0;
  background-image: url('../images/mouth_closed.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
}

.mouth:hover {
  background-image: url('../images/mouth_open.svg');
}

/* БОКС С ДЕТАЛЯМИ */
.details-row {
  width: 100vw;
  height: 37.5vmin;
  display: flex;
  z-index: 1000;
  position: relative;
}

/* СТИЛИ ДЛЯ ЯЧЕЕК */
.wings,
.tails,
.horns {
  height: 100%;
  flex-shrink: 0;
  width: 33.33vw;
  border: 5px solid black;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.3s ease;
}

/*  КРЫЛЬЯ */
.wings {
  background-color: #F7DE1C;
  background-image: url('../images/wing_pink.svg');
}

.wings:hover {
  background-color: #FF8CBD;
  background-image: url('../images/wing_yellow.svg');
  transform: scale(1.1);
}

/* ХВОСТЫ  */
.tails {
  left: 44vw;
  background-color: #01B37F;
  background-image: url('../images/tail_red.svg');
}

.tails:hover {
  background-color: #FF4431;
  background-image: url('../images/tail_green.svg');
  transform: scale(1.1);
}

/* РОГА */
.horns {
  left: 89vw;
  background-color: #7A59A4;
  background-image: url('../images/horns_yellow.svg');
}

.horns:hover {
  background-color: #F7DE1C;
  background-image: url('../images/horns_purple.svg');
  transform: scale(1.1);
}
/* ПОСЛЕДНИЙ БЛОК */
.final-bar {
  width: 100vw;
  height: 15vmin;
  border: 5px solid black;
  box-sizing: border-box;
  font-family: 'AlumniSans', sans-serif;
  font-weight: 500;
  font-size: 15vmin;
  color: white;
  display: flex;
  overflow: hidden;
  align-items: center;
  line-height: 1.2;
}

.final-bar.bottom {
  height: 7.5vmin;
  font-size: 6vmin;
  background-color: #2B50AA;
}

.final-bar.top { background-color: #FF4431; }
.final-bar.middle { background-color: #33BEFF; }

.marquee-wrapper {
  display: flex;
  white-space: nowrap;
  animation: marquee-left 6s linear infinite;
}

.marquee-wrapper.reverse {
  animation: marquee-right 3s linear infinite;
}

.marquee-wrapper span {
  padding: 0 2vw;
  flex-shrink: 0;
}

@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-16.66%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-16.66%); }
  100% { transform: translateX(0); }
}

/* ПРОСТРАНСТВО */
.final-large-box {
  width: 100vw;
  height: 57vmin;
  border: 5px solid black;
  box-sizing: border-box;
  background-image: url('../images/hall.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
/* КОНТЕЙНЕР ДЛЯ ФОТО */
.face-slideshow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vmin;
  height: 30vmin;
  z-index: 2;
}

/* СТИЛЬ ОДНОГО ФОТО */
.face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transition: transform 0.3s ease;
}

/* ФОТО ПО НОМЕРАМ */
.face1 { background-image: url('../images/face_1.svg'); }
.face2 { background-image: url('../images/face_2.svg'); }
.face3 { background-image: url('../images/face_3.svg'); }
.face4 { background-image: url('../images/face_4.svg'); }
.face5 { background-image: url('../images/face_5.svg'); }
.face6 { background-image: url('../images/face_6.svg'); }

.face1 { animation: showFace 6s linear infinite; }
.face2 { animation: showFace 6s linear infinite; animation-delay: -1s; }
.face3 { animation: showFace 6s linear infinite; animation-delay: -2s; }
.face4 { animation: showFace 6s linear infinite; animation-delay: -3s; }
.face5 { animation: showFace 6s linear infinite; animation-delay: -4s; }
.face6 { animation: showFace 6s linear infinite; animation-delay: -5s; }

@keyframes showFace {
  0%, 16.66% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

.final-large-box:hover .face {
  transform: rotate(360deg);
}

@media (max-width: 768px) {
  .face-layer {
    width: 100vw;
  }

  .ears-left, 
  .center-left-panel {
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
  }

  .center-left-panel {
    left: 25vw;
  }

  .ears-right,
  .center-right-panel {
    display: none;
  }

  /* РОТ И РУКИ: рот во всю ширину, руки под ним */
  .mouth-row {
    height: 56vw;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
  }

  .mouth {
    width: 100vw;
  }

  .left-hand {
    position: absolute;
    top: 28vw;
    left: 0;
    width: 50vw;
  }

  .right-hand {
    position: absolute;
    top: 28vw;
    right: 0;
    width: 50vw;
  }

  /* ОБВОДКА */
  .brow,  
  .ear, 
  .top-bar,  
  .bottom-bar,    
  .nose,   
  .mouth, 
  .eye,
  .left-hand,
  .right-hand,
  .wings,
  .tails,
  .horns,
  .final-bar,
  .final-large-box {border: 1px solid black;}

}