/* Navigation Bar */
header {
    nav #nav-overlay{
        gap: 0rem;
        grid-template-areas: 
        'menu login'
        'nav nav';
        display: grid;
        img {
            display: none;
        }
        #nav-show-button {
            grid-area: menu;
            display: block;
        }
        #nav-pages-list {
            grid-area: nav;
            flex-direction: column;
            width: 10rem;
            background-color: inherit;
        }
        #login_signout_button {
            grid-area: login;
        }
    }
}

/* Footer */
footer {
    #socials {
        flex-direction: column;
    }
}

/* ################################################################### */
/* ############################# Index ############################### */
#myself {
    flex-direction: column;
    min-height: fit-content;
    #aboutme {
        width: 90%;
        margin: auto auto;
        margin-top: 0;
        margin-bottom: 0;
        div {
            background-image: url("../images/me.png");
            background-size: cover;
        }
    }
    figure {
        width: fit-content;
        height: fit-content;
        img {
            display: none;
        }
    }
}

/* ################################################################### */
/* ################################# Lists ########################### */
.content-list {
    section {
        .item-inner-container {
            display: grid;
            grid-template-areas:
                'title'
                'other-information'
                'information'
                'skills'
                'extra'
                'aside';
            grid-template-columns: auto;
        }
        .other-information {
            text-align: left;
        }
    }
}

.row-list {
    ul li {
        min-width: 45%;
    }
}


/* ################################################################## */
/* ############################### Forms ############################ */

.form-container {
    form {
        width: 90%;
    }
}