:root {
    --primary-bg-color: rgb(255, 255, 255);
    --secondary-bg-color: rgb(35, 35, 35);
    --primary-text-color: rgb(35, 35, 35);
    --primary-accent-color: rgb(239, 91, 80);
    --secondary-accent-color: rgb(255, 198, 92);
}

/* Main content */
section {
    width: 100vw;
    height: 100vh;
}

/* Large text to catch the reader's attention and some functional buttons  */
#banner {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 60vh;
    width: 100vw;
    padding: 15vh 10vw;

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
    background-position: center center;
    background-size: cover;

}

#banner-btn-container{
    display: flex; gap: 5vh;
}

#banner h1, #banner h2, #banner h3, #banner a {
    margin-bottom: 2vh;
}

#banner h1 {
    font-size: clamp(2.7rem, 6vw, 5rem);
}

#banner h2 {
    font-size: clamp(1rem, 2vw, 5rem);
    font-weight: 400;
}

#banner h3, #banner a{
    align-self: center;
    font-size: clamp(0.7rem, 1vw, 2rem);
    font-weight: 300;
}

/* Short description of the club and why members should join */
#about-us-container {
    display: grid;
    box-sizing: border-box;
    height: 32vh;
    padding: 2vh 10vw 3vh 6vw;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 5vw;
    align-items: center;
}

#about-us-container #hook {
    padding-left: 5vw;
    border-right: 2px solid var(--primary-text-color);
    font-size: clamp(1.5rem, 3.5vw, 10rem);
    text-align: left;
}

#about-us-container #description {
    font-size: 1.3vw;
}

/* Four boxes describing the process for students and parents */
#parent-process-container {
    display: flex;
    box-sizing: border-box;
    height: 70vh;
    padding: 5vh;
    gap: 3vw;
    justify-content: center;
    align-items: center;
}

.step-box {
    display: block;
    box-sizing: border-box;
    height: 60vh;
    width: 20vw;
    padding: 8vh 2vw;
    border-radius: 20px;
    text-align: center;
    transition: 300ms;
    font-size: clamp(1rem, 1vw, 5rem);;
}

.step-box:hover {
    transform: scale(1.15);
}

.step-box .icon {
    height: 7vh;
    margin-bottom: 8vh;
}

.step-box h3 {
    font-size: clamp(1.5rem, 1.9vw, 5rem);
    line-height: 3vh;
    margin-bottom: 2vh;
}

#register-box {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1541560052-5e137f229371?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
    background-size: cover;
}

#get-matched-box {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1582703193182-f52bdbc477b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
    background-size: cover;
}

#attend-sessions-box {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80");
    background-size: cover;
}

#grow-box {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1639503667014-6533f3f34831?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
    background-size: cover;
}

/* Large box with some convincing statistics and another detailed description of the club */
#stats {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    width: 80vw;
    height: fit-content;
    padding: 6vw;
    border-radius: 50px;
    margin: 10vh 0% 20vh 0%;    
    background-size: 6vh 6vh;
    background-color: var(--primary-accent-color);
    background-image: radial-gradient(circle, var(--secondary-accent-color) 2px, rgba(0, 0, 0, 0) 1px);
    justify-content: center;
    text-align: center;
}

#stats #description {
    grid-column-start: 1;
    grid-column-end: 4;
    padding-bottom: 5vh;
}

#stats h1, #stats h2, #stats p {
    display: inline-block;
    width: fit-content;
    text-align: center;
    background-color: var(--primary-accent-color);
}

#stats h1 { font-size: clamp(3rem, 5vw, 4rem); }

#stats h2 { font-size: clamp(2rem, 3vw, 4rem); }

#stats p { font-size: clamp(1rem, 1.5vw, 4rem); }

#stats #volunteers {
    grid-column: 0/3;
    grid-row: 3/3;
}

#stats #years {
    grid-column: 2/3;
    grid-row: 3/3;
}

#stats #free {
    grid-column: 3/3;
    grid-row: 3/3;
}

#stats .icon {
    height: 5vw;
    margin-bottom: 1vh;
}

/* Mobile restrictions */
@media screen and (max-width: 600px) {
    /* Banner */
    #banner {
        display: block;
        box-sizing: border-box;
        height: 60vh;
        width: 100vw;
        padding: 15vh 5vw;
    }

    /* Short description of the club and why members should join */
    #about-us-container {
        display: flex;
        box-sizing: border-box;
        padding: 10vw ;
    }

    #about-us-container #hook {
        display: block;
        padding: 0%;
        border-right: 0px solid var(--primary-text-color);
    }

    #about-us-container .btn {
        justify-content: center;
        width: 40vw;
    }

    /* Four boxes describing the process for students and parents */
    #parent-process-container {
        display: grid;
        justify-content: center;
        height: fit-content;
    }

    .step-box {
        height: 60vh;
        width: 80vw;
        padding: 8vh 4vw;
        margin-bottom: 2vh;
    }

    .step-box .icon {
        height: 10vh;
        margin-bottom: 8vh;
    }
    /* Large box with some convincing statistics and another detailed description of the club */
    #stats {
        display: inline-block;
        height: fit-content;
        padding: 10vh 5vw;
        background-image: none;
    }

    #stats .icon {
        height: 20vw;
        margin-top: 5vh;
    }
}