/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." 
   rgb(97, 175, 206) 0%, rgb(251, 220, 255) 70%)*/

   * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
   }

body, html {
  height: 100%;
  overflow: hidden;
}

body {
  background-image: linear-gradient(to bottom right, rgb(102, 185, 211) 0%, rgb(251, 220, 255) 70%);
  background-repeat: no-repeat;
  background-size: 100vw;
  
  color: black;
  font-family: "Kalnia", serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-bottom: 20px;
}

h1 {
  z-index: 1;
  margin-top: 50px;
  margin-left: 25px;
  color: rgb(255, 255, 255);
  transform-origin: top left;
  padding: 30px 30px;
  text-align: left;
  rotate: -18deg;
  transform: skew(-25deg, 0deg);
  font-size: 64px;
  font-weight: 550;
  pointer-events: auto;
}

h1:hover {
  color: rgb(231, 153, 153);
}

.welcome {
  border-style:dashed;
  width: 30%;
  height: 25%;
  overflow: auto;
  font-family: "Crimson Pro", serif;
  z-index: 10;
  position: absolute;
  top: 60%;
  color: rgb(255, 255, 255);
  transform-origin: top left;
  text-align: center;
  padding: 10px 20px;
  margin-left: 90%;
  margin-top: -20%;
  rotate: -18deg;
  transform: skew(-25deg, 0deg);
  font-size: 1.3vw;
  font-weight: 500;
  background-color: rgba(216, 98, 98, 0.5);

}

.notice {
  width: 60%;
  font-family: "Crimson Pro", serif;
  z-index: 10;
  position: absolute;
  top: 50%;
  color: rgb(0, 0, 0);
  transform-origin: top left;
  text-align: left;
  padding: 10px 20px;
  margin-left: 71%;
  margin-top: 12%;
  rotate: -19deg;
  transform: skew(40deg, 0deg);
  font-size: 1vw;
  letter-spacing: 2px;
  font-weight: 550;
}

p {
  display: none;
  z-index: 10;
  position: absolute;
  top: 80%;
  color: white;
  transform-origin: top left;
  text-align: left;
  padding: 10px 20px;
  margin-left: 10%;
  rotate: -18deg;
  transform: skew(-25deg, 0deg);
  font-size: 100%;
  font-weight: 500;
  background-color: rgba(255, 100, 80, 0.8);
  border-radius: 30%
}

.card {
  position: absolute;
  width: 80vw;
  aspect-ratio: 16/9;
  overflow: none;
}

.pikachu-sprite {
  position: absolute;
  left: -5%;
  width: 50%;
  aspect-ratio: 1 / 1;
}

.pikachu-sprite img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 80vw;
  height: auto;
  pointer-events: none;
}

.square {
  transform-origin: top left;
  position: absolute;
  top: 130%;
  left: -30%;
  background-color: rgb(255, 255, 255);
  width: 150vw;
  height: 100vh;
  z-index: 2;
  rotate: -18deg;
  
}

.left-arm {
  z-index: 4;
  transform-origin: top left;
  animation: wave-less 0.8s ease-in-out infinite alternate;
}

.left-ear {
  z-index: 2;
  transform-origin: top middle;
  animation: wave-medium 0.9s ease-in-out infinite alternate;
}

.right-arm{
  z-index: 3;
  transform-origin: top left;
  animation: wave-less 1.2s ease-in-out infinite alternate;
}

.right-ear {
  z-index: 3;
  transform-origin: top middle;
  animation: wave-little-more 0.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.right-ear-clickbox {
  position: absolute;
  width: 40%;
  height: 15%;
  margin-top: 46%;
  margin-left: 150%;
  rotate: 25deg;
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;

}

.right-ear.clicked {
  transform-origin: top middle;
  animation: ear-click 0.4s ease-in-out reverse;
}

.carousel {
  z-index: 2;
  position: absolute;
  margin-top: 23%;
  rotate: -18deg;
  transform: skew(40deg, 0deg);
  height: 20%;
  width: 200%;
  display: flex;
  overflow-x: auto;
}

.carousel::-webkit-scrollbar, .scrollable-list::-webkit-scrollbar {
  display:none;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: spin 8s infinite linear;
  padding-right: 5px;
}

.button {
  flex: 0 0 100px;
  width: 90%;
  height: auto;
  padding: 5px;
}

@keyframes spin {
  from {translate: 0;}
  to {translate: -100%;}
}

@keyframes ear-click {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: translateY(-18px) translateX(-15px) rotate(3deg);
  }
  60% {
    transform: translateY(-7px) translateX(-8px) rotate(6deg);
  }
  80% {
    transform: translateY(-7px) translateX(-8px) rotate(6deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

.head {
  z-index: 3;
  transform-origin: top middle;
  animation: wave-less 0.6s ease-in-out infinite alternate;
}

.body {
  z-index: 2;
  transform-origin: top middle;
  animation: wave-less 0.9s ease-in-out infinite alternate;
}


.tail {
  z-index: 7;
  transform-origin: top middle;
  animation: wave-more 0.9s ease-in-out infinite alternate;
}

ul {
  list-style-type: none;
  z-index: 5;
  position: absolute;
  align-items: center;
  text-align: left;
  top: 60%;
  left: 235%;
  transform-origin: top left;
  rotate: 70deg;
  font-size: 4.5vw;
  transform: skew(0deg, -30deg);
  
}

ul li{
  margin-top: 20px;
  align-items: center;
  gap: 10px;
}

ul li a {
  display: inline-block;
  text-decoration: none;
  color: black;
  letter-spacing: -2px;
  font-weight: 500;
  padding: 5px 10px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease;

}

ul li a:hover {
  color:white;
  background-color: rgb(255, 132, 101);
  animation: disp 1s ease-in-out infinite alternate;
}

ul li img {
  width: 20px;
  height: auto;
  margin-left: 10px;
}

.scrollable-list {
  z-index: 2;
  direction: rtl;
  height: 130%;
  overflow-y: auto;
  padding-right: 20px;
}

.sleeve {
  direction:ltr;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #afdbff;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #afd3fc;
}


.in-progress {
  color: rgb(247, 109, 109);
}
/* rgb(255, 205, 69)
*/

@keyframes disp {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 80%;
  }
} 


@keyframes wave-medium {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0.4deg);
  }
}

@keyframes wave-less {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0.2deg);
  }
}

@keyframes wave-little-more {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0.8deg);
  }
}

@keyframes wave-more {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1.5deg);
  }
}

@keyframes wave-ear {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(20deg);
  }
}