.wrapper {
  width: 100%;
  height: 100vh;
}

.app {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  inset: 0;
  overflow: hidden;
}

.app__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.app__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.logo__container {
  width: 13vw;
  height: 10vh;
  background: url("../assets/images/logo.webp") center / contain no-repeat;
  position: absolute;
  top: 2%;
  left: 1%;
}

.skip__btn_contain {
  width: 17vw;
  height: 10vh;
  background: url("../assets/images/skip_btn.webp") center / contain no-repeat;
  position: absolute;
  bottom: 1%;
  right: 0;
}

.title__container {
  width: 50%;
  height: 26vh;
  background: url("../assets/images/title.webp") center / contain no-repeat;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
}

.play__btn_container {
  position: absolute;
  bottom: 27%;
  left: 50%;
  transform: translateX(-50%);
  animation: pulse 1.2s ease-in-out infinite;
}

.play__btn {
  width: 24vw;
  height: 13vh;
  background: url("../assets/images/play_btn.webp") center / contain no-repeat;
  position: relative;
}

.newGame__btn {
  width: 13vw;
  height: 5vh;
  background: url("../assets/images/NG_btn.webp") center / contain no-repeat;
  position: absolute;
  top: -13%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes pulse {
  from {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1);
  }
  to {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}