/* ------------------------------
       PAGE STYLING
    ------------------------------ */

    body {
        margin: 0;
        padding: 0;
        background-color: #5a554f;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ------------------------------
       MAIN TITLE
    ------------------------------ */

    h1 {
        color: white;
        text-align: center;
        font-size: 3rem;
        margin-top: 40px;
        line-height: 1.3;
        width: 80%;
        text-transform: uppercase;
    }

    /* ------------------------------
       CONTAINER FOR ALL CLUB BUTTONS
    ------------------------------ */

    .club-container {
        width: 90%;
        max-width: 950px;
        margin-top: 40px;
    }

    /* ------------------------------
       SHARED BUTTON STYLING
    ------------------------------ */

    .club-button {
        display: flex;
        align-items: center;
        border-radius: 60px;
        overflow: hidden;
        margin-bottom: 45px;
        height: 160px;
        cursor: pointer;

        /* removes default button styling */
        border: none;
    }

    /* ------------------------------
       LEFT ICON SECTION
    ------------------------------ */

    .icon-section {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ------------------------------
       RIGHT TEXT SECTION
    ------------------------------ */

    .text-section {
        width: 75%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 4rem;
        font-weight: 300;
    }

    /* ------------------------------
       ICON IMAGE STYLING
    ------------------------------ */

    .icon-section img {
        width: 90px;
        height: 90px;
        object-fit: contain;
    }

    /* ------------------------------
       STEAM CLUB BUTTON
    ------------------------------ */

    #steam-button .icon-section {
        background-color: #ff5a5a;
    }

    #steam-button .text-section {
        background-color: #ff2d2d;
    }

    /* ------------------------------
       CHESS CLUB BUTTON
    ------------------------------ */

    #chess-button .icon-section {
        background-color: #b7ea63;
    }

    #chess-button .text-section {
        background-color: #08c766;
    }

    /* ------------------------------
       DND CLUB BUTTON
    ------------------------------ */

    #dnd-button .icon-section {
        background-color: #d3a4e6;
    }

    #dnd-button .text-section {
        background-color: #8a4df1;
    }

    /* ------------------------------
       MORE LINK
    ------------------------------ */

    .more-link {
        color: white;
        font-size: 3rem;
        margin-top: 20px;
        margin-bottom: 50px;
    }

/* Screen Management */
.screen {
    display: none; /* Hidden by default */
    padding: 100px 20px 20px 20px; 
    max-width: 600px;
    margin: 0 auto;
}

.active-screen {
    display: block;
}

 /* ===============================
       PAGE STYLING
    =============================== */

    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ===============================
       STEAM CLUB BUTTON SELECT
    =============================== */

    h1 {
        color: white;
        font-size: 4rem;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
        text-transform: uppercase;
    }

    /* ===============================
       INFORMATION CARD
    =============================== */

    #curriculum-card {
        width: 70%;
        max-width: 700px;

        background-color: #7b6868;

        padding: 40px;

        color: white;

        margin-bottom: 50px;
    }

    /* Card heading */
    #curriculum-card h2 {
        font-size: 3rem;
        margin-top: 0;
        margin-bottom: 30px;
    }

    /* Card paragraph text */
    #curriculum-card p {
        font-size: 2.5rem;
        line-height: 1.4;
        margin: 0;
    }

    /* ===============================
       START BUTTON
    =============================== */

    #start-button {
        width: 65%;
        max-width: 650px;

        height: 180px;

        background-color: #f4e6e6;

        border-radius: 40px;

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 3.5rem;
        color: black;

        cursor: pointer;

        margin-bottom: 90px;
    }

    /* ===============================
       BACK LINK
    =============================== */

    #back-link {
        color: white;
        font-size: 3rem;
        margin-bottom: 40px;
        cursor: pointer;
    }