@font-face {
    font-family: titleFont;
    src: url(fonts/Shinedown-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: 2vw;
    background-color: #0e0e0e;
    letter-spacing: 0.05em;
}

button {
    border: 2px solid #FFCA00;
    background-color: #0e0e0e;
    cursor: pointer;
    border-radius: 10px;
    border-width: 3px;
}

/*
button:hover {
    background-color: #785f05;
    transition-duration: 0.1s;
}
*/

button:active {
    /*background-color: #FFCA00;*/
    transform: translateY(2px);
    /*border: #0e0e0e;*/
    /*color: #0e0e0e;*/
}

input:focus {
    outline: none;
}


/* COLOUR CHANGING SHIT */
.DARK {
    color: #785f05;
}
.LIGHT {
    color: #FFCA00;
}
/* FONT CHANGING SHIT */
.BODYFONT {
    font-family: AAThemeFontMain;
}
.LYRICFONT {
    font-family: AAThemeFontLyric;
}


/* DESKTOP */

@media screen and (min-width: 801px) {
    .topHeader {
        max-width: fit-content;
        margin-inline: auto;
        margin-top: 2vw;
        
        h1 {
            font-family: titleFont;
            font-size: 5vw;
            font-weight: lighter;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        h2 {
            font-size: 1.5vw;
            margin-top: 0px;
            margin-bottom: 0px;
            font-weight: lighter;
            font-style: italic;
        }
    }

    .scoreDiv {
        padding-top: 1vw;
        display: flex;
        justify-content: space-between;
        padding-left: 2vw;
        padding-right: 2vw;
        margin-bottom: 0;
        font-size: 1.3vw;

        p {
            margin: 0;
        }

        .breakText {
            font-size: 1vw;
            padding-top: 0;
        }
    }

    .listDiv {
        max-width: fit-content;
        margin-inline: auto;
        padding-top: 2vw;
        font-size: 1vw;
    }

    .theLine {
        letter-spacing: 0;
        margin-top: 0;
        font-family: AAThemeFontMain;
    }

    .mainBody {
        max-width: fit-content;
        margin-inline: auto;

        p {
            margin-top: 0;
            margin-bottom: 1.5vw;
        }

        .guessDiv {
            p {
                font-size: 2.5vw;
                font-weight: lighter;
                text-align: center;
            }

            button {
                display: flex;
                margin-inline: auto;
                margin-top: 1.5vw;
                width: 8vw;
                height: 3vw;
                font-size: 1.5vw;
                justify-content: center;
                align-items: center;
            }

            input {
                display: flex;
                margin-inline: auto;
                width: 50vw;
                font-size: 1.5vw;
                border-radius: 10px;
                padding: 0.5rem;
                background-color: #FFCA00;
                color: #0e0e0e;
                border: #0e0e0e;
            }
        }

        .hintDiv {
            display: flex;
            align-items: center;
            gap: 1.5vw;
            margin-left: 22vw;
            padding-top: 1.5vw;

            p {
                margin: 0;
                padding: 0;
                font-size: 1.5vw;
            }

            button {
                width: 6vw;
                height: 2vw;
                font-size: 1vw;
                justify-content: center;
                align-items: center;
            }

            .strikeTexts {
                font-size: 3vw;
            }
        }
    }

    .themeButton {
        button {
            font-size: 2vw;
            padding: 1vw;
            position: fixed;
            bottom: 5vw;
            left: 2vw;
            z-index: 1000;
        }
    }
}

/* MOBILE */

@media screen and (max-width: 800px) {
    .topHeader {
        max-width: fit-content;
        margin-inline: auto;
        margin-top: 5vw;
        
        h1 {
            font-family: titleFont;
            font-size: 7vw;
            font-weight: lighter;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        h2 {
            font-size: 2.5vw;
            margin-top: 0px;
            margin-bottom: 0px;
            font-weight: lighter;
            font-style: italic;
        }
    }

    .scoreDiv {
        padding-top: 3vw;
        display: flex;
        justify-content: space-between;
        padding-left: 1.5vw;
        padding-right: 1.5vw;
        margin-bottom: 0;
        font-size: 3vw;

        p {
            margin: 0;
        }
        }

        .breakText {
            font-size: 2vw;
        }

    .listDiv {
        max-width: fit-content;
        margin-inline: auto;
        padding-top: 2vw;
        font-size: 3vw;
    }

    .theLine {
        letter-spacing: 0;
        font-family: AAThemeFontMain;
    }

    .mainBody {
        max-width: fit-content;
        margin-inline: auto;

        p {
            margin-top: 0;
            margin-bottom: 2.5vw;
        }

        .guessDiv {
            p {
                font-size: 4.5vw;
                font-weight: lighter;
                text-align: center;
            }

            button {
                display: flex;
                margin-inline: auto;
                margin-top: 1%;
                width: 15vw;
                height: 7vw;
                font-size: 3vw;
                justify-content: center;
                align-items: center;
            }

            input {
                display: flex;
                margin-inline: auto;
                width: 75vw;
                font-size: 3vw;
                border-radius: 10px;
                padding: 0.5rem;
                background-color: #FFCA00;
                color: #0e0e0e;
                border: #0e0e0e;
            }
        }

        .hintDiv {
            display: flex;
            align-items: center;
            gap: 1.5vw;
            margin-left: 9vw;
            padding-top: 1vw;

            p {
                margin: 0;
                padding: 0;
                font-size: 3vw;
            }

            button {
                width: 12vw;
                height: 6vw;
                font-size: 2.5vw;
                justify-content: center;
                align-items: center;
            }
            
            .strikeTexts {
                font-size: 5vw;
            }
        }

        .themeButton {
            button {
                font-size: 2vw;
                padding: 1vw;
                position: fixed;
                bottom: 5vw;
                left: 2vw;
                z-index: 1000;
            }
    }
    }
}