@font-face {
    font-family: 'Chicago FLF';
    src: url('chicagoflf.woff2') format('woff2'),
         url('chicagoflf.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Typography */
   --font-default: system-ui, -apple-system, Helvetica, Arial, sans-serif, "Apple Color Emoji";
   --font-display: "Chicago FLF",system-ui, -apple-system, Helvetica, Arial, sans-serif, "Apple Color Emoji";

    /* Base colors */
    --bg: #D2B2D8;
    --bg-body: #fff;
    --text-body: #392467;

    /* Great Value Bootstrap */
    --primary: #c084fc;
    --secondary: #f472b6;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-default);
}

.container {
    background-color: var(--bg);
    height: 100%;
    display: flex;
    flex-direction: column;
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

nav a, button a {
    color: var(--text-body);
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    padding: 2px;
}

a:hover,
a:focus {
    background: var(--bg-body);
    text-decoration: none;
    transition: ease-in 0.1s, ease-out 0.1s;
    outline: 2px solid var(--bg-body);
    outline-offset: 2px;
}

.error-pattern {
    font-size: 100px;
    font-weight: bold;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--bg-body);
    border-top:var(--text-body) 2px solid;
    border-bottom: var(--text-body) 2px solid;
}

.content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: var(--text-body);
}

nav.content {
    font-size: 24px;
    font-style: italic;
}