.vote-container {
  max-width: 1500px;
  margin-inline: auto;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vote-container h2 {
  text-align: center;
  width: 80%;
  color: #0ac6ff;
  font-size: 3.5rem;
  font-weight: 600;
  z-index: 2;
}

.vote-container h2 img {
  width: 90px;
  height: 90px;
  margin-bottom: -20px;
}

.text-animation-effect {
  color: transparent;
  text-transform: uppercase;
  background: linear-gradient(silver 30%, white, #0ac6ff 60%, silver 100%);
  background-size: contain;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px silver;
  filter: drop-shadow(5px 5px 1px black) drop-shadow(1px 1px 1px grey);
}

.vote-box {
  margin-top: 30px;
  margin-bottom: 10px;
  width: 70%;
  height: 320px;
  border: 1px solid white;
  background-color: #141414;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1;
}

.vote-box button {
  width: 80%;
  height: 120px;
  border: none;
  border-radius: 12px;
}

.vote-box button img {
  width: 20%;
}

.slide-out-up {
  animation-name: slideOutUp;
  animation-duration: 1.3s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

@keyframes slideOutUp {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(0, -100%, 0);
    visibility: hidden;
  }
}

.hinge {
  animation-name: hinge;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    opacity: 1;
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 700px, 0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
}

.vote-box button:hover {
  cursor: pointer;
}

.vote-box p {
  color: #0ac6ff;
  font-size: 3rem;
  margin-bottom: 30px;
}

.thumbs-up-box,
.thumbs-down-box {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.thumbs-up-box button {
  background-color: #006d8f;
}

.thumbs-down-box button {
  background-color: #a40000;
}

.star-effect-box {
  z-index: 0;
  position: relative;
  bottom: -18%;
  height: 1px;
  width: 1px;
  background-color: black;
  border-radius: 50%;
  box-shadow: -24vw -44vh 2px 2px #fff, 38vw -4vh 0px 0px #fff,
    -20vw -48vh 1px 2px #fff, -39vw 38vh 3px 1px #fff, -42vw -11vh 0px 3px #fff,
    12vw 15vh 3px 3px #fff, 42vw 6vh 3px 2px #fff, -8vw 9vh 0px 2px #fff,
    34vw -38vh 1px 0px #fff, -17vw 45vh 3px 1px #fff, 22vw -36vh 3px 2px #fff,
    -42vw 1vh 1px 0px #fff, 10vw 30vh 2px 3px #fff, -30vw -20vh 1px 0px #fff,
    45vw 10vh 1px 2px #fff, -27vw 14vh 1px 1px #fff, -11vw 31vh 3px 0px #fff,
    -41vw 16vh 3px 3px #fff, -36vw 37vh 3px 2px #fff, 22vw -22vh 3px 0px #fff,
    -29vw -4vh 3px 1px #fff, -39vw 18vh 3px 2px #fff, -47vw 32vh 1px 2px #fff,
    -12vw -6vh 0px 2px #fff, 18vw -34vh 2px 0px #fff, -32vw -46vh 2px 2px #fff,
    -17vw 3vh 1px 3px #fff, 50vw -2vh 3px 3px #fff, 1vw 14vh 2px 0px #fff,
    41vw 43vh 1px 0px #fff, -49vw 50vh 3px 3px #fff, -40vw -29vh 1px 2px #fff,
    6vw -19vh 1px 2px #fff, -1vw -21vh 1px 0px #fff, 37vw -21vh 0px 1px #fff,
    -46vw 4vh 0px 1px #fff, 15vw -13vh 3px 2px #fff, -22vw 26vh 3px 2px #fff,
    44vw 23vh 2px 3px #fff, -3vw -24vh 1px 0px #fff, 25vw 41vh 0px 2px #fff,
    40vw 42vh 3px 1px #fff, -24vw -19vh 0px 3px #fff, 28vw -12vh 1px 1px #fff,
    -38vw -3vh 3px 0px #fff, 30vw 23vh 0px 2px #fff, -12vw 28vh 3px 3px #fff,
    45vw 27vh 2px 0px #fff, 38vw 22vh 0px 0px #fff, -33vw 31vh 3px 1px #fff,
    -4vw -27vh 3px 1px #fff, -31vw -23vh 0px 1px #fff, -14vw 1vh 2px 1px #fff,
    -26vw 36vh 3px 3px #fff, -32vw -4vh 1px 1px #fff, 48vw -39vh 3px 1px #fff,
    4vw 8vh 3px 2px #fff, 42vw 12vh 2px 0px #fff, -27vw 23vh 2px 1px #fff,
    -15vw -22vh 0px 0px #fff, 7vw -21vh 1px 1px #fff, 33vw -17vh 1px 3px #fff,
    46vw 16vh 0px 1px #fff, 19vw -27vh 3px 1px #fff, 43vw 50vh 1px 3px #fff,
    6vw -14vh 3px 1px #fff, 26vw 29vh 3px 1px #fff, 43vw 48vh 1px 0px #fff,
    33vw -25vh 1px 2px #fff, 47vw -33vh 3px 3px #fff, -45vw 9vh 3px 2px #fff,
    21vw 7vh 2px 1px #fff, 25vw -25vh 0px 1px #fff, -31vw 32vh 1px 0px #fff,
    -3vw 16vh 0px 1px #fff, -4vw -50vh 0px 3px #fff, -28vw 3vh 0px 0px #fff,
    -34vw 10vh 1px 2px #fff, -41vw 20vh 2px 3px #fff, 18vw -8vh 1px 2px #fff,
    -33vw -50vh 1px 2px #fff, -14vw 20vh 0px 0px #fff, 16vw 42vh 2px 0px #fff,
    23vw -44vh 2px 3px #fff, 49vw -1vh 2px 1px #fff, -43vw -31vh 0px 3px #fff,
    -46vw 48vh 1px 3px #fff, -50vw -12vh 3px 3px #fff, -19vw 42vh 3px 2px #fff,
    -14vw 18vh 2px 3px #fff, -15vw 18vh 3px 2px #fff, -32vw 22vh 2px 3px #fff,
    21vw -29vh 0px 3px #fff, 17vw 35vh 1px 3px #fff, -2vw 26vh 2px 1px #fff,
    13vw -10vh 1px 3px #fff, 42vw 11vh 0px 0px #fff, -3vw 4vh 0px 1px #fff,
    -13vw -31vh 1px 3px #fff, -45vw -34vh 0px 2px #fff, -43vw -3vh 0px 0px #fff,
    13vw -33vh 2px 3px #fff, -18vw -4vh 1px 0px #fff, 6vw 1vh 1px 0px #fff,
    -11vw 19vh 0px 0px #fff, -49vw 38vh 2px 2px #fff, -23vw -5vh 3px 2px #fff,
    -37vw -6vh 2px 2px #fff, -48vw -29vh 0px 2px #fff, 10vw 1vh 2px 1px #fff,
    14vw 42vh 0px 3px #fff, -24vw -20vh 3px 3px #fff, -29vw -47vh 2px 0px #fff,
    -25vw 48vh 1px 1px #fff;

  animation: zoom 4s alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(0.9);
  }
}

@media (max-width: 834px) {
  .vote-container h2 {
    font-size: 2.6rem;
  }

  .vote-box {
    width: 80%;
    flex-direction: column;
    height: 500px;
  }

  .vote-box button {
    width: 60%;
    height: 100px;
  }

  .bottom-side-text {
    display: none;
  }
}

@media (max-width: 510px) {
  .vote-container h2 {
    font-size: 1.7rem;
  }
}

@media (max-width: 393px) {
  .vote-container {
    justify-content: flex-end;
    height: 650px;
  }
  .vote-container h2 {
    font-size: 1.5rem;
  }

  .vote-container h2 img {
    width: 50px;
    height: 50px;
  }

  .vote-box {
    margin-bottom: 50px;
    height: 430px;
  }
  .vote-box p {
    margin: 0;
    padding: 10px;
  }

  .vote-box button {
    width: 90%;
    height: 80px;
  }

  .thumbs-up-box {
    margin-bottom: -50px;
  }

  .star-effect-box {
    bottom: -30%;
  }
}