/* =========================
   Cores principais
   ========================= */

:root {
    --header-bg: url("images/grass.png");

    --accent-color: #adf7d1;
    --link-color: #adf7d1;
    --bg-color: #95e8d7;
    --bg-color2: #7dace4;
    --text-color: #8971d0;
    --favorite-color: #fff591;
    --lighter-color: #ffffff;
}


/* =========================
   Regras gerais
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg-color2);
    color: var(--text-color);
    font-family: monospace;
}

::selection {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

p {
    line-height: 1.5em;
}

img {
    max-width: 100%;
}

a,
a:visited {
    color: var(--link-color);
}

a {
    font-weight: bold;
    text-shadow: var(--bg-color) 1px 1px 2px;
    transition:
        background-color 400ms ease-out,
        color 400ms ease-out;
}

a:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

a:focus-visible {
    outline: 3px solid var(--text-color);
    outline-offset: 3px;
}


/* =========================
   Cabeçalho
   ========================= */

header {
    min-height: 200px;
    margin: 0 auto;

    background:
        var(--header-bg)
        center / cover
        no-repeat;

    border-top: 4px solid var(--text-color);
    border-bottom: 4px solid var(--text-color);
    border-radius: 0;
}

header > h1 {
    max-width: 900px;
    margin: 20px auto;
    padding: 12px;

    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    border-radius: 0.3em;

    font-size: 4em;
    text-align: center;
    text-shadow: var(--bg-color2) 1px 1px 3px;
}


/* =========================
   Navegação
   ========================= */

nav {
    margin: 1em;
    padding: 1em;
    font-weight: bold;
}

nav > ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    max-width: 960px;
    margin: auto;
    padding-left: 0;

    line-height: 3rem;
    list-style: none;
}

nav li {
    text-align: center;
}

nav li > a {
    display: inline-block;

    padding: 0.5em 3em;

    background-color: var(--favorite-color);
    border-radius: 0.3em;
    box-shadow: var(--accent-color) 4px 4px;

    text-decoration: none;
}

nav li > a:hover {
    box-shadow: var(--text-color) 4px 4px;
}


/* =========================
   Conteúdo principal
   ========================= */

#content {
    display: flex;
    align-items: flex-start;

    max-width: 960px;
    margin: 0 auto;
}


/* =========================
   Barra lateral
   ========================= */

#sidebar {
    flex: 0 1 260px;

    min-width: 220px;
    margin: 1em;
    padding: 1em;

    background-image: linear-gradient(
        45deg,
        #8a9ccc 14.91%,
        #aab7e3 14.91%,
        #aab7e3 32.46%,
        #d9ddff 32.46%,
        #d9ddff 50%,
        #8a9ccc 50%,
        #8a9ccc 64.91%,
        #aab7e3 64.91%,
        #aab7e3 82.46%,
        #d9ddff 82.46%,
        #d9ddff 100%
    );

    background-size: 80.61px 80.61px;

    border: 2px solid var(--text-color);
    border-radius: 1em;
    box-shadow: var(--accent-color) 4px 4px;
}

#avatar {
    max-width: 164px;
    margin: 0.5em auto;

    border-radius: 1.5em;
    box-shadow: var(--accent-color) 4px 4px;
}

#avatar img {
    display: block;

    width: 100%;
    max-width: 160px;
    height: auto;

    background-color: var(--lighter-color);
    border: 2px solid var(--text-color);
    border-radius: 1.5em;
}

#bio {
    margin: 1em;

    background-color: var(--favorite-color);
    border: 2px solid var(--text-color);
    border-radius: 1em;
    box-shadow: var(--accent-color) 4px 4px;

    text-shadow: var(--bg-color2) 0 0 2px;
}

#bio p {
    margin: 1em;
}


/* =========================
   Área principal
   ========================= */

main {
    flex: 1 1 auto;
    min-width: 0;

    margin: 1em;
    padding: 1em 2em;

    background-color: var(--favorite-color);
    border: 2px solid var(--text-color);
    border-radius: 1em;
    box-shadow: var(--accent-color) 4px 4px;

    text-shadow: var(--bg-color2) 1px 1px 3px;
}

main > h1,
main > h2,
main > h3 {
    padding: 0.2em 0.5em;

    background-color: var(--bg-color);
    border-radius: 0.4em;

    text-shadow: var(--bg-color2) 1px 1px 3px;
}

main ul {
    list-style-type: "❤︎ ";
}

.center {
    text-align: center;
}


/* =========================
   Rodapé
   ========================= */

footer {
    max-width: 960px;
    margin: 1em auto;
    padding: 1em;

    background-color: var(--bg-color);
    border-radius: 1em;

    font-size: small;
    text-align: center;
    text-shadow: var(--bg-color2) 1px 1px 3px;
}


/* =========================
   Versão para telemóveis
   ========================= */

@media only screen and (max-width: 800px) {
    header {
        min-height: 160px;
    }

    header > h1 {
        margin: 0.4em;
        font-size: 3em;
    }

    #content {
        flex-wrap: wrap;
    }

    #sidebar {
        flex: 1 1 100%;

        width: 100%;
        min-width: 0;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        border: none;
    }

    #avatar {
        margin: 0 1em;
    }

    #bio {
        flex: 1 1 280px;
        width: auto;
        min-width: 0;
    }

    #sidebar nav {
        flex: 1 1 100%;
    }

    nav > ul {
        justify-content: center;
        gap: 0.5rem;
        line-height: 2em;
    }

    #sidebar ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        margin: 0 1em;
    }

    #sidebar li {
        margin: 0.3em 1em;
        padding-left: 0;
    }

    main {
        width: auto;
        margin: 0 1em 1em;
        padding: 1em;
    }

    footer {
        margin: 1em;
    }
}