:root {
    --theme: #2d2118;
    --theme-alt: #2f5a5f;
    --theme-light: #385742;
    --theme-light-alt: #9cb1ae;
    --theme-dark: #111a1a;
    --theme-accent: #5c3b32;
    --theme-accent-light: #d9bdb6;
    
    --bg: color-mix(in oklab, var(--theme-dark) 55%, black);
    --accent: var(--theme-accent);
    --accent-dark: color-mix(in oklab, var(--accent) 60%, black);
    --accent-text: color-mix(in oklab, var(--accent) 25%, white);
    --alt: var(--theme-alt);
    --highlight: #F6B737;
    --dark: var(--theme-dark);
    --less-dark: color-mix(in oklab, var(--dark) 90%, white);
    --more-dark: color-mix(in oklab, var(--dark) 80%, black);
    --light: var(--theme-light);
    --faint: var(--theme-light-alt);
    --link: color-mix(in oklab, var(--theme-light) 50%, white);
    --border-radius: 1em;
    color: white;
}

body {
    margin: 0;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

nav.top-navbar {
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 10;

    & .top-navbar-links {
	display: flex;
	margin: 1em 0.5em;
	float: right;
	text-align: center;

	li {
	    padding: 0.5em 1em;
	    display: inline;
	}
    }

    a {
	color: white;
	text-decoration: none;
	transition: 0.2s;
	& :hover {
	    filter: brightness(70%);
	}
    }
}

.top-nav-home {
    position: absolute;
    height: 3ch;
    width: 3ch;
    margin: 1ch 2ch;
    white-space: nowrap;
    font-size: 1.4em;
    font-weight: bold;

    & img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform: translate(-0.5ch, 0.5ch);
    }
}

.container {
    width: 90ch;
    max-width: 80vw;
    margin: auto;
}

.hover-underline {
    & :after {
	content: '';
	display: block;
	border-bottom: 0.4em solid var(--alt);
	transform: scaleY(0);
	transition: transform 0.1s ease-in-out;
    }

    & :hover:after {
	transform: scaleY(1);
	transform-origin: 0% 0%;
    }
}

::selection {
    background: var(--highlight);
}

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

.blur {
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}

.hover {
    transition: 0.2s;

    &:hover {
	transform: scale(1.05);
    }
}

.box {
    display: block;
    transition: 0.25s;
    position: relative;
    padding: 2em;
    margin: auto;
    max-width: 80vw;
    background-color: var(--dark); /* rgba(16, 24, 24, 0.9 */
    margin-bottom: -2em;
    border-radius: var(--border-radius);
}

@keyframes floating {
    0% { transform: translate(0, 0px); }
    10% {transform: translate(2.5px, 2.5px);}
    25% { transform: translate(4px, 4px); }
    40% { transform: translate(2.5px, 4.5px);}
    50% { transform: translate(0, 5px); }
    75% { transform: translate(-3px, 4.7px); }
    90% { transform: translate(-2.2px, -1px); }
    100% { transform: translate(0, 0px); }
}

.floating {
    animation: floating 3s linear infinite;
}

@media screen and (max-aspect-ratio: 3/4.1) {
    :root {
	font-size: 1.5em;
    }
}

@media (prefers-reduced-motion) {
    .floating {
	animation: none !important;
    }
}