@font-face {
    font-family: "pilowlava";
    src: URL("fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2")
        format("woff2");
}

@font-face {
    font-family: "spacegrotesk";
    src: URL("fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Regular.woff2")
        format("woff2");
    src: URL("fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Bold.woff2")
        format("woff2");
    src: URL("fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Light.woff2")
        format("woff2");
    src: URL("fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Medium.woff2")
        format("woff2");
    src: URL("fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-SemiBold.woff2")
        format("woff2");
}

@font-face {
    font-family: "space-mono";
    src: URL("fonts/space-mono/SpaceMono-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "uncut-sans";
    src: URL("fonts/uncut-sans/Webfonts/UncutSans-Regular.woff2")
        format("woff2");
}

:root {
    --color-primary: #ff5053;
    --color-highlight: #fef2ff;
    --color-accent-a: #b2aaff;
    --color-accent-b: #6a5fdb;
    --color-accent-c: #29114c;
    --color-accent-d: #261a66;
    --color-accent-e: #190b2f;
    --color-background: #0f000a;
}

body,
html {
    font-family: "uncut-sans";
    background: var(--color-background);
    color: var(--color-highlight);
}

::selection {
    background: var(--color-accent-b);
    color: var(--color-highlight);
}

h1 {
    font-family: "pilowlava";
    color: var(--color-primary);
    margin: 0rem;
}

h2,
h3,
h4 {
    margin: 0rem;
    font-family: "spacegrotesk";
    color: var(--color-accent-b);
}

header,
main,
footer {
    max-width: 800px;
    padding: 1rem 0;
    margin: 2.5rem auto;
}

header {
    border-bottom: 4px dashed var(--color-accent-c);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

footer {
    border-top: 4px dashed var(--color-accent-c);
    text-align: center;
}

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

ul > li {
    padding: 0.1rem 0;
    font-size: 0.9rem;
}

code {
    font-family: "space-mono";
    padding: 0.05rem 0.25rem;
    border-radius: 0.25rem;
    background: var(--color-accent-d);
}

button {
    margin: 1rem 0;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    background: var(--color-accent-c);
    color: var(--color-highlight);
    border: 2px solid var(--color-accent-b);
    transition: color 100ms ease-in-out;
    cursor: pointer;
}

button:hover {
    color: var(--color-primary);
    transition: color 100ms ease-in-out;
}

hr {
    margin: 2rem 0;
    border: none;
    border-top: 4px dashed var(--color-accent-c);
}

strong {
    font-family: "spacegrotesk";
}

#version {
    font-family: "space-mono";
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-highlight);
    background: var(--color-accent-b);
    padding: 0.25rem 0.75rem;
    margin: -0.5rem -1rem;
    border-radius: 2rem;
    vertical-align: top;
}

.infobox {
    margin: 1rem 0;
    border: 2px dashed var(--color-accent-b);
    border-radius: 0.25rem;
    padding: 1rem;
}

#title {
    font-size: 4rem;
}

/* ------------ */
/* Card Styling */
/* ------------ */

#cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.card {
    text-wrap: nowrap;
    width: 85mm;
    height: 55mm;
    box-sizing: border-box;
    position: relative;

    padding: 2.5mm;
    background: var(--color-background);
    z-index: 2;
}

.card > .outline {
    border: 2px dashed var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#card-front {
    background-image: url("assets/grids/grid-6x6.svg");
    background-position: center;
    background-size: 8rem;
    outline: none;
}

#card-front > #header {
    height: 15mm;
}

#card-front > #content {
    height: 35mm;
}

#card-front > img {
    position: absolute;
    opacity: 0.5;
    top: 0;
    right: 0;
    width: 60%;
    z-index: -1;
}

#card-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#card-back > img {
    width: 75%;
}

#logo-mono {
    display: none;
}

#cards.bw .card * {
    background: white;
    color: black;
}

#cards.bw #card-front img {
    display: none;
}

.bw #card-back,
.bw #card-front {
    background: white;
}

#cards.bw .card code {
    background: black;
    color: white;
}

.bw #logo {
    display: none;
}

.bw #logo-mono {
    display: block;
}