:root {
    --primary: #2196f3;
    --background: #212121;
    --accent: #7ac6ec;
    --text-dark: #212121;
    --text-light: #fff;
    --green: #a7d689;
}

body { 
    display: flex;
    font-family: "Lexend", sans-serif; 
    margin: 0; 
    height: 100vh; 
    position: relative;
    background-color: var(--background);
    color: var(--text-light);
    min-width: 1100px;
    max-width: 2000px;
    box-sizing: border-box;
}

h2 {
    font-size: 2.5rem;
    min-width: 380px;
    color: var(--green);
}

#map { 
    width: 70vw; 
    height: 100vh; 
}

#quiz { 
    width: 30vw; 
    margin: 5%;
    font-size: 20px; 
    font-weight: 300;
    text-align: center; 
}

form { 
    text-align: left; 
    margin: 20% 20% 0% 20%; 
    font-size: 1.4rem;
    min-width: 260px;
}

label {
    display: flex;
    align-items: center; 
    position: relative;
    padding-left: 35px; 
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
}

label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--background);
    border: 3px solid var(--green);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: .5s ease;
}

label input:checked + .checkmark {
    background-color: var(--green);
}

#button-container {
    display: flex;
    justify-content: center;

}

button { 
    background-color: var(--primary);
    border: 2px solid var(--border-light);
    color: var(--background);
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px; 
    width: fit-content;
    border: 3px solid purple;
    border: none; 
    cursor: pointer; 
    transition: transform 0.3s ease;
}

button:hover { 
    background-color: var(--accent);
    transform: scale(.95);
}

#score-tracking p {
    display: inline-block;
    padding: 2%;
    font-weight: 500;
}

#footer {
    position: absolute;
    bottom: 2%;
    right: 5%;
    font-size: 14px;
    color: var(--text-light);
    max-width: 30%;
}


#footer p {
    font-size: 16px; 
}

.modal {
    display: none;
    position: absolute;
    text-align: center;
    background-color: #333333;
    font-size: 1.4rem;
    width: 30%;
    color: var(--text-light);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2%;
    z-index: 999;
}


.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.close-button:hover {
    color: var(--accent); /* Change color on hover */
}

.high-score-alert {
    color: var(--green);
    font-weight: 600;
    font-size: 1rem;
    margin-left: 8px;
    display: inline;
    animation: fadeInOut 2.5s ease-in-out;
}

/* Mobile-responsive adjustments */
@media (max-width: 1099px) {
    body {
        flex-direction: column;
        min-width: 100%;
    }

    #map {
        width: 100%;
        height: 80vh;
    }

    #quiz {
        width: fit-content;
        padding: 10px;
        font-size: 16px;
        margin: 0% 10% 5% 10%;
    }

    form {
        margin: 0%;
    }

    #button-container {
        flex-direction: column;
        align-items: center;
    }

    button {
        font-size: 1.2rem;
        padding: 4%;
        margin: 2%;
        width: fit-content; /* Make buttons more responsive */
    }

    #score-tracking p {
        font-size: 1.3rem;
    }

    .modal {
        font-size: 1.2rem;
        width: 50%;
        padding: 3%;
    }

    #footer {
        position: relative;
        margin: 1% 10%;
        font-size: 12px;
        max-width: 100%;
    }

}

/* Adjustments for very small screens (mobile) */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    h2 {
        font-size: 2rem;
        margin: 5% 0% 7% 0%;
    }

    #map {
        width: 100%;
        height: 100vh;
        top: 2%;
    }

    #quiz {
        padding: 5px;
        font-size: 1.3rem;
        width: 92%;
        height: 50vh;
        margin: 4%;
    }

    form {
        margin: 5%;
    }

  form label {
        margin: 0% 0% 10% 0%;
    }

    br {
        display: none;
    }

    button {
        font-size: 1.2rem;
        padding: 7%;
        margin: 0% 0% 5% 0%;
        width: 100%;
    }

    #mobile-prompt {
        display: none;
    }

    #score-tracking {
        padding: 6%;
        margin: 0%;
        font-weight: 500;
    }

    .modal {
        font-size: 1.2rem;
        width: fit-content;
        min-width: 260px;
        padding-bottom: 5%;
    }

    #footer {
        /* position: absolute;
        bottom: -15%;
        padding: 3%;
        font-size: 1rem;
        text-align: center;
        max-width: 100%; */
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        position: fixed;
        padding: 3%;
        font-size: 1rem;
        text-align: center;
        max-width: 100%;
       bottom: 0%;
    }

}