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

/* Two boxes for tutors and students */
#path-container {
    display: flex;
    box-sizing: border-box;
    padding: 1vw 3vw 3vw 3vw;
    justify-content: center;
    gap: 3vw;
}

.path-box {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(6, 1fr);
    box-sizing: border-box;
    height: 84vh;
    width: 48vw;
    align-items: center;
    border-radius: 30px;
    padding: 4vw;
}

.icon {
    grid-column: 1/2;
    height: clamp(2rem, 3vw, 100rem);
}

#path-container .btn {
    grid-column: span 2;
    margin: 0% auto;
    font-size: clamp(1rem, 1.3vw, 100rem);
}

.path-box h1 {
    grid-column: span 2;
    margin: 0% auto;
    font-size: clamp(2rem, 3vw, 100rem);
}

.path-box p {
    grid-column: 2/2;
    font-size: clamp(1rem, 1.1vw, 100rem);
}

#become-a-student {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1553941884-f8947df6e0ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1923&q=80");
    background-size: 100%;
    background-position: center center;
    transition: 300ms ease-in-out;
}

#become-a-tutor {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1558021211-6d1403321394?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1926&q=80");
    background-size: 100%;
    background-position: center center;
    transition: 300ms ease-in-out;
}

#become-a-student:hover {
    background-size: 110%;
}

#become-a-tutor:hover {
    background-size: 110%  
}

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

    #path-container {
        display: grid;
        justify-content: center;
    }

    .path-box {
        width: 90vw;
        padding: 5vw;
    }

    #become-a-student {
        background-size: cover;
    }
    
    #become-a-tutor {
        margin: 5vh auto;
        background-size: cover;
    }

}