html,body {font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; line-height: 1.5; cursor: url("assets/paw.png"), pointer;}
body {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover; padding: 2rem;}
.container {width: 100%;height: 100%; padding-left: 15px; padding-right: 16px; margin-right: auto; margin-left: auto;}  
.links-container {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;}
.lil-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:inherit;white-space:nowrap}
h1{font-size:36px;}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.silly-head {width: fit-content; height: fit-content; transition: width 2s, height 2s, transform 2s; position:relative ; justify-self: center;}
.silly-head:hover {transform: rotate(180deg);}
.white,.hover-white:hover{color:#000!important;background-color:#fff!important}
.purple,.hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}

  .key {
    font-size: 4vw;
    display: inline-block;
    letter-spacing: -1vw;
    transition: transform 0.2s;
  }
  
  
  @keyframes pressDown1 {
    30%,
    40%,
    100% {
      transform: translateY(0);
    }
    35% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown2 {
    70%,
    80%,
    100% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown3 {
    30%,
    40%,
    100% {
      transform: translateY(0);
    }
    35% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown4 {
    40%,
    50%,
    100% {
      transform: translateY(0);
    }
    45% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown5 {
    20%,
    30%,
    100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown6 {
    60%,
    70%,
    100% {
      transform: translateY(0);
    }
    65% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown7 {
    10%,
    20%,
    100% {
      transform: translateY(0);
    }
    15% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown8 {
    35%,
    45%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(10px);
    }
  }
  
  
  
  .key:nth-child(1) {
    animation: pressDown1 2s infinite;
  }
  
  .key:nth-child(2) {
    animation: pressDown2 3s infinite;
  }
  
  .key:nth-child(3) {
    animation: pressDown3 4s infinite;
  }
  
  .key:nth-child(4) {
    animation: pressDown4 2.5s infinite;
  }
  
  .key:nth-child(5) {
    animation: pressDown5 2.5s infinite;
  }
  
  .key:nth-child(6) {
    animation: pressDown6 3.5s infinite;
  }
  
  .key:nth-child(7) {
    animation: pressDown7 2.2s infinite;
  }
  
  .key:nth-child(8) {
    animation: pressDown8 3.2s infinite;
  }
  
  /* extra stuff */
  .jux-linx {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
  a {
    text-decoration: none;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    padding: 5px 10px;
    transition: 0.1s all ease-in;
  }
  
  a:nth-child(1):hover {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 2px 0 #349eff;
  }
  
  a:nth-child(2):hover {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 2px 0 #ff5757;
  }


  body {
  background-color: #def;
  background-image: radial-gradient(transparent 0.6em, #def 0.6em), conic-gradient(at 1em 1em, transparent 270deg, #4203 270deg), conic-gradient(at 1em 1em, transparent 270deg, rgba(180, 101, 21, 0.267) 270deg), conic-gradient(at 1em 1em, transparent 270deg, #4205 270deg), conic-gradient(at 1em 1em, transparent 270deg, #4206 270deg);
  background-size: 1em 1em, 4em 4em, 4em 4em, 4em 4em, 4em 4em;
  -webkit-animation: bpx 12s infinite, bpy 12s -3.75s infinite;
          animation: bpx 12s infinite, bpy 12s -3.75s infinite;
}
@-webkit-keyframes bpx {
  0%, 7.5%, 100% {
    background-position-x: 0, 0, 1em, 2em, 3em;
  }
  12.5%, 20% {
    background-position-x: 0, 1em, 0, 3em, 2em;
  }
  25%, 32.5% {
    background-position-x: 0, -1em, -2em, 5em, 4em;
  }
  37.5%, 45% {
    background-position-x: 0, 1em, -4em, 7em, 2em;
  }
  50%, 57.5% {
    background-position-x: 0, -2em, -5em, 8em, 5em;
  }
  62.5%, 70% {
    background-position-x: 0, -3em, -4em, 7em, 6em;
  }
  75%, 82.5% {
    background-position-x: 0, -1em, -2em, 5em, 4em;
  }
  87.5%, 95% {
    background-position-x: 0, -3em, 0, 3em, 6em;
  }
}
@keyframes bpx {
  0%, 7.5%, 100% {
    background-position-x: 0, 0, 1em, 2em, 3em;
  }
  12.5%, 20% {
    background-position-x: 0, 1em, 0, 3em, 2em;
  }
  25%, 32.5% {
    background-position-x: 0, -1em, -2em, 5em, 4em;
  }
  37.5%, 45% {
    background-position-x: 0, 1em, -4em, 7em, 2em;
  }
  50%, 57.5% {
    background-position-x: 0, -2em, -5em, 8em, 5em;
  }
  62.5%, 70% {
    background-position-x: 0, -3em, -4em, 7em, 6em;
  }
  75%, 82.5% {
    background-position-x: 0, -1em, -2em, 5em, 4em;
  }
  87.5%, 95% {
    background-position-x: 0, -3em, 0, 3em, 6em;
  }
}
@-webkit-keyframes bpy {
  0%, 7.5%, 100% {
    background-position-y: 0, 0, 1em, 2em, 3em;
  }
  12.5%, 20% {
    background-position-y: 0, 1em, 0, 3em, 2em;
  }
  25%, 32.5% {
    background-position-y: 0, -1em, -2em, 5em, 4em;
  }
  37.5%, 45% {
    background-position-y: 0, 1em, -4em, 7em, 2em;
  }
  50%, 57.5% {
    background-position-y: 0, -2em, -5em, 8em, 5em;
  }
  62.5%, 70% {
    background-position-y: 0, -3em, -4em, 7em, 6em;
  }
  75%, 82.5% {
    background-position-y: 0, -1em, -2em, 5em, 4em;
  }
  87.5%, 95% {
    background-position-y: 0, -3em, 0, 3em, 6em;
  }
}
@keyframes bpy {
  0%, 7.5%, 100% {
    background-position-y: 0, 0, 1em, 2em, 3em;
  }
  12.5%, 20% {
    background-position-y: 0, 1em, 0, 3em, 2em;
  }
  25%, 32.5% {
    background-position-y: 0, -1em, -2em, 5em, 4em;
  }
  37.5%, 45% {
    background-position-y: 0, 1em, -4em, 7em, 2em;
  }
  50%, 57.5% {
    background-position-y: 0, -2em, -5em, 8em, 5em;
  }
  62.5%, 70% {
    background-position-y: 0, -3em, -4em, 7em, 6em;
  }
  75%, 82.5% {
    background-position-y: 0, -1em, -2em, 5em, 4em;
  }
  87.5%, 95% {
    background-position-y: 0, -3em, 0, 3em, 6em;
  }
}