/** custom colors */
:root
{
    --theme-black: #121212;
    --theme-blue: #5454af;
    --theme-darkgray: #555;
    --theme-gray: #999;
    --theme-green: #54af54;
    --theme-red: #af5454;
    --theme-white: #eee;
    --theme-yellow: #bfbf54;
}

/** universal box-sizing */
*, *::before, *::after
{
    /* include padding & borders in element width/height */
    box-sizing: border-box;
    margin: 0;
    /* overflow: hidden; */
    padding: 0;
    /* user-select: none; */
}

/** debugging */
*:hover:not(:has(*:hover))
{
    background: #ffeeee;
}

/** html: no scrollbars */
html
{
    /* overflow: hidden; */
}

body
{
    background: var(--theme-white);
    color: var(--theme-black);
    display: flex;
    flex-direction: column;
    font-family: Calibri, sans-serif;
    font-size: 1rem;
    /** full viewport */
    height: 100vh;
    line-height: 1.2;
}

/** sole child of body, centered within it and 90% width */
main
{
    /* background: #ddffff; */
    /** center */
    margin: 0 auto;
    width: 80%;
}

header
{
    margin: 0.5rem 0 2rem 0;
    text-align: center;
}

#intro
{
    text-align: left;
    width: 50%;
}

h3
{
    font-weight: normal;
    /* color: red; */
}

section
{
    display: flex;
    margin: 3rem 0;
}

section>*
{
    flex-basis: 50%;
}

/** text */
aside
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
}

figure
{
    display: flex;
    justify-content: center;
}

/* figure>iframe
{
    margin: 0 auto;
    object-fit: contain;
    height: 100%;
} */

figure>img
{
    margin: 0 auto;
    object-fit: contain;
    width: 80%;
}

#dp
{
    width: 20%;
}

li
{
    margin-bottom: 0.5rem;
}