* {
    box-sizing: border-box;
  }

body{
      /* a nice font that uses a user's built in font */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 0;
    margin: 0;
}

.heading{
    font-size: 25px;
    font-weight: 500;
    background-image: linear-gradient(to left, #a6aac3, #160136);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    border-bottom: 4px solid #49528b;
    margin: 20px auto;
}

.letter-input{
    border: 3.25px solid #5c649d;
    border-radius: 8px;
    width: 60px;
    height: 60px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: center;
    font-size: 40px;
    color: #5c6499;
}


.correct{
  color: white;
  background-color: darkgreen;
}

.incorrect{
  color: white;
  background-color: rgb(144, 144, 144);
}

.close{
  color: white;
  background-color: rgba(255, 166, 0, 0.894);
}

.box-layout{
  grid-template-columns:20% 20% 20% 20% 20%;
  display: grid;
  padding: 25px;
  row-gap: 5.5px;
  column-gap: 0.5px;
  max-width: 375px;
  width: 100%;
  margin: 27px auto;
  place-items: center; 
}


.spinning-bar {
  animation: spin 0.55s infinite linear;
  font-size: 45px;
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(300deg);
  }
}

.hidden{
  visibility: hidden;
}

.loading{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flashes red border and then fades back to gray */
@keyframes flash {
  5% {
    border-color: rgb(244, 2, 2);
  }

  100% {
    border-color: solid #5c649d;
  }
}


/* @-webkit-keyframes flash {
  from { opacity: 1.0; }
  to { opacity: 0.5; }
} */

.invalidWord {
  animation: flash 2.5s;
}

@keyframes rainbow {
  100%,
  0% {
    color: rgb(255, 0, 0);
  }
  8% {
    color: rgb(255, 127, 0);
  }
  16% {
    color: rgb(255, 255, 0);
  }
  25% {
    color: rgb(127, 255, 0);
  }
  33% {
    color: rgb(0, 255, 0);
  }
  41% {
    color: rgb(0, 255, 127);
  }
  50% {
    color: rgb(0, 255, 255);
  }
  58% {
    color: rgb(0, 127, 255);
  }
  66% {
    color: rgb(0, 0, 255);
  }
  75% {
    color: rgb(127, 0, 255);
  }
  83% {
    color: rgb(255, 0, 255);
  }
  91% {
    color: rgb(255, 0, 127);
  }
}

.winning {
  animation: rainbow 4s infinite linear;
  font-size: 50px;
}