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

:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg-dim: light-dark(#f5f3f6, #201e20);
  --bg0: light-dark(#ece8ef, #29252b);
  --bg1: light-dark(#e0dbe4, #332f36);

  /* Accents */
  --red: light-dark(#c61f4b, #f8547d);
  --green: light-dark(#5c8f3a, #9ace66);
  --blue: light-dark(#3b9fb0, #71cad6);
  --primary: light-dark(#3b9fb0, #71cad6);

  /* Foregrounds */
  --fg: light-dark(#1a141f, #e3dbe7);
  --grey: light-dark(#4b4352, #b1a6bb);
}

body {
    background-color: var(--bg0);
    color: var(--fg);
    font-family: sans-serif;
    margin: 0;
}

main {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

header {
    position: relative;
}

#content-container {
    display: flex;
    justify-content: center;
    flex: 1;
}

#content {
    width: min(calc(100vw - 2em), max(1200px, 63vw));
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 5em;
    padding-top: 5em; 
    padding-bottom: 5em; 
    background-color: var(--bg-dim);
}

#navigation {
    display: flex;
    justify-content: center;
    padding-top:     1em;
    padding-bottom:  3em;
}

#navigation > .links {
    /* display: flex; */
    display: grid;

    font-size: 1.8em;
    /* font-family: monospace; */

    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    gap: 4em;
}

@media screen and (max-width: 800px) {
    #navigation > .links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

#navigation > .links > a {
    color: var(--fg);
    text-decoration: none;
    white-space: nowrap;
}

#navigation a.active{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/*********************/
/* Shared components */
/*********************/

/* Project item */
.project-item {
    display: flex;
    padding: 1em;
    border-radius: 1em;
    background-color: var(--bg-dim);
    gap: 1em;

    color: var(--fg);
    text-decoration: none;

    transition: all 300ms ease;
}

.project-item:hover{
    text-decoration: underline;
    transform: scale(103%);
    color: var(--primary);
    /* background-color: var(--bg1); */
}

.project-item > .thumbnail {
    background-color: var(--bg1);
    border-radius: 1em;
    object-fit: cover;

    min-width:  10em;
    min-height: 10em;
    max-width:  10em;
    max-height: 10em;
}

.project-item > .content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-item > .content > .text {
    flex: 1;
}

.project-item > .content > .text > .title {
    font-size: 1.5em;
    font-weight: bold;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item > .content > .text > .description {
    max-height: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
}