body {
  font-family: system-ui, sans-serif;
  background-color: var(--background);
  color: var(--f_high);
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  transition-duration: 300ms;
  height: 100vh;
  display: grid;
  place-items: center;

  &>div {
    width: 15vw;
    transition: opacity cubic-bezier(0, 0.55, 0.45, 1) 300ms;

    &>h1 {
      text-align: center;
      margin-bottom: 1rem;
      font-size: large;
    }

    &>#progress-bar {
      width: 10%;
      border-bottom: 2px var(--f_high) solid;
      border-radius: 5px;

      transition: width cubic-bezier(0, 0.55, 0.45, 1) 300ms;
    }
  }

  &>main {
    &>figure {
      width: 25vw;
      aspect-ratio: 1/1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));

      &>div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &>h3 {
          text-align: center;
          margin-bottom: 0.25rem;
        }
      }

      &>.b_high {
        background-color: var(--b_high);
      }

      &>.b_med {
        background-color: var(--b_med);
      }

      &>.b_low {
        background-color: var(--b_low);
      }

      &>.f_high {
        color: var(--f_high);
      }

      &>.f_med {
        color: var(--f_med);
      }

      &>.f_low {
        color: var(--f_low);
      }
    }

    &>section {
      margin-top: 1.5rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      &>span {
        text-align: center;

        &>h3 {
          font-weight: bold;
        }
      }
    }
  }
}