@font-face {
    font-family: 'Trocadero';
    src: url('../Trocader.ttf') format('tff'); 
}
.game-card{
    text-align: center;

}


input {
    font-size: 18px;
    padding: 8px;
    width:140px;
    margin: 8px;
    text-transform: capitalize;
}
#message-text{
    font-size: 18px;
font-weight: bold;
}

table{
    width: 100%;
    margin-top: 12px;
    font-weight: bold;

}

th {
    color: white;

}
td, th {
    border:1px none white;
    padding: 10px;
    text-align: center;
}
.guess-field{
    font-weight: bold;

}



@keyframes shake {
    0% { left: -5px; }
    100% { right: -5px; }
}
.correct,
.correct-demo{
    background-color: green;

}


.close,
.close-demo{
    background-color: yellow;
}
.wrong,
.wrong-demo{
    background-color: gray;
}
.special,
.special-demo{
    background: linear-gradient(132deg, rgb(30, 144, 255) 0.00%, rgb(138, 43, 226) 100.00%);
}

.letter-box{
    display: inline-block;
    color: black;
    border-radius: 10px;
    width: 20px;
    padding: 8px 11px;
    margin: 2px;
    font-size: 30px;
    font-weight: bold;
}

#guess-history-card{
border: 0px
}
#yay-text{
    Position: absolute;
    background: linear-gradient(to right, #3d1560, #22065a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: 'Trocadero', sans-serif;
    font-size: 50px;
    font-weight: bold;
}