index.scss

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #1d1c2d;
  font-family: "Hack Nerd Font", monospace;
  color: rgb(205, 214, 244);
}

.layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.main {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;

  .main-top-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 25%;
    .title {
      height: 20%;
      margin: auto;
      font-size: 5vh;
      display: flex;
      flex-direction: column;
    }
    .description {
      margin: auto;
      padding: 2%;
      text-align: center;
      border: 0.01vh solid #7f849c;
      font-size: 2vh;
    }
  }

  .gif {
    width: 100%;
    height: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      align: center;
      border: 0.01vh solid #7f849c;
      padding: 2%;
      max-width: calc(100% - 20px);
      max-height: calc(100% - 20px);
    }
  }

  .main-bottom-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 100%;
    height: 25%;

    .shortcut {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .input {
        display: flex;
        justify-content: center;
        height: 60%;
        width: 100%;
        .key {
          display: flex;
          justify-content: center;
          align-items: center;
          align-text: center;
          height: 50%;
          aspect-ratio: 1 / 1;
          font-size: 2vh;
          border: 0.01vh solid #cdd6f4;
          transition: all 0.2s ease-in-out, font-size 0s;
          background-color: rgba(205, 214, 244, 0.1);
        }
        .long {
          aspect-ratio: 2 / 1;
        }
        .correct-key {
          transform: scale(0.95);
          background-color: rgba(166, 227, 161, 0.1);
          border-color: rgb(166, 227, 161);
        }
        .wrong-key {
          background-color: rgba(243, 139, 168, 0.1);
          border-color: rgba(243, 139, 168);
          animation: shake 0.2s;
        }
        .solution-key {
          background-color: rgba(116, 199, 236, 0.1);
          border-color: rgb(137, 180, 250);
          color: #cdd6f4;
        }
        .plus {
          font-size: 5vh;
          margin: 0 2%;
        }
        .prefix {
          border: 0.01vh solid #7f849c;
          color: #7f849c;
          background-color: rgba(127, 132, 156, 0.1);
        }
      }
      .solution {
        height: 5%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-text: center;
        font-size: 1.5vh;
        div {
          border: 0.01vh solid #6c7086;
          user-select: none;
          padding: 1%;
          transition: all 0.1s ease-in-out, font-size 0s;
          background-color: rgb(69, 71, 90, 0.3);
          color: rgb(127, 132, 156);
        }
        .active {
          background-color: rgba(116, 199, 236, 0.1);
          border-color: rgba(137, 180, 250);
          transition: all 0.1s ease-in-out;
          transform: scale(1.2);
          color: #cdd6f4;
        }
        div:hover {
          background-color: rgba(116, 199, 236, 0.15);
          border-color: rgba(137, 180, 250);
          cursor: pointer;
          transition: all 0.1s ease-in-out;
          color: #bac2de;
        }
      }
    }

    .progress {
      height: 30%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      align-text: center;
      div {
        margin: 0 2%;
        height: 30%;
        aspect-ratio: 1 / 1;
        border: 0.01vh solid #7f849c;
        transition: all 0.1s ease-in-out;
        background-color: rgba(205, 214, 244, 0.1);
      }
      .played {
        transform: scale(0.95);
        background-color: rgba(166, 227, 161, 0.1);
        border-color: rgb(166, 227, 161);
      }
      .active {
        transform: scale(1.1);
        border-color: rgb(205, 214, 244);
        background-color: rgba(205, 214, 244, 0.3);
      }
    }
  }
}

.sidebox {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: auto;

  .categories {
    margin: 0 10%;
    user-select: none;
    padding: 2%;
    display: flex;
    flex-direction: column;
    .title {
      text-decoration: underline;
      padding-bottom: 1%;
      font-size: 1.5vh;
    }
    div {
      font-family: "Hack Nerd Font", monospace;
      font-size: 1.5vh;
      border: 0.01vh solid #7f849c;
      color: rgb(205, 214, 244);
      background: none;
      margin: 0;
      padding: 2%;
      transition: background-color 0.1s ease-in-out;
    }
    .inactive:hover {
      background-color: rgba(166, 227, 161, 0.1);
      color: #bac2de;
    }
    .active {
      background-color: rgba(166, 227, 161, 0.2);
    }
    .inactive {
      color: rgb(108, 112, 134);
      background-color: rgb(30, 30, 46);
    }
    .disabled {
      disabled: true;
      color: rgb(49, 50, 68);
      background-color: rgb(17, 17, 27);
    }
  }

  .help {
    margin: 0 10%;
    border: 0.01vh solid #7f849c;
    font-size: 1.5vh;
    padding: 2%;
    .command {
      text-decoration: underline;
      text-decoration-color: white;
    }
    .highlight {
      color: rgb(166, 227, 161);
    }
    .hide {
      color: rgb(110, 115, 141);
    }
  }
  a {
    font-size: 1.5vh;
    display: flex;
    margin: 2% auto 0 auto;
    padding: 2%;
    border: 0.01vh solid #7f849c;
    transition: all 0.1s ease-in-out, font-size 0s;
    color: inherit;
    text-decoration: none;
  }
  a:hover {
    background-color: rgba(116, 199, 236, 0.15);
    border-color: rgba(137, 180, 250);
    cursor: pointer;
    transition: all 0.1s ease-in-out, font-size 0s;
    color: #bac2de;
  }
  .playground-new {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
    border-color: #cba6f7;
    color: #bac2de;
  }
  .playground-new:hover {
    animation: none;
  }
}

.reset {
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-text: center;
  font-size: 2vh;
  div {
    border: 0.01vh solid #7f849c;
    padding: 2%;
    user-select: none;
  }
  div:hover {
    animation: shake 0.2s;
    animation-iteration-count: infinite;
    background-color: rgba(243, 139, 168, 0.1);
    border-color: rgba(243, 139, 168);
    cursor: pointer;
  }
}

.disabled-reset {
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-text: center;
  font-size: 2vh;
  div {
    border: 0.01vh solid #7f849c;
    padding: 2%;
    user-select: none;
    color: rgb(49, 50, 68);
    background-color: rgb(17, 17, 27);
  }
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}