@import './color.css';

body {
    background-color: var(--seagull-100);
}

.quiznow-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: var(--saffron-30);

    margin-bottom: 20px;
}

.quiznow-header .title,
.quiznow-header .subtitle {
    line-height: 1.7;

}

.quiznow-header .title {
    font-weight: 600;
    font-size: 48px;

}

.quiznow-header .subtitle {
    font-weight: 300;
    font-size: 24px;

}

.quiznow-difficulty-selection {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

#easy, #normal, #hard {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 100px;

    font-size: 24px;
    font-weight: 600;

    border-radius: 12px;
    box-shadow: 0 0 4px whitesmoke;

    cursor: pointer;
}

#easy {
    background-color: #72FF72;

    transition: background-color 0.5s ease, color 0.5s ease, font-size 0.5s ease, scale 0.2s ease;
}

#normal {
    background-color: #FFFD79;

    transition: background-color 0.5s ease, color 0.5s ease, font-size 0.5s ease, scale 0.2s ease;
}

#hard {
    background-color: #FF3131;

    transition: background-color 0.5s ease, color 0.2s ease, font-size 0.2s ease, scale 0.2s ease;
}

#easy:hover {
    background-color: #30aa30;
    color: whitesmoke;

    font-size: 28px;
}

#normal:hover {
    background-color: #a9a733;
    color: whitesmoke;

    font-size: 28px;
}

#hard:hover {
    background-color: #a22020;
    color: whitesmoke;

    font-size: 28px;
}

#easy:active, #normal:active, #hard:active {
    scale: 0.95
}

@media screen and (max-width: 800px) {
    .quiznow-header .title {
        font-size: 24px;

    }

    .quiznow-header .subtitle {
        font-size: 16px;

    }

    .quiznow-difficulty-selection {
        flex-direction: column;

    }

    .quiznow-difficulty-selection > button {
        margin-bottom: 20px;
        
    }

}