:root {
    color-scheme: light dark;

    --text-color: black;
    --accent-color: white;
    --bg-color: rgb(212, 218, 222);
    @media (prefers-color-scheme: dark) {
        --text-color: white;
        --accent-color: rgb(13, 17, 23);
        --bg-color: rgb(23, 27, 33);
    }
}

@font-face {
    font-family: 'HARMONYOS_SANS_SC_MEDIUM';
    src: url('HarmonyOS_Sans_SC_Medium.ttf');
}

.color_backing {
    color: var(--text-color);
    background: var(--bg-color);
}

.color_accent {
    border-color: var(--accent-color);
    color: var(--text-color);
    background: var(--accent-color);
}

.color_menu {
    color: var(--text-color);
}

.hoverable_menu:hover {
    background: var(--accent-color);
    border-bottom-color: var(--text-color);
}

.hoverable_border:hover {
    border-color: var(--text-color);
}

html, body {
    margin: 0px;
}

body {
    font-family: 'HarmonyOS Sans SC', Arial, Helvetica, sans-serif;
    font-size: 1rem;
}
@media only screen and (max-width: 48rem) {
    body {
        font-size: 1rem;
    }
}

/* TOP NAVBAR */

#menu_container {
    padding-bottom: 1rem;
}

#menu_header {
    position: sticky;
    top: 0;
    z-index: 999;

    background-color: var(--bg-color);

    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;

    padding: 0 8vw;
}
@media only screen and (max-width: 25rem) {
    #menu_header {
        padding: 0 2rem;
    }
}

#menu_links {
    display: grid;
    grid-auto-flow: column;
    list-style-type: none;
    column-gap: 0rem;
    padding: 0;
    margin: 0;
}

.menu_link_item {
    width: min-content;
    white-space: nowrap;
    padding: 1rem;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: rgba(0, 0, 0, 0);
}

#menu_links > a {
    text-decoration: none;
}

.hamburger_btn {
    display: none;
    font-size: 2rem;
    font-weight: bold;
    user-select: none;
}

#hamburger_state {
    display: none;
}

#hamburger_state:checked ~ #menu {
    display: block;
}

@media only screen and (max-width: 48rem) {
    #hamburger_menu {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
    }

    #menu_header {
        flex-direction: column;
        padding: 20px;
    }
    #menu_links {
        grid-auto-flow: row;
        list-style-type: none;
        row-gap: 0;
        column-gap: 0;
        justify-items: center;
    }
    #menu {
        display: none;
    }

    #hamburger_state:checked ~ #hamburger_menu > #hamburger_btn_open {
        display: none;
    } 
    
    #hamburger_state:checked ~ #hamburger_menu > #hamburger_btn_close {
        display: block;
    } 
    
    #hamburger_state:not(:checked) ~ #hamburger_menu > #hamburger_btn_open {
        display: block;
    } 
    
    #hamburger_state:not(:checked) ~ #hamburger_menu > #hamburger_btn_close {
        display: none;
    } 
}

/* END TOP NAVBAR */

/* PREFACE */

#preface_container {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 8vw;
    padding-right: 8vw;
}
@media only screen and (max-width: 25rem) {
    #preface_container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

#preface {
    display: flex;
    flex-flow: row wrap;
}

#pfp_holder {
    margin: 0px;
    padding: 0px;
    margin-right: 1rem;
}

.img_round {
    height: 10rem;
    width: 10rem;
    
    border-radius: 9999px;
}

#preface_title {
    margin-top: 0px;
    margin-bottom: 0.5rem;
    
    font-size: 2rem;
}

#preface_holder {
    border: solid;
    border-width: 0px;
    border-radius: 10px;

    padding: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.preface_tagline {
    margin: 0px;
    margin-bottom: 0.5rem;

    font-size: 1rem;
}

#connections {
    margin-top: 0.75rem;

    display: flex;
    flex-flow: row wrap;
}

.connection_item {
    margin-right: 0.75rem;
}

.connection_logo {
    height: 2.0rem;
    width: 2.0rem;
}
@media (prefers-color-scheme: dark) {
    .connection_logo {
        filter:invert(100%)
    }
}

/* END PREFACE */

#all_content {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    padding-left: 8vw;
    padding-right: 8vw;
}
@media only screen and (max-width: 25rem) {
    #all_content {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

#content_title {
    font-size: 2rem;
    text-align: center;
}

#list_content {
    display: flex;
    flex-flow: column;
}

/* PORTFOLIO ITEMS */

#portfolio_item_container {
    display: flex;
    flex-flow: column;
}

#portfolio_item_container > a {
    font-weight: normal;
    text-decoration: none;

    margin: 10px;
}

.portfolio_item {
    border-style: solid;
    border-width: 2px;
    /* border-radius: 10px; */

    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.portfolio_item_md {
    padding: 10px;
    flex: 4 0 10rem;

    box-sizing: border-box;
    /* max-height: 10rem; */
    /* overflow-x: hidden;
    overflow-y: auto; */
}

.portfolio_item_img_container {
    flex: 1 0 12.5rem;
    
    box-sizing: border-box;
    /* max-height: 10rem; */

    overflow: hidden;
}

.portfolio_item_img_centerer {
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    
    position: relative;
    overflow: hidden;
}

.portfolio_item_img {
    /* object-fit: contain; */
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

    display: block;
    margin: auto;

    height: auto;
    width: 100%;
    align-self: center;
}

@media only screen and (max-width: 48rem) {
    .portfolio_item {
        flex-direction: column;
    }
    .portfolio_item_img_container {
        max-width: none;
    }
}

/* END PORTFOLIO ITEMS */

#item_content {
    margin-top: 1rem;
    padding: 1rem;
}

#home_sections {
    display: flex;
    flex-flow: row wrap;
}
@media only screen and (max-width: 48rem) {
    #home_sections {
        display: flex;
        flex-flow: column wrap;
    }
}

.home_block {
    margin-bottom: 1rem;
}

#home_about {
    text-align: left;
}

.home_section {
    flex: 1 0 0;
    padding: 0.5rem;
}

.home_section > h1 {
    margin: 0; 
}