@import url('https://fonts.googleapis.com/css2?family=Andika&display=swap');
* {
  font-family: 'Andika', sans-serif;
}

/* SHAKE ANIMATION */
nav ul li:hover i {
  animation: Shake 1s linear infinite;
  animation-fill-mode: forwards;
}

#navbar-side {
  transition: 0.5s;
}

@keyframes Shake {
  0% {
      transform: rotate(10deg);
  }

  25% {
      transform: rotate(-4deg);
  }

  50% {
      transform: rotate(10deg);
  }

  75% {
      transform: rotate(-4deg);
  }

  100% {
      transform: rotate(10deg);
  }
}

#balls-container div {
  display: flex;
  justify-content: center
}

.ball {
  display: inline-block;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  border: 5px solid white;
  cursor: pointer;
  margin: 1vmin 1.5vmin;
  transition: all 0.2s;
  position: relative;
}

.ball:hover {
  border: 10px solid white;
  animation: kick 1s infinite cubic-bezier(0.31, 0.44, 0.44, 1.65);
}

@keyframes kick {
  0%, 100% { top: 0; transform: scaleY(1); }
  10% { top: 0; transform: scaleY(0.85); }
  50% { top: -1vmin; transform: scaleY(1); }
}

#pixel-art-container {
  --size: 4;
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  gap: 3;
  padding: 3px;
}

.pixel {
  cursor: url(images/cursor.cur), pointer;
  background-color: white;
  border: 1px solid black;
  transition: all 0.2s;
}

/* COLOR CODE */
.color-code {
  padding: 1rem;
  margin: 2rem;
  font-size: larger;
  text-align: center;
  border: 2px solid black;
  border-radius: 10%;
  cursor: pointer;
  height: fit-content;
  width: 150px;
  font-weight: bold;
}

#color-codes-container img {
  position: absolute;
  height: 200px;
}

p#multicolored-title {
  color: transparent;
  background: linear-gradient(
      #fd004c 16.7%,
      #fe9000 16.7%,
      #fff020 33.4%,
      #3edf4b 50.1%,
      #3363ff 66.8%,
      #b102b7 83.5%
  );
  -webkit-text-stroke: 0.04em #000000;
  -webkit-background-clip: text;
          background-clip: text;
  line-height: 1.1em;
  animation: rainbow 50s linear infinite;
}

@keyframes rainbow{
  100%{
      background-position: 0 30em;
  }
}

/* MEMORY CARD GAME */
.memory-card {
  width: 200px;
  height: 250px;
  margin: 5px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: .5s;
  background-color: white;
}

.memory-card img {
  width: 200px;
  height: 170px;
}

@media screen and (max-width: 1080px) {
  #memory-game {
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    perspective: 1000px;
  }
}

@media screen and (min-width: 1080px) {
  #memory-game {
    width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    perspective: 1000px;
    padding: 2rem;
  }
}

.front-face, .back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

.flip {
  transform: rotateY(180deg);
}

#congratulations {
  animation: congrats 0.8s linear 1;
}

@keyframes congrats {
  50%  {
    transform: scale(1.2);
  }
}

/* ANIMALS */
#animals img, #animals p {
  transition: 0.3s ease-in-out;
}

#animals img:hover {
  transform: scale(1.2); 
}

#animals img:hover ~ p {
  transform: scale(1.2); 
}

/* GEOMETRY */
#geometry-grid > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 130px;
  width: 150px;
}