:root {
    --bg: #282f3a;
    --bg2: #161b22;
    --nav: #525255;
    --fg: #c9d1d9;
    --muted: #a3aeb9;
    --link: #EFA94A;
    --link-hover: #ff7b00;
    --border: #20232a;
    --cool: lime;
    --two: #82aafa;
    --tri: #ff3300;

    --width: min(80vw, 950px);
}

html {
    overflow-x: hidden;
}

.cool {
    color: var(--cool);
}

nav {
    width: 100%;
    position: sticky;
    top: 0;
    overflow-x: auto;
    background-color: var(--nav);
    padding: 0.75em;
    box-sizing: border-box;
    box-shadow: 0px 0.3em 0px var(--bg2);
    z-index: 10;
}

nav a {
    padding: 0.5em;
    color: var(--one);
    text-decoration: none;
}

nav a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

body {
    margin: 0;
    margin-top: -1em;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

header {
    margin: 3em 0em 3em 0em;
    max-width: 90%;
}

a {
    color: var(--link);
    font-size: min(1em, 3.3vw);
    text-decoration: none;
}

img.avatar {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-radius: 0.1em;
}

h1 {
    font-size: min(8em, 15vw);
    margin: 0.25em 0em 0em 0em;
    padding: 0.2em;
    line-height: 0.5em;
    box-shadow: inset 0px 0px 0px 0.05em var(--nav), 0px 0.05em 0px var(--border);
    white-space: nowrap;
    border-radius: 0.2em;
}

h2 {
    font-size: min(3em, 7.5vw);
    margin: 0.5em 1em 0.25em 1em;
}

p {
    max-width: var(--width);
    margin: 0.5em;
    text-indent: 2em;
    text-align: left;
}

p.tagline {
    text-indent: 0em;
    color: var(--muted);
    font-size: min(1.28em, 2.4vw);
    margin-left: 8.5em;
    margin-top: -2.35em;
    padding-bottom: 0.5em;
    text-align: center;
}

.links {
    margin: 1em;
}

.links a {
    color: var(--link);
    margin: 0 0.5em;
    text-decoration: none;
}

.links a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.web-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1.5em;
    max-width: var(--width);
    width: 100%;
    margin: 3em auto;
}

.project {
    user-select: none;
    background: var(--border);
    padding: 1em;
    transition: all 0.1s ease-out;
    box-shadow: 0px 0.4em 0px var(--border), inset 0px 0px 0px 0.3em var(--nav);
    border-radius: 1em;
    vertical-align: middle;
    color: var(--link);
}

.project:hover {
    color: var(--link-hover);
    transform: translateY(-0.4em);
    box-shadow: 0px 0.8em 0px var(--border), inset 0px 0px 0px 0.3em var(--nav);
}

.project:active {
    color: var(--muted);
    transform: translateY(0.2em);
    box-shadow: 0px 0.2em 0px var(--border), inset 0px 0px 0px 0.3em var(--nav);
}

#nopress {
    color: var(--muted);
}

footer {
    width: 100%;
    background-color: var(--bg2);
    color: var(--muted);
    border-top: 0.3em solid black;
    font-size: 0.9em;
}

footer p {
    text-indent: 0em;
    padding: 0.5em;
    padding-top: 0.25em;
    max-width: 100%;
    text-align: center;
}