@keyframes slideInFromLeft {
  0% {
    top: 50%;
    transform: translate(-200%, -50%) rotate(180deg);
  }
  3% {
    top: 50%;
    transform: translate(-200%, -50%) rotate(180deg);
  }
  100% {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) scale(1.5)
  }
}

:root{
  --hover_animation_len: 0.4s;
  --press_animation_len: 1s;
}

body{
  background-color: black; 
  overflow:hidden;
}

.back_side{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate3d(0, 1, 0, 180deg);
}

.zhadan_title{
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
}

.zhadan_text{
  position: absolute;
  top: 40%;
  left: 50%;
  width: 35%;
  transform: translateX(-50%);
  font-size: 5px;
}

.UFOP_title{
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
}

.UFOP_text{
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4.5px;
}

.cpp_title{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7.2px;
}

.cpp_text{
  position: absolute;
  top: 28%;
  left: 50%;
  width: 70%;
  transform: translateX(-50%) scale(0.9);
  font-size: 5px;
}

.citadel_title{
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
}

.citadel_text{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 58%;
  transform: translateX(-50%) scale(0.8);
  font-size: 5px;
}

.mono_lisa_title{
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
}

.mono_lisa_text{
  position: absolute;
  top: 14%;
  left: 50%;
  width: 80%;
  transform: translateX(-50%) scale(0.8);
  font-size: 6px;
}

.ioi23_title{
  position: absolute;
  top: 35%;
  left: 45%;
  width: 90%;
  transform: translateX(-50%);
  font-size: 6px;
}

.ioi23_text{
  position: absolute;
  top: 41.5%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%) scale(0.8);
  font-size: 6px;
}

.zhadan{
  width: 37%;
  top: 1.2%;
  left: 24%;
  position: absolute;
}

.UFOP{
  width: 29%;
  top: 6.8%;
  left: 65.5%;
  opacity: 70%;
  position: absolute;
}

.cpp{
  width: 17%;
  top: 48.5%;
  left: 60.5%;
  opacity: 70%;
  position: absolute;
}

.bBb{
  width: 23%;
  top: 61%;
  left: 74.5%;
  opacity: 70%;
  position: absolute;
}

.citadel{
  width: 25%;
  top: 76.8%;
  left: 7%;
  opacity: 70%;
  position: absolute;
}

.mono_lisa{
  width: 16%;
  top: 41%;
  left: 22.5%;
  opacity: 70%;
  position: absolute;
}

.ioi23{
  width: 21.8%;
  top: 14%;
  left: 2.7%;
  position: absolute;
}

.sticker{
  transition-property: filter, transform;
  transition-duration: calc(var(--press_animation_len) / 2),
                       var(--hover_animation_len);
  transition-timing-function: steps(1), cubic-bezier(.5, 0, .5, 1);
  opacity: 100%;
  color: white;
}

.sticker_par{
  opacity: 100%;
  z-index: 1;
  transition-property: transform, top, left, z-index;
  transition-duration: var(--press_animation_len);
  transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}

.sticker_par_unstick{
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%) scale(4)
    rotate3d(0, 1, 0, 180deg);
}

.sticker_par_unstick img:first-child{
  filter: contrast(0.05) brightness(1.7);
}

.sticker:hover{
  transform: scale(1.25);
}

.back_panel{
  animation: 2.6s cubic-bezier(0.20, 1, 0.22, 1) 0s 1 slideInFromLeft;
  top: 50%;
  left: 50%;
  width: 529.5px;
  height: 370.906px;
  position: absolute;
  transform: translate(-50%, -50%) scale(1.5);
}

.back_panel img:nth-child(2){
  width: 0%;
  height: 0%;
  opacity: 0%;
}

.back_panel img:nth-child(1){
  height: 100%;
  width: 100%;
  opacity: 100%;
}