:root {
    --accent: #9b9bff;
    --background: white;
    --onBackground: black;
    --surface: #f4f4f4;
    --outline: #e0e0e0;
    --light: #666666;
    --link: #0069C2;
    --icons: none;
    --inverseIcons: invert();
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #9b9bff;
        --background: black;
        --onBackground: white;
        --surface: #202020;
        --outline: #3a3a3a;
        --light: #AAAAAA;
        --link: #8CB4FF;
        --icons: invert();
        --inverseIcons: none;
    }

    .button:hover, .button:active {
        .icon { filter: var(--inverseIcons); transition: all 0.2s ease; }
    }
}

@font-face { 
    font-family: "title";
    src: url("media/fonts/bricolagegrotesque.woff2")format("woff2");
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--background);
    margin: 0;
}

main {
    margin-top: 6em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 18em);
}

/* TEXT */
h1, h2, h3 {
    font-family: 'title', sans-serif;
    font-weight: 400;
    color: var(--onBackground);
}

h1{
    font-size: 2.5em;
    margin-bottom: 0.25em;
    margin-top: 0;
}

h2{
    font-size: 2em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.6em;
    margin-bottom: 0.5em;
}

p, ol, ul, li, .bold, .light, .credit, .monospace {
    font-family: system-ui, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
    margin-top: 0;
    color: var(--onBackground);
    flex-wrap: wrap;
}

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

.bold {
    font-weight: 800;
}

.italic {
    font-style: italic;
}

.light, .credit {
    color: var(--light);
}

.credit {
    font-style: italic;
}

.monospace {
    font-family: ui-monospace, monospace;
    background-color: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 0.5em;
    padding: 0.5em;
}

li {
    padding-left: 0.5em;
}

.link_title {
    text-decoration: underline 4px var(--accent);
    transition: all 0.2s ease-out;
}

.link_title:hover {
    margin-right: 0.5em;
    transition: all 0.2s ease-out;
}

hr {
    width: 100%;
    border: none;
    border-top: solid 2px var(--outline);
}

.card_title, .card_text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0.5em;
    margin-bottom: 0;
    transition: all 0.2s ease-out;
}

.card_text {
    color: var(--light);
    margin-bottom: 1em
}

/* CONTAINERS */
.box, .card, .column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.box {
    padding: 0 1.25em 0 1.25em;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: var(--custom_height);
}

.card {
    padding: 0;
    position: relative;
    bottom: 0;
    left: 0;
    filter: drop-shadow(0 0 0 var(--surface));
    background-color: var(--surface);
    border-radius: 1.5em;
    border: 1px solid var(--outline);
    transition: all 0.2s ease-out;
}

.card:hover, .card:active {
    bottom: 1em;
    left: 1em;
    filter: drop-shadow(-1em 1em 0 var(--accent));
    background-color: var(--accent);
    transition: all 0.2s ease-out;
    border: none;

    .card_title, .card_text {color: black; transition: all 0.2s ease-out;}
}

.spacer {
    width: var(--size);
    height: var(--size);
}

@media (min-width: 768px) {
    .box {
        flex-direction: row;
        max-width: 1240px;
    }

    .column {
        width: var(--custom_width);
    }

    .row {
        flex-wrap: nowrap;
    }
}

/* ALIGNMENT */
.align_left, .align_horizontal, .align_right {
    display: flex;
    flex-direction: column;
    width: 100%
}

.align_top, .align_vertical, .align_bottom {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.align_left, .align_top {
    align-items: flex-start;
}

.align_horizontal, .align_vertical {
    align-items: center;
}

.align_right, .align_bottom {
    align-items: flex-end;
}

/* MEDIA */
#portrait {
    max-width: min(100%, 200px);
    max-height: 200px;
    border-radius: 100%;
}

.image_custom {
    max-width: min(var(--custom_size), 90%);
    max-height: var(--custom_size);
}

.icon {
    filter: var(--icons);
}

.icon:hover, .icon:active {
    opacity: 0.75;
    filter: opacity(0.75);
    -webkit-filter: opacity(0.75);
    filter: var(--icons);
}

.card_image {
    width: 100vw;
    max-width: 100%;
    aspect-ratio: 16/10;
    border-radius: 1.5em 1.5em 0 0;
    object-fit: cover;
}

.gallery {
    max-width: 100%;
    border-radius: 1em;
}

/* HEADER & FOOTER */
header, footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#header_box, #footer_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 5em;
    padding: 0 1.5em 0 1.5em;
}

#header_box {
    gap: 1em;
    margin: 1em 3em 0 3em;
}

#footer_box {
    margin: 0 3em 4em 3em;
}

#header_title {
    font-family: 'title', sans-serif;
    font-size: 1.8em;
    font-weight: 400;
    text-decoration: none;
    color: var(--onBackground);
    transition: all 0.1s ease;
}

#header_title:hover, #header_title:active {
    color: var(--accent);
    transition: all 0.1s ease;
}

#header_nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: var(--surface);
    border: solid var(--outline) 1px;
    border-radius: 5em;
    padding: 0.5em 0.6em 0.5em 0.6em;
    gap: 0.25em;
}

.nav_button, .nav_button_active, .button, .button_active {
    display: flex;
    flex-direction: row;
    align-items: center;

    font-family: 'title', sans-serif;
    font-size: 1em;
    font-weight: 400;
    text-decoration: none;
    color: var(--onBackground);
    
    background-color: color-mix(in srgb, var(--onBackground), transparent 100%);
    padding: 0.5em 0.8em 0.5em 0.8em;
    border-radius: 1.5em;

    transition: all 0.2s ease;
}

.nav_button_active {
    color: black;
    background-color: var(--accent);
}

.nav_button:hover {
    background-color: color-mix(in srgb, var(--onBackground), transparent 92%);
    transition: all 0.2s ease;
}

.footer_item {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media (min-width: 922px) {
    #header_box, #footer_box {
        flex-direction: row;
        align-items: center;
        max-width: 1240px;
        margin: 0 3em 0 3em;
        gap: 0;
    }

    #header_nav {
        gap: 0.5em;
    }

    .nav_button, .nav_button_active {
        font-size: 1.2em;
    }
}

/* BUTTON */
.button, .button_active {
    font-family: system-ui, sans-serif;
    background-color: var(--surface);
    padding: 0.6em 1em 0.6em 1em;
}

.button:hover, .button:active, .button_active {
    background-color: var(--accent);
    color: black;
    transition: all 0.2s ease;

    .light { color: black; transition: all 0.2s ease; }
}



.btt {
    --offset: 50px; 
    bottom: 2em;
    right: 2em;
    position: sticky;
    place-self: end;
    padding: 0.8em 0.9em 0.7em 0.9em;
    background-color: var(--accent);
    border-radius: 3em;
    transition: all 0.1s ease;
}

.btt:hover, .btt:active {
    background-color: var(--onBackground);
    transition: all 0.1s ease;
    .bttimg {
        filter: var(--inverseIcons);
    }
}