/* Utils */

.max-width-700 {
    max-width: 700px;
    margin: auto;
}

section {
    padding-left: 1rem;
    padding-right: 1rem;
}

.button{
    padding: .3rem 1rem;
    cursor: pointer;
}

/* Nav styling: */

nav {
    /* Adds some white space on all sides */
    padding: 1rem;
    /* Makes the navbar stick on top of the page */
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    left: 0;
    /* Nav Always On Top */
    z-index: 100000000000000000000000;
}

/* Aligns the two part of the navigation */
nav .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Aligning the left and right part of the navigation */
nav .nav-wrapper > div,
nav .nav-wrapper > div .log-in {
    display: flex;
    align-items: center;
}

nav .nav-wrapper svg {
    max-width: 35px;
}

/* Privacy */

section.privacy ul li {
    list-style: disc;
}

/* Footer */

footer .cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

footer .cards .card a:hover {
    text-decoration: underline;
}

footer .cards .card input,
footer .cards .card textarea, 
footer .cards .card button {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    resize: vertical;
    cursor: text !important;
}

footer .cards .card button {
    cursor: pointer !important;
}

footer .instagram-facebook {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 750px) {
    body {
        font-size: 12px;
    }
    footer .cards{
        grid-template-columns: 1fr;
    }
    footer .cards .card {
        text-align: center !important;
        border-bottom: rgba(221, 221, 221, 0.3) 1px solid;
    }
    footer .instagram-facebook {
        justify-content: center;
    }
}

@media only screen and (max-width: 400px) {
    nav .nav-wrapper {
       flex-direction: column;
    }
}