:root {
    --light-base0B-00: #1b779300;
    --light-base0B-ff: #1b7793ff;
    --dark-base0B-00: #81c3dd00;
    --dark-base0B-ff: #81c3ddff;

    --link-gap: 0.3em;
}

main {
    padding: 2em;
    display: flex;
    gap: 2em;
    align-items: center;
    flex-direction: column;
}

main svg {
    --logo-width: 6em;
    fill: currentColor;
    width: var(--logo-width);
    height: calc(var(--logo-width) * 180.9 / 161.8);
}

nav {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: flex-start;
}

nav a {
    font-size: 1.5em;
    padding: 0 var(--link-gap);
    white-space: nowrap;
    text-decoration: none;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: 0.2em;
    border-color: transparent;
}

@keyframes border-opacity-light {
    from { border-bottom-color: var(--light-base0B-00) }
    to { border-bottom-color: var(--light-base0B-ff); }
}

nav a:hover {
    animation-name: border-opacity-light;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

nav a.external::after {
    content: "";
    mask-image: url("symbols.svg#external-link");
    mask-repeat: no-repeat;
    background-color: var(--light-foreground);
    margin-left: var(--link-gap);
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
}

@media screen and (min-width: 60em) {
    main {
        flex-direction: row;
    }

    main svg {
        --logo-width: 12em;
    }
}

@media (prefers-color-scheme: dark) {
    @keyframes border-opacity-dark {
        from { border-bottom-color: var(--dark-base0B-00) }
        to { border-bottom-color: var(--dark-base0B-ff); }
    }

    nav a:hover {
        animation-name: border-opacity-dark;
    }

    nav a.external::after {
        background-color: var(--dark-foreground);
    }
}