/* Fonts */

/* Sans-Serif Figtree */

@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree/Figtree-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 300 900;
    font-style: normal;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree/Figtree-Italic-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 300 900;
    font-style: italic;
}

/* Serif Computer Modern LaTeX */

@font-face {
	font-family: 'Computer_Modern';
	src: url('/static/fonts/computer_modern/cmunrm.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'Computer_Modern';
	src: url('/static/fonts/computer_modern/cmunbx.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}


.nav-title {
    color: #000000; 
}


:root {
    --vertical-offset: +2vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: Figtree, sans-serif;
    font-weight: 600;
    color: #000000;
    padding: 0 1.5em;
    box-sizing: border-box;
    background-color: #f3f3f3;
}

/* Flex-grow the content container to take up remaining space */
.content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translateY(var(--vertical-offset));
}

/* Style the footer */
.footer {
    text-align: center;
    padding: 1em 0;
}

.footer p {
    margin: 0;
    font-size: 8pt;
    color: #545454;
}



.title h1 {
    /* text-align: center; */
    margin: 0 auto;
    text-align: center;
    color: #000000;
}

.title-play h1 {
    /* text-align: center; */
    margin: 0 auto;
    text-align: center;
    color: #000000;
}

.subtitle h2 {
    text-align: center;
}

.timer h5 {
    text-align: center;
}

.daily-details {
    text-align: center;
}

.daily-details-play {
    text-align: center;
}

.centered-image {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    display: block;
    border-radius: 20px;
    /* border: 1px solid black; */
}


p {
    line-height: 1.5;
    font-weight: 500;
    font-size: 11pt;
}




.bottom_extra_space {
    margin-bottom: 2em;
 }

h1 {
    font-family: Computer_Modern, serif;
    font-weight: bold;
    font-size: 70pt;
    margin-bottom: 0;
}
h2, h3, h4, h5, h6 {
    font-family: Figtree, sans-serif;
    font-weight: 700;
    margin: 0.2em 0;
}
h2 {
    font-size: 20pt;
    font-weight: 600;
    /* margin-bottom: -0.35em; */
    /* color: #ff1423; */
}
h5 {
    font-size: 12pt;
}
h6 {
    font-size: 10pt;
    font-weight: 500;
    margin-top: 0.55em;
    margin-bottom: -0.5em;
    color: #ff1423;
}
/* Style for all links to remove underlines */
a {
    text-decoration: none;
}


.play-button-container {
    text-align: center;
    width: 100%;
    margin: 30px auto;
}

.check-button-container {
    text-align: center;
    width: 100%;
    margin: 1em auto; 
}





.play-button {
    background-color: #000000;
    border: none;
    padding: 12px 70px;
    border-radius: 30px;
    cursor: pointer;
    font-family: Figtree, sans-serif;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
    color: #ffffff;
}

.play-button:hover {
    background-color: #525252;
    transform: translateY(-2px);
}


 
.game-area {
    display: flex;
    align-items: center;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
}

.game-container {
    width: 42.5em;
    margin: 0 auto;
    border: 3px solid black;
    border-radius: 25px;
    padding: 1em;
}

.instructions-container {
    width: 15em;
    margin: 1.5em auto 0; /* top right/left bottom */
    border: 3px solid #ff1423;
    border-radius: 20px;
    padding: 1em;
}

.equations-area {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
}

.equation-box {
    width: 7em;
    height: 7em;
    border: 2px solid gray;
    border-radius: 20px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 2em 0.1em; */
}

.equation {
    margin: auto;
    line-height: 1.5;
    font-size: 11pt;
}

.letters-area {
    display: flex;
    justify-content: center;
    gap: 1em; /* Space between boxes */
    flex-wrap: wrap; /* Prevents layout issues if boxes overflow */
    margin: 2em auto; /* Centers the whole block */
    width: fit-content; /* Ensures it wraps around the content neatly */
}

.letter-box {
    width: 6em; /* Fixed width */
    height: 6em; /* Fixed height */
    border: 2px solid gray;
    background-color: white;
    font-size: 2.5em;
    font-weight: 600;
    font-family: Figtree, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Padding/border doesn't affect dimensions */
    cursor: text;
    margin: 0; /* Prevent extra spacing from JS */
}

.letter-box:focus {
    outline: 2px solid #000000;
}




.letters-area-instructions {
    display: flex;
    justify-content: center;
    gap: 0.5em; /* Space between boxes */
    flex-wrap: wrap; /* Prevents layout issues if boxes overflow */
    margin: 0.7em auto; /* Centers the whole block */
    width: fit-content; /* Ensures it wraps around the content neatly */
}

.equation-box-instructions {
    width: 3em; /* Fixed width */
    height: 3em; /* Fixed height */
    border: 2px solid gray;
    background-color: white;
    border-radius: 10px;
    font-size: 1.5em;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Padding/border doesn't affect dimensions */
    margin: 0; /* Prevent extra spacing from JS */
}


.letter-box-instructions {
    width: 3em; /* Fixed width */
    height: 3em; /* Fixed height */
    border: 2px solid gray;
    background-color: white;
    font-size: 1.5em;
    font-weight: 600;
    font-family: Figtree, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Padding/border doesn't affect dimensions */
    margin: 0; /* Prevent extra spacing from JS */
}


.equals-sign {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin: 0;
}



#keyboard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.keyboard-row button {
    font-family: Figtree, sans-serif;
    background-color: #d3d6da;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px;
    width: 43px;
    height: 58px;
    text-align: center;
    color: #000000;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.wide-button {
    min-width: 70px;
    color: #000000;
    font-size: 1rem !important;
}

.keyboard-row button:hover {
    background-color: #c4c7ca;
}

.spacer-half {
    flex: 0.5;
}





ol {
    counter-reset: section;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

ol li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 450
}

ol li::before {
    counter-increment: section;
    content: counter(section) ". ";
    color: #ff1423;
    font-weight: 600;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

@media (max-height: 860px) {
    .title-play h1 {
        font-size: 45pt;
    }
}

@media (max-width: 1450px) and (min-width: 768px) {
    .title-play h1 {
        font-size: 45pt;
    }

    .game-area {
        transform: scale(0.95);
        margin-top: -0.3em;
        margin-bottom: 0.1em;
        /* transform-origin: top; */
    }
}

@media (max-width: 768px) and (min-width: 600px) {

    .title-play h1 {
        font-size: 35pt;
    }

    .game-area {
        transform: scale(0.8); /* Scales the game area to 90% */
        margin-top: -2.2em;
        margin-bottom: -1.2em;
        /* transform-origin: top; */
    }

    .daily-details-play h5 {
        font-size: 10pt;
    }

    .daily-details-play p {
        font-size: 10pt;
    }
}

@media (max-width: 600px) {


    .content-container {
        flex: 0;
        width: 100%;
        margin: auto;
    }

    .title h1 {
        font-size: 45pt;
    }

    .title-play h1 {
        font-size: 23pt;
    }

    

    .subtitle h2 {
        font-size: 15pt;
        margin-top: 0.5em;
    }


    body {
        padding: 0;
    }

    h5 {
        font-size: 10pt;
    }

    p {
        font-size: 8pt;
    }

    h6 {
        font-size: 12pt;
    }

    .footer p {
        font-size: 5pt!important;
    }

    .daily-details-play {
        margin-top: 1em;
    }

    .daily-details-play h5 {
        font-size: 8pt;
    }

    .daily-details-play p {
        font-size: 7pt;
    }

    ol li {
        font-size: 12pt;
    }

    .boxes-area {
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
        transform: scale(0.8);
        margin-top: -3.5em;
        margin-bottom: -3.3em;
    }

    .equations-area {
        flex-direction: column;
        margin: 0;
        gap: 1em;
        justify-content: space-around;
        flex-wrap: wrap; /* Prevents layout issues if boxes overflow */
        width: fit-content; /* Ensures it wraps around the content neatly */
    }

    .letters-area {
        flex-direction: column;
        margin: 0;
        justify-content: center;
    }

    #keyboard-container {
        width: 100vw;
        margin: 0 auto;
    }

    .keyboard-row button {
        padding: 0;
        width: 8vw;
    }

    .wide-button {
        min-width: 11vw;
        padding: 0;
        font-size: 3vw!important;
    }


    .game-area{
        margin: 0;
    }

    .game-container {
        width: 100%;
        margin: 0 auto;
        border: none;
        padding: 0;
    }

}

@media (max-height: 750px) and (max-width: 600px) {
    .title-play h1 {
        font-size: 20pt;
    }

    .boxes-area {
        transform: scale(0.6);
        margin-top: -7.8em;
        margin-bottom: -7.2em;
    }

    .keyboard-row button {
        height: 47px;
    }

}