@import url("./styles/main.css");

:root{

    /* font colors  */
    --font-primary: #FFFFFF;
    --font-gray: #747474;
    --font-dark: #1b1b1b;

    /* backgorund colors  */
    --background-dark: #1B1B1B;
    --background-gray: #3F3F3F;

    /* pastels */
    --pastel-blue: #688DE2;
    --pastel-green: #5BB68B;
    --pastel-red: #DA714F;
    --pastel-yellow: #E6C142;

    /* font family  */
    font-family: 'Poppins', sans-serif;
}

/* Common styles  */
.txt-highlight{
    color: var(--pastel-green);
}

.txt-info{
    color: var(--pastel-blue);
}

.txt-bold{
    font-weight: 800;
}
/* landing page styles  */

.theme{
    background-color: var(--background-dark);
    color: var(--font-primary);
}

.hero{ 
    padding: var(--fs-lg);
    margin: 0 auto;
    text-align: center;
}

.hero h1{
    font-size: 4rem;
}

.hero-cta{
    gap: var(--space-md);
}

.hero-cta>button{
    width: 15rem;
    border: none;
    border-radius: 0%;
    background-color: var(--pastel-blue);
}

.hero-cta>button:nth-child(2){
    background-color: var(--pastel-green);
}

.fab{
    background-color: var(--pastel-yellow);
    color: var(--font-dark);
}

.quiz-categories{
    margin: 0 auto;
}

.quiz-list{
    gap: 2rem;
    justify-content: center;
}

.quiz-item{
    width: 20rem;
    height: 12rem;
    background-color: var(--pastel-yellow);
    border-radius: var(--radius-sm);
    color: var(--font-dark);
    padding: var(--space-sm);
}

.quiz-img{
    width: 8rem;
}

.quiz-cta{
    justify-content: flex-end;
    align-items: flex-start;
}

.cat1{
    background-color: var(--pastel-blue);
}

.cat2{
    background-color: var(--pastel-green);
}

.cat3{
    background-color: var(--pastel-red);
}

/* Media Queries  */
@media  only screen and  (max-width: 780px){
    .hero{
        align-items: flex-start;
        text-align: left;
    }
    .hero h1{
        line-height: 1;
    }
    .hero-cta{
        width: 100%;
    }
    .hero-cta>button{
        width: 100%;
    }
    .quiz-categories{
        height: auto;
    }
    .fab{
        display: none;
    }
}