:root {
    --font-color: #0a0a0a;
    --bg-color: #ffffff;
    --link-color: #3f6f73;
}

@media (prefers-color-scheme: dark) {
    :root {
        --font-color: #f5f5f5;
        --bg-color: #000000;
        --link-color: #6f9fa3;
    }
}

body {
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        "Noto Sans",
        "Liberation Sans",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    background-color: var(--bg-color);
    color: var(--font-color);
}

h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.container {
    max-width: 600px;
    margin: 5vw auto;
    padding: 0 0.5rem;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.contact {
    div {
        padding-right: 0.25rem;

        &:not(:first-child)::before {
            content: "//";
        }
    }
    a,
    a:visited,
    a:hover,
    a:active {
        padding: 0.25rem;
        color: var(--link-color);
        text-decoration: none;
    }

    a:hover {
        color: var(--bg-color);
        background-color: var(--font-color);
    }
}

.cv {
    width: 100%;

    td {
        vertical-align: top;
        padding-bottom: 0.5rem;
    }

    tr > td:first-child {
        width: 6ch;
    }
    tr > td:nth-child(2) {
    }

    .cv-comp {
        font-weight: bold;
    }

    a,
    a:visited,
    a:hover,
    a:active,
    a:hover {
        color: inherit;
        text-decoration: inherit;
    }
}

.link-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.75rem;
}

.link {
    a,
    a:visited,
    a:hover,
    a:active {
        padding: 0.25rem;
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        color: var(--bg-color);
        background-color: var(--font-color);
    }
}

.plain-link,
.plain-link:visited {
  color: var(--link-color);
  text-decoration: none;
}

.plain-link:hover {
  color: #28565a;
}

img {
  width: 50%;
  height: auto;
  display: block;
}