@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,300&display=swap');

body {
    background: #0B132B;
    font-family: 'Kanit', sans-serif;
}

.leedle_header {
    width: 100%;
    text-align: center;
    color: #3A506B;
    border-bottom: 1px solid #3A506B;
}

.leedle_grid_container {
    display: grid;
    grid-template-columns: repeat(5, 75px);
    grid-template-rows: repeat(6, 75px);
    grid-gap: 5px;

    width: 100%;
    text-align: center;
    padding-top: 100px;
    justify-content: center;
}

.leedle_grid_container div {
    border: 1px solid #3A506B;
    font-size: 30px;
    color: #3A506B;
}

.leedle_letter_container {
    padding-top: 100px;
}

.leedle_letter_top, .leedle_letter_mid, .leedle_letter_bot {
    display: flex;
    width: 100%;
    justify-content: center;
}

.keyboard-button {
    width: 75px;
    height: 75px;
    margin: 5px;
    background-color:#0B132B;
    color: #3A506B;

    font-size: 30px;
    font-family: 'Kanit', sans-serif;
}

.letter {
    border: 1px solid black;
}

.correct {
    background-color: green;
}

.correct_letter {
    background-color: #E4DA1B;
}

.incorrect {
    background-color: #1C2541;
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
  
/* ----------------------------------------------
 * Generated by Animista on 2022-5-3 16:18:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }