@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --white: #E3FEEB;
    --yellow: #FAF9A0;
    --pale_green: #C3D694;
    --yellow_green: #C3C53D;
    --olive_green: #91972A;
    --dark_green: #728F76;
    --black: #553A41;
    --red: #C43D3D;
}

body {
    font-family: "Roboto Slab", serif;
    color: var(--black);
    background-color: var(--white);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* SIGN UP + LOG IN PAGE */

.signup, .login {
    display: flex;
    flex-direction: column;
    margin-top: 4em;
    gap: 2em;
}

.signup form, .login form { /* inputs in signup / login */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signup form label, .login form label { /* inputs in signup / login */
    margin-bottom: 0.2em;
}

.signup div, .login div { /* "Already have an account?" */
    font-weight: bold;
}

.signup form input, .login form input {
    border: 0.2em solid var(--black);
    background-color: var(--white);
    border-radius: 0.7em;
}

.signup form input[type=submit], .login form input[type=submit] {
    border: 0em solid var(--black);
    background-color: var(--olive_green);
    color: var(--white);
    width: 10em !important;
    height: 3em !important;
}

/* HOME PAGE */

input {
    font-family: "Roboto Slab", serif;
    color: var(--black);
    border: 0;
    border-radius: 0.2em;
    transition: 0.3s all;
}

input[type=submit], button {
    background-color: var(--pale_green);
    border-radius: 0.7em;
}

input[type=submit]:hover, button:hover {
    background-color: #d4e6a6;
}

label {
    font-weight: bold;
}

nav {
    width: 90vw;
    padding: 0.5em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

nav * {
    width: 10em;
}

nav span {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav span h2 {
    color: var(--olive_green);
}

nav span img {
    width: 4em;
}

nav form {
    display: flex;
    justify-content: center;
}

.home_nav input[type=submit] {
    width: 7em !important;
    height: 3em;
}

section, header {
    padding: 1em;
    transition: 0.3s all;
}

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

header h1 {
    font-size: 2.5em;
    margin: 0;
}

header ul {
    margin: 0;
}

header ul li {
    font-size: 1.2em;
    font-weight: bold;
}

header ul li:first-child {
    font-size: 1.6em;
}

.score_desktop {
    display: none;
}

.container {
    display: flex;
    justify-content: center;
}

.grid {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}

.item {
    max-height: 20em !important;
    height: 30vw !important;
    margin-bottom: 0;
}

.item1, .item2, .item3, .item4 {
    width: 40vw;
    max-width: 20em;
}

.item5 {
    height: 10vw !important;
    max-height: 8em !important;
    grid-column: 1 / span 2;
    background-color: var(--yellow_green) !important;
}

.item5:hover {
    background-color: #d3d549 !important;
}

.fun_fact_mobile {
    display: block;
}

.fun_fact {
    background-color: #91972A;
    margin: 0 2em;
    max-width: 50em;
    border-radius: 1.2em;
    text-align: center;
}

.fun_fact * {
    color: #FAF9A0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 0 1em;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
}

footer {
    margin: 0 3em;
    display: flex;
    justify-content: center;
}

@media (min-width: 750px) {
    nav {
      background-color: var(--pale_green);
      width: 100%;
    }
    nav span {
        margin-left: 2em;
    }
    nav form input {
        font-weight: bold;
        font-size: 1.1em;
    }
    .score_mobile {
        display: none;
    }
    .score_desktop {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }
    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    h3 {
        margin: 0;
    }
    h4 {
        font-size: 3em;
        margin: 0;
        color: var(--dark_green);
    }
    .main {
        display: flex;
        width: 80%;
        justify-content: space-around;
        margin: 0 2em;
        gap: 2em;
    }
    .grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .item {
        height: 5vw !important;
        border-radius: 3em;
        font-size: 1.2em;
    }
    .item2, .item4, .roadmap .item2, .roadmap .item4 {
        background-color: var(--olive_green) !important;
        color: var(--white);
    }
    .item3, .roadmap .item3 {
        background-color: var(--dark_green) !important;
        color: var(--white);
    }
    .item2:hover, .item4:hover, .roadmap .item2:hover, .roadmap .item4:hover {
        background-color: #b3b940 !important;
    }
    .item3:hover, .roadmap .item3:hover {
        background-color: #85a985 !important;
    }
    .item5, .item5:hover {
        background-color: var(--white) !important;
        text-decoration: underline;
        text-decoration-thickness: 0.11em;
    }
    .item5:hover {
        font-size: 1.3em;
    }
    .fun_fact_mobile {
        display: none;
    }
    .fun_fact {
        max-width: 40em;
        background-color: var(--yellow_green);
    }
    .fun_fact * {
        color: var(--black);
    }
    ul {
        display: flex;
        gap: 4em;
    }
    li {
        font-size: 0.8em;
    }
}

/* CATEGORIES */

#grid2 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}

#grid2 .item3 {
    grid-column: 2 / span 2;
}

#grid2 .item4 {
    grid-row: 2;
}

/* LESSONS + QUIZ PAGE */

.correct {
    color: var(--olive_green);
}

.incorrect {
    color: var(--red);
}

.lesson {
    width: 70%;
}

.lesson p {
    margin-bottom: 3em;
}

.quiz_answer {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
}

nav form input {
    width: 20em !important;
    height: 3em;
}

.quiz_input form, .lesson_input form {
    display: flex;
    justify-content: space-evenly;
    gap: 2em;
}

.quiz_input form input, .lesson_input form input {
    width: 10em !important;
    height: 3em !important;
    border-radius: 0.7em;
    background-color: var(--olive_green);
    color: var(--white);
    font-size: 1.1em;
}

.quiz_input form input:hover, .lesson_input form input:hover {
    background-color: #b3b940;
}

.quiz_button {
    background-color: var(--dark_green) !important;
}

.quiz_button:hover {
    background-color: #85a985 !important;
}

/* ROADMAP PAGE */

.roadmap {
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.roadmap_item {
    width: 50vw;
    height: 15vh !important;
    margin: 0;
}

.line {
    margin: 0;
    height: 3em;
    width: 0.1em;
    border-left: 0.3em solid black;
}

.roadmap input {
    max-width: 20em;
}
/*
.roadmap .item2, .roadmap .item4 {
    background-color: var(--olive_green) !important;
    color: var(--white);
}

.roadmap .item3 {
    background-color: var(--dark_green) !important;
    color: var(--white);
}
*/