@font-face {
    font-family: SpaceMono;
    src: url("/static/font/spacemono/SpaceMono-Regular.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: SpaceMono;
    src: url("/static/font/spacemono/SpaceMono-Italic.ttf");
    font-style: italic;
    font-weight: normal;
}
@font-face {
    font-family: SpaceMono;
    src: url("/static/font/spacemono/SpaceMono-Bold.ttf");
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: SpaceMono;
    src: url("/static/font/spacemono/SpaceMono-BoldItalic.ttf");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: Pacifico;
    src: url("/static/font/pacifico/Pacifico-Regular.ttf");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: Josefin Sans;
    src: url("/static/font/josefin-sans/JosefinSans-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
    --color-dark-peach: #f79256;
    --color-light-peach: #fbd1a2;
    --color-mint: #7dffb6;
    --color-faded-blue: #1d4e89;
    --color-light-blue: #00b2ca;
}

body{
    background-color: black;
    color: white;
    font-family: "Josefin Sans", sans-serif;
}

.monospace {
    font-family: SpaceMono, monospace;
}

.font-pacifico {
    font-family: Pacifico, serif;
}

.header-bar {
    --bs-bg-opacity: 1;
    background-color: var(--color-faded-blue);
    background-image: none;
}

.colored-link {
    text-decoration: none;
    color: var(--color-light-peach);
}

.colored-link:hover {
    color: var(--color-mint);
}