@import url("arrhmono.css");

:root {
	--color-secondary-bg: #223;
	--color-primary-bg: #001;
	--color-main: #eef;
}

html {
    background-color: var(--color-secondary-bg);
}

body {
    font-family: "Arrh Mono";
    background-color: var(--color-primary-bg);
    min-height: 100vh;
    color: var(--color-main);
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 70rem;
    font-size: 22pt;
}

.header-logo > h1 {
    display: inline-block;
    vertical-align: center;
    margin: 0;
    margin-top: 11pt;
}

.side-by-side {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.wormwood {
    color:#95ff00;
}

ul {
    list-style: "-> ";
}

nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav > ul > li {
    display: inline;
}

nav > ul > li::after {
    content: " | ";
}

nav > ul > li:last-child::after {
    content: "";
}

a:link {
  color: #FFD080;
  text-decoration: none;
}
a:visited {
  color: #ffbb45;
  text-decoration: none;
}
a:hover {
  color: #ff8011;
  text-decoration: underline;
}

[context]:not(a, .sus) {
	text-decoration: underline dashed 1pt;
	text-decoration-skip-ink: none;
	text-underline-offset: 2pt;
}

#context { /* see context.js ... for context ... on #context */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	transform: 
		translate(
			calc((var(--x) * 1px)	+	((var(--xFlip) * (100% + 2em)) + 1em)), 
			calc((var(--y) * 1px)	+	((var(--yFlip) * (100% + 2em)) + 1em))
		);
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
	background-color: var(--color-primary-bg);
	padding: 6pt;
	font-size: 16pt;
	border: dashed 1pt;
	
	&:not(.active) {
		opacity: 0;
	}
}

.special-contact {
    background-color: var(--color-main);
    color: var(--color-primary-bg);
}

footer {
    font-size: 0.75em;
}

.friend-buttons {
    display: flex;
    justify-content: center;
}

.seperator {
    border-bottom: 1px solid var(--color-main);
}

.fancy-header {
    text-align: center;
}

.fancy-header > span {
    background-color: var(--color-primary-bg);
    z-index: 1;
    position: relative;
}

.fancy-header::after {
    content: "";
    display: block;
    position: relative;
    border-bottom: 1px solid var(--color-main);
    bottom: 0.5em;
}

.project-container {
    min-height: 4em;
}

.project-container > h3, .project-container > p {
    margin: 0.3em 0;
}

.project-container 

.project-image {
    float: left;
    width: 4em;
    height: 4em;
    margin-right: 0.5em;
}