:root {
    --foreground-primary: #ee8a2c;
    --foreground-secondary: #4dc8dd;
    --foreground-visited: #9d73e0;
    --foreground-muted: #b4b4b4;
    --background-primary: #313131;
}

* {
    margin: 0;
    padding: 0;
    color: var(--foreground-primary);
    background-color: var(--background-primary);
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    color: var(--foreground-secondary);
    text-decoration: none;
    transition: color 0.15s ease,
                text-shadow 0.15s ease;
}

a:hover {
    filter: saturate(120%);
    text-shadow: 0 0 2px;
}

a:visited {
    color: var(--foreground-visited);
}

/*
 * Layout Classes
 */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.no-wrap {
    flex-wrap: nowrap;
}

.shrink {
    flex: 0 1 auto;
}

.grow {
    flex: 1 0 auto;
}

.no-shrink {
    flex-shrink: 0;
}

.no-grow {
    flex-grow: 0;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

.align-start {
    align-items: start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.align-baseline {
    align-items: baseline;
}

.align-baseline-last {
    align-items: last baseline;
}

.align-stretch {
    align-items: stretch;
}

.space-left {
    margin-left: 1em;
}

.space-right {
    margin-right: 1em;
}

.space-top {
    margin-top: 1em;
}

.space-bottom {
    margin-bottom: 1em;
}

/*
 * Text Styling Classes
 */
.pixelated {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

.mono {
    font-family: monospace;
    font-size: 1.2em;
}

.blue {
    color: var(--foreground-secondary);
}

.muted {
    color: var(--foreground-muted);
}

/*
 * Link List
 */
.link-list {
    list-style: none;
    width: min(25rem, 100vw - 2rem);
}

.link-list li + li {
    margin-top: 1.5em;
}

.link-summary {
    margin-top: 0.4em;
    font-family: monospace;
    line-height: 1.5;
    color: var(--foreground-muted);
}