:root {
    --bg: #fff;
    --fg: #212529;
    font-size: 17px;
}
body {
    background: var(--bg);
    color: var(--fg);
    display: grid;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    hyphens: auto;
    line-height: 1.375rem;
    margin: 1rem;
}

a {
    color: var(--fg);
    text-underline-offset: 3px;
}

hr {
    background: transparent;
    border: 0;
}

/* HEADER */
header {
    align-items: center;
    display: flex;
    gap: 0;
    grid-area: header;
    margin: 0 1rem;
    padding: 0;
}

header h1 {
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
}

header *:last-child {
    margin-left: auto;
}

header img {
    height: 1.25rem;
    margin: 0;
    padding: 0;
    width: auto;
}

header a {
    display: inline-block;
    line-height: 1;
}

header a * {
    display: block;
}
/* HEADER */

/* ASIDE */
aside {
    grid-area: sidebar;
}

aside section {
    border: none;
    padding: 1rem;
}

aside section:not(:last-child) {
    margin-bottom: 1rem;
}
/* ASIDE */

/* MAIN */
main {
    grid-area: main;
}
/* MAIN */

/* ASIDE SECTION header */
aside section.header {
    background: #d0ebff;
}

aside section.header div {
    margin: 1rem 0;
}
/* ASIDE SECTION header */

/* INDEX
 * INDEX
 * INDEX
 */

/* ASIDE SECTION index-header */
aside section#index-header div.index-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#index-header div.index-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#index-header div.index-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION index-header */

/* INDEX SETTINGS
 * INDEX SETTINGS
 * INDEX SETTINGS
 */

/* ASIDE SECTION index-settings */
aside section#index-settings {
    background: #c3fae8;
}

aside section#index-settings div {
    margin: 1rem 0;
}

aside section#index-settings div.index-settings-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#index-settings div.index-settings-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#index-settings div.index-settings-links {
    margin-top: 2rem;
}

aside section#index-settings div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION index-settings */

/* MAIN index-main */
main#index-main a div.index-main-item {
    align-items: center;
    background: #f1f3f5;
    display: flex;
    gap: 2rem;
    padding: 1rem;
    margin: 1rem 0;
}

main#index-main a:first-of-type div.index-main-item {
    margin-top: 0;
}

main#index-main a:last-of-type div.index-main-item {
    margin-bottom: 0;
}

main#index-main a div.index-main-item img.index-main-item-avatar {
    border: 0;
    border-radius: 50%;
    height: 3.125rem;
    width: 3.125rem;
}

main#index-main a div.index-main-item span.index-main-item-updated-date {
    margin-left: auto;
    text-align: right;
}
/* MAIN index-main */

/* MAIN index-main alt */
main#index-main > div.index-main-item {
    align-items: center;
    background: #f1f3f5;
    display: flex;
    gap: 2rem;
    padding: 1rem;
    margin: 1rem 0;
}

main#index-main > div.index-main-item:first-of-type {
    margin-top: 0;
}

main#index-main > div.index-main-item:last-of-type {
    margin-bottom: 0;
}

main#index-main > div.index-main-item img.index-main-item-avatar {
    border: 0;
    border-radius: 50%;
    height: 3.125rem;
    width: 3.125rem;
}

main#index-main > div.index-main-item span.index-main-item-updated-date {
    margin-left: auto;
    text-align: right;
}
/* MAIN index-main alt */

/* INDEX END
 * INDEX END
 * INDEX END
 */

/* NETWORK SETTINGS
 * NETWORK SETTINGS
 * NETWORK SETTINGS
 * /

/* ASIDE SECTION network-settings-header */
aside section#network-settings-header div.network-settings-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#network-settings-header div.network-settings-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#network-settings-header div.network-settings-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION network-settings-header */

/* ASIDE SECTION network-settings */
aside section#network-settings {
    background: #c3fae8;
}

aside section#network-settings div {
    margin: 1rem 0;
}

aside section#network-settings div.network-settings-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}
aside section#network-settings div.network-settings-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#network-settings div.network-settings-statistics {
    margin-top: 2rem;
}

aside section#network-settings div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION network-settings */

/* MAIN network-settings-main */
main#network-settings-main div {
    align-items: center;
    background: none;
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

main#network-settings-main div:first-of-type {
    margin-top: 0;
}

main#network-settings-main div:last-of-type {
    margin-bottom: 0;
}

main#network-settings-main div img {
    background: none;
    border: 0;
    border-radius: 0;
    height: 1.625rem;
    width: auto;
}

main#network-settings-main div span:last-child {
    margin-left: auto;
}
/* MAIN network-settings-main */

/* NETWORK SETTINGS END
 * NETWORK SETTINGS END
 * NETWORK SETTINGS END
 * /

/* PROFILE SETTINGS
 * PROFILE SETTINGS
 * PROFILE SETTINGS
 */
 
/* ASIDE SECTION profile-settings-header */
aside section#profile-settings-header div.profile-settings-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#profile-settings-header div.profile-settings-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#profile-settings-header div.profile-settings-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION profile-settings-header */

/* ASIDE SECTION profile-settings */
aside section#profile-settings {
    background: #c3fae8;
}

aside section#profile-settings div {
    margin: 1rem 0;
}

aside section#profile-settings div.profile-settings-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#profile-settings div.profile-settings-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#profile-settings div.profile-settings-description {
    margin-top: 2rem;
}

aside section#profile-settings div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION profile-settings */

/* MAIN profile-settings-main */
main#profile-settings-main div {
    align-items: center;
    background: none;
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

main#profile-settings-main div:first-of-type {
    margin-top: 0;
}

main#profile-settings-main div:last-of-type {
    margin-bottom: 0;
}

main#profile-settings-main div img {
    background: none;
    border: 0;
    border-radius: 0;
    height: 1.625rem;
    width: auto;
}

main#profile-settings-main div span:last-child {
    margin-left: auto;
}
/* MAIN profile-settings-main */

/* PROFILE SETTINGS END
 * PROFILE SETTINGS END
 * PROFILE SETTINGS END
 */

/* ACCOUNT SETTINGS
 * ACCOUNT SETTINGS
 * ACCOUNT SETTINGS
 * /

/* ASIDE SECTION account-settings-header */
aside section#account-settings-header div.account-settings-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#account-settings-header div.account-settings-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#account-settings-header div.account-settings-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION account-settings-header */

/* ASIDE SECTION account-settings */
aside section#account-settings {
    background: #c3fae8;
}

aside section#account-settings div {
    margin: 1rem 0;
}

aside section#account-settings div.account-settings-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}
aside section#account-settings div.account-settings-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#account-settings div.account-settings-description {
    margin-top: 2rem;
}

aside section#account-settings div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION account-settings */

/* MAIN account-settings-main */
main#account-settings-main div {
    align-items: center;
    background: none;
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

main#account-settings-main div:first-of-type {
    margin-top: 0;
}

main#account-settings-main div:last-of-type {
    margin-bottom: 0;
}

main#account-settings-main div img {
    background: none;
    border: 0;
    border-radius: 0;
    height: 1.625rem;
    width: auto;
}

main#account-settings-main div span:last-child {
    margin-left: auto;
}
/* MAIN account-settings-main */

/* ACCOUNT SETTINGS END
 * ACCOUNT SETTINGS END
 * ACCOUNT SETTINGS END
 * /

/* WEBSITE SETTINGS
 * WEBSITE SETTINGS
 * WEBSITE SETTINGS
 * /

/* ASIDE SECTION website-settings-header */
aside section#website-settings-header div.website-settings-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#website-settings-header div.website-settings-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#website-settings-header div.website-settings-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION website-settings-header */

/* ASIDE SECTION website-settings */
aside section#website-settings {
    background: #c3fae8;
}

aside section#website-settings div {
    margin: 1rem 0;
}

aside section#website-settings div.website-settings-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}
aside section#website-settings div.website-settings-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#website-settings div.website-settings-description {
    margin-top: 2rem;
}

aside section#website-settings div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION website-settings */

/* MAIN website-settings-main */
main#website-settings-main div {
    align-items: center;
    background: none;
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

main#website-settings-main div:first-of-type {
    margin-top: 0;
}

main#website-settings-main div:last-of-type {
    margin-bottom: 0;
}

main#website-settings-main div img {
    background: none;
    border: 0;
    border-radius: 0;
    height: 1.625rem;
    width: auto;
}

main#website-settings-main div span:last-child {
    margin-left: auto;
}
/* MAIN website-settings-main */

/* WEBSITE SETTINGS END
 * WEBSITE SETTINGS END
 * WEBSITE SETTINGS END
 * /

/* PERSON PROFILE
 * PERSON PROFILE
 * PERSON PROFILE
 */
 
/* ASIDE SECTION person-profile-header */
aside section#person-profile-header div.person-profile-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#person-profile-header div.person-profile-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#person-profile-header div.person-profile-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION person-profile-header */


/* ASIDE SECTION person-profile-settings-profile */
aside section#person-profile-settings-relationship {
    background: #c3fae8;
}

aside section#person-profile-settings-profile div {
    margin: 1rem 0;
}

aside section#person-profile-settings-profile div.person-profile-settings-profile-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#person-profile-settings-profile div.person-profile-settings-profile-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#person-profile-settings-profile div.person-profile-settings-profile-links {
    margin-top: 2rem;
}

aside section#person-profile-settings-profile div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION person-profile-settings-profile */

/* ASIDE SECTION person-profile-settings-history */
aside section#person-profile-settings-history {
    background: #c3fae8;
}

aside section#person-profile-settings-history div {
    margin: 1rem 0;
}

aside section#person-profile-settings-history div.person-profile-settings-history-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#person-profile-settings-history div.person-profile-settings-history-name {
    font-size: 1.75rem;
/*   padding-bottom: .4rem;*/
    margin-top: 0.5rem;
}

aside section#person-profile-settings-history div.person-profile-settings-history-links {
    margin-top: 2rem;
}

aside section#person-profile-settings-history div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION person-profile-settings-history */

/* MAIN person-profile-main */
main#person-profile-main div {
    align-items: center;
    background: #f1f3f5;
    display: flex;
    gap: 2rem;
    padding: 1rem;
    margin: 1rem 0;
}

main#person-profile-main div:first-of-type {
    margin-top: 0;
}

main#person-profile-main div:last-of-type {
    margin-bottom: 0;
}

main#person-profile-main div img {
    border: 0;
    border-radius: 50%;
    height: 3.125rem;
    width: 3.125rem;
}

main#person-profile-main div span.person-profile-main-item-updated-date {
    margin-left: auto;
    text-align: right;
}
/* MAIN person-profile-main */

/* PERSON PROFILE
 * PERSON PROFILE
 * PERSON PROFILE
 */


/* BIXFRANKONIS PROFILE
 * BIXFRANKONIS PROFILE
 * BIXFRANKONIS PROFILE
 */
 
/* ASIDE SECTION bixfrankonis-profile-header */
aside section#bixfrankonis-profile-header div.bixfrankonis-profile-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#bixfrankonis-profile-header div.bixfrankonis-profile-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#bixfrankonis-profile-header div.bixfrankonis-profile-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION bixfrankonis-profile-header */


/* ASIDE SECTION bixfrankonis-profile-settings-relationship */
aside section#bixfrankonis-profile-settings-relationship {
    background: #c3fae8;
}

aside section#bixfrankonis-profile-settings-relationship div {
    margin: 1rem 0;
}

aside section#bixfrankonis-profile-settings-relationship div.bixfrankonis-profile-settings-relationship-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#bixfrankonis-profile-settings-relationship div.bixfrankonis-profile-settings-relationship-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#bixfrankonis-profile-settings-relationship div.bixfrankonis-profile-settings-relationship-links {
    margin-top: 2rem;
}

aside section#bixfrankonis-profile-settings-relationship div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION bixfrankonis-profile-settings-relationship */

/* ASIDE SECTION bixfrankonis-profile-settings-tags */
aside section#bixfrankonis-profile-settings-tags {
    background: #c3fae8;
}

aside section#bixfrankonis-profile-settings-tags div {
    margin: 1rem 0;
}

aside section#bixfrankonis-profile-settings-tags div.bixfrankonis-profile-settings-tags-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#bixfrankonis-profile-settings-tags div.bixfrankonis-profile-settings-tags-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#bixfrankonis-profile-settings-tags div.bixfrankonis-profile-settings-tags-links {
    margin-top: 2rem;
}

aside section#bixfrankonis-profile-settings-tags div:last-child {
    margin-bottom: 0;
}
/* ASIDE SECTION bixfrankonis-profile-settings-tags */

/* MAIN bixfrankonis-profile-main */
main#bixfrankonis-profile-main div {
    align-items: center;
    background: #f1f3f5;
    display: flex;
    gap: 2rem;
    padding: 1rem;
    margin: 1rem 0;
}

main#bixfrankonis-profile-main div:first-of-type {
    margin-top: 0;
}

main#bixfrankonis-profile-main div:last-of-type {
    margin-bottom: 0;
}

main#bixfrankonis-profile-main div img {
    border: 0;
    border-radius: 50%;
    height: 3.125rem;
    width: 3.125rem;
}

main#bixfrankonis-profile-main div span.bixfrankonis-profile-main-item-updated-date {
    margin-left: auto;
    text-align: right;
}
/* MAIN bixfrankonis-profile-main */

/* BIXFRANKONIS PROFILE
 * BIXFRANKONIS PROFILE
 * BIXFRANKONIS PROFILE
 */

/* EXPLAINER SETTINGS
 * EXPLAINER SETTINGS
 * EXPLAINER SETTINGS
 * /

/* ASIDE SECTION explainer-settings-header */
aside section#explainer-settings-header div.explainer-settings-header-intro {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

aside section#explainer-settings-header div.explainer-settings-header-display-name {
    font-size: 1.75rem;
    margin-top: 0.5rem;
}

aside section#explainer-settings-header div.explainer-settings-header-statistics {
    margin-top: 2rem;
    margin-bottom: 0;
}
/* ASIDE SECTION explainer-settings-header */

/* ASIDE SECTION explainer-one */
aside section#explainer-one {
    margin-top: 0;
    padding: 0 1rem;
    text-align: justify;
}

/* ASIDE SECTION explainer-one */

/* MAIN explainer-settings-main */
main#explainer-settings-main section#explainer-two {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: justify;
}

main#explainer-settings-main section#explainer-two p:first-of-type {
    margin-top: 0;
}

main#explainer-settings-main div {
    align-items: center;
    background: none;
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

main#explainer-settings-main div:first-of-type {
    margin-top: 0;
}

main#explainer-settings-main div:last-of-type {
    margin-bottom: 0;
}

main#explainer-settings-main div img {
    background: none;
    border: 0;
    border-radius: 0;
    height: 1.625rem;
    width: auto;
}

main#explainer-settings-main div span:last-child {
    margin-left: auto;
}
/* MAIN explainer-settings-main */

/* EXPLAINER SETTINGS END
 * EXPLAINER SETTINGS END
 * EXPLAINER SETTINGS END
 * /

/* ASIDE SECTION rules */
aside section#rules {
    background: #c3fae8;
}
/* ASIDE SECTION rules */

/* Main #index-main colors */
main#index-main div#gideon-nav {
    background: #dbe4ff;
}

main#index-main div#bix-frankonis {
    background: #ffe3e3;
}

main#index-main div#eliot-rosewater {
    background: #c5f6fa;
}

main#index-main div#mahit-dzmare {
    background: #ffe8cc;
}

main#index-main div#fatma-el-shaarawi {
    background: #ffdeeb;
    opacity: 0.5;
}

main#index-main div#sunny-nwazue {
    background: #ffe8cc;
    opacity: 0.5;
}

/* Footer */
footer {
    /*   background: #f1f3f5;*/
    grid-area: footer;
    margin: 0 1rem;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "footer";
    }
    aside section#explainer-one p:last-of-type {
        margin-bottom: 0;   
    }
}

@media (max-width: 640px) {
    main {
        margin-top: 0;
    }
    main *:first-child {
        margin-top: 0;
    }
    main#index-main div.index-main-item,
    main#index-main a div.index-main-item,
    main#profile-settings-main div.profile-settings-main-item,
    main#network-settings-main div.network-settings-main-item,
    main#person-profile-main div.person-profile-main-item,
    main#bixfrankonis-profile-main div.bixfrankonis-profile-main-item {
        gap: 0.75rem;
    }
}

@media (min-width: 1536px) {
    body {
        margin: 1rem auto;
        width: 80%;
    }
}