word-masters.css

* {
    box-sizing: border-box;
  }

  body {
    margin:0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: "Courier New", Courier, monospace;
  }

 .title {
    border-bottom: 2px solid black;
    font-weight: bold;
    font-size: 45px;
    text-align: center;
    padding: 15px;
    margin-bottom: 0;
  }

  /* animação do emoji em spin*/

  .waiting-emoji {
    animation: spin 1s linear infinite ;
    font-size: 40px;
    text-align: center;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* este hidden é uma classe que, mais tarde, podemos aplicar ao nosso html. Isto é algo que podes fazer em todo o lado 
   e que te permite poupar trabalho e confusão no  css + html */

  
  .separation-bar {
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .show {
    visibility: visible;
  } 
 
  .gameboard {
    display: grid;
    max-width: 195px;
    width: 100%;
    margin: 10px auto; /* isto fez com que tudo ficasse alinhado ao centro (LOLOLOL) */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
    justify-content: center;
  }
    
 .scoreboard-letter {
      border: 3px solid #aaa;
      background-color: #eee;
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      float: inline-start;
      font-weight: 10px;
      text-transform: uppercase;      
    }

    /* classes que vamos precisar para tratar em JavaScript?  */

    .correct {
      background-color: green;
      color: white;
    }
    
    .close {
      background-color: darkgoldenrod;
      color: white; 
    }

    .wrong {
      background-color: #888;
      color: white;
    }

    .invalid {
      animation: flash 1s;
    }
    
    /* wrong letter animation? */

    @keyframes flash {
      5% {
        border-color: crimson;
      }
    
      100% {
        border-color: #ccc;
      }
    }

    /* winner animation */

    @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);
        }
      }
      
      .winner {
        animation: rainbow 4s infinite linear;
      }