:root{
    --light-text : #ffbc1f;;
    --dark-text:#000000;
    --green: #adff2f;
    --yellow: #e8c330;
    --red: #ff2244;

    --soul-purple: rgb(196 67 210);
    --soul-yellow: rgb(255 255 84);
    --soul-blue: rgb(22 59 245);
    --soul-green: rgb(86 189 55);
    --soul-light-blue: rgb(146 250 252);
    --soul-orange: rgb(232 168 67);

    --standard-font-size: 2rem;
}

@font-face {
    font-family: monogram;
    src: url(monogram-extended.ttf);
}


body{
    font-size: var(--standard-font-size);
    color: var(--light-text);

    background-image: url(imgs/epicBackground-01.png);
    font-family: monogram, 'Courier New', Courier, monospace;
    background-attachment: fixed;

    line-height: 2rem;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    margin-top: 2px;
    margin-bottom: 0px;
}

p{
    margin-top: 5px;
    margin-bottom: 5px;
}

.correct{
    background-color: var(--green);
    color: var(--dark-text);
}
.warn {
    background-color: var(--yellow);
    color: var(--dark-text);
}

.wrong {
    background-color: var(--red);
    color: #ffffff;
}

.guessItem{
    text-align: center;
    height: 3rem;
}

.suggestionsHolder{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.suggestion[hiddenFromSearch="true"]{
    display: none;
}

.suggestion{
    width: 100%;
    padding: 10px;
}

@media (min-width : 10in) { /* If larger than 10 in... */
    .gameBody{
        display: grid;
        grid-template-areas: 
        "header header header"
        "submit submit game"
        "sugestions sugestions game"
        "blerb blerb blerb";

        grid-template-rows: min-content min-content 4in min-content;
        grid-template-columns: 0.25fr 0.25fr 1fr;
    }
}

@media (max-width : 10in){ /* If less than 10ins... */
    .gameBody{
        grid-template-areas: 
        "header"
        "game"
        "submit"
        "sugestions"
        "blerb";
        grid-template-rows: min-content 3in min-content 3in min-content;
        grid-template-columns: 1fr;
    }
}

a{
    color: calc(var(--light-text) - #aaaaaa);
}

button:focus{
    border: var(--green) solid 3px;
    border-radius: 10px;
    background-color: var(--light-text);
}

button{
    font-family: inherit;
    font-size: inherit;
}

.gameBoard{
    border: var(--green) 2px solid;
    border-collapse: collapse;
    color: #ffffff;
}

.rainbow{
    animation: rainbow 1s linear 0s infinite;
}
@keyframes rainbow {
    0%{filter: hue-rotate(0deg);}
    100%{filter: hue-rotate(360deg);}
}