/* HI, I'M WALLY.
    I'M KINDA PROUD BECAUSE I MADE THIS COMPLETLY FROM SCRATCH.
    NO TEMPLATES USED, JUST THE HELP OF BING AI AND BLACKBOX.AI :)
    ENJOY!
*/

:root {
    color-scheme: light;
    --colY: #FEE856; /* yellow */
    --colP: #DD356E; /* pink */
    --colB: #000000; /* black */
    --colW: #FFFFFF; /* white */
    --colG: #333333; /* grey */
    background-color: var(--colW);
    font-family: 'Consolas', 'Roboto Mono', monospace;
}

body {
    font-weight: 400;
    font-size: 20pt;
    line-height: 1.7;
    color: var(--colG);
    background-color: var(--colW);
    text-align: center;
}

h1 {
    color: #000000;
    font-weight: 100;
    font-size: 80pt;
    margin: -20px;
    padding: -20px;
    line-height: 1;
}

h2 {
    font-weight: 100;
    font-size: 12pt;
}

h3 {
    color: var(--colP);
    font-weight: 100;
    font-size: 12pt;
    width: 30%;
}

.theWholeThing {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

/*VAPOR*/
.theWholeThingB {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    --colY: #9000ff; /* purple */
    --colP: #00ff8d; /* mint */
    --colG: #FFFFFF; /* white */
    --colW: #333333; /* grey */
}

/*ORANGE*/
.theWholeThingC {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    --colY: #ff5959; /* orange #fe5f5a */
    --colP: #085f63; /* blue */
    /*--colB: #000000;*/ /* black */
    /*--colW: #FFFFFF;*/ /* white */
}

/*GREEN*/
.theWholeThingD {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    --colY: #17b978; /* green */
    --colP: #086972; /* light green #086972 #071a52 */
    /*--colB: #000000;*/ /* black */
    /*--colW: #FFFFFF;*/ /* white */
}

/*CANDY*/
.theWholeThingE {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    --colY: #F266AB; /* PINK */
    --colP: #A459D1; /* PURPLE */
}

/*VOID*/
.theWholeThingF {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    --colY: #0597cf; /* blue #0079FF */
    --colP: #cd4c9b; /* pink #EA047E*/
}

a, a:visited {
    color: var(--colP);
}

    a:hover, a:active, a:focus {
        color: var(--colP);
        outline: none;
        text-decoration: none;
    }

.buttonPlay {
    background-color: var(--colG);
    border: 4px solid var(--colY);
    color: var(--colY);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20pt;
}

.buttonPlay:hover {
    background-color: var(--colP);
    border: 4px solid var(--colY);
}

.buttonStart {
    background-color: var(--colP);
    border: none;
    color: var(--colW);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20pt;
}

.buttonAbout {
    background-color: var(--colY);
    border: none;
    color: var(--colB);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20pt;
}

.homeButtons {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
}

.intro {
    text-transform: uppercase;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.PLAY {
    /*padding: 40px;*/
    background-color: var(--colY);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.activeWord {
    color: var(--colP);
    font-size: 30pt;
}

.activeWord i{
    font-size: 60pt;
}

.topics, .main {
    font-size: 20pt;
    color: var(--colG);
    padding: 20px;
}

.dangerZone {
    color: var(--colP);
    font-weight: 900;
    font-size: 16pt;
}

    .dangerZone i {
        font-size: 0.8em;
    }

.about {
    padding: 40px;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.DONTSHOW{
    display: none;
}

.Follow {
    color: var(--colY);
}

.footer {
    font-size: 12pt;
    background-color: #000000;
    color: #FFFFFF;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

button:disabled {
    border: 4px solid var(--colG);
    background-color: var(--colY);
    color: var(--colG);
    cursor: not-allowed;
}

#resetButton {
    cursor: pointer;
    color: var(--colG);
}

#ddlPlayMode {
    visibility: hidden;
    position: absolute;
}

select {
    font-size: 18px;
    height: 40px;
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    color: var(--colW);

    text-align-last: center;
}

.dripdrop {
    background-color: var(--colP);
}

.ddlLanguage, .ddlColors {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1;
    background-color: var(--colP);
    width: 160px;
}

.ddlLanguage {
    top: 10px;
}

.ddlColors {
    top: 60px;
}

.redText{
    color: var(--colP);
}

.yellowText {
    color: var(--colY);
}

@media only screen and (max-width: 768px) {
    /* Font sizes */
    body {
        font-size: 0.8em;
    }

/*        body i {
            font-size: 2em;
        }*/

    h1 {
        font-size: 40pt;
        line-height: 1.2;
    }

    h2 {
        font-size: 8pt;
    }

    h3 {
        font-size: 8pt;
    }

    .topics, .main {
        line-height: 1.5;
        -webkit-hyphens: auto;
        word-break: break-word;
        hyphens: auto;
        padding: 0px;
    }

    .dangerZone {
        font-size: 1.5em;
    }


    .about i {
        font-size: 1em;
    }

    .homeButtons {
        flex-direction: column;
    }

    .Follow {
        flex-direction: column;
        font-size: 20pt;
    }

    #resetButton {
        font-size: 2em;
    }
}

@media (prefers-color-scheme: dark) {
    /* Add your light mode styles here */
    body {
        background: var(--colW);
    }
}