:root {
    /* colors from catppuccin.com */
    --crust: #11111b;
    --mantle: #181825;
    --base: #1e1e2e;
    --surface0: #313244;
    --surface1: #45475a;
    --surface2: #585b70;
    --overlay0: #6c7086;
    --overlay1: #7f849c;
    --overlay2: #9399b2;
    --subtext0: #a6adc8;
    --subtext1: #bac2de;
    --text: #cdd6f4;
    --lavendar: #b4befe;
    --blue: #89b4fa;
    --sapphire: #74c7ec;
    --sky: #89dceb;
}

body {
    background: var(--mantle);
}

h2 {
    color: var(--lavendar);
    font-family: Eina01, sans-serif;
    font-weight: 600;
}

p {
    color: var(--text);
    font-family: Eina01, sans-serif;
    font-weight: 600;
}

a {
    color: var(--sapphire);
    font-family: Eina01, sans-serif;
}

hr {
    border-style: solid;
    border-width: 2px;
    max-width: 90%;
    color: var(--surface0);
}

.fitwidth {
    width: 90%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.forehead {
    background-color: var(--base);
    margin-left: auto;
    margin-right: auto;
    display: flexbox;
    text-align: center;
    border-style: solid;
    border-color: var(--blue);
    border-width: 4px;
    border-radius: 12px;
    max-width: 90%;
    padding: 16px;
}

.face {
    background-color: var(--base);
    margin-top: 64px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    display: flexbox;
    text-align: left;
    border-style: solid;
    border-color: var(--lavendar);
    border-width: 3px;
    border-radius: 12px;
    max-width: 80%;
    padding: 16px;
}

footer {
    background-color: var(--crust);
    margin-top: 64px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    display: flexbox;
    text-align: center;
    border-style: dashed;
    border-color: var(--blue);
    border-width: 4px;
    border-radius: 12px;
    max-width: 80%;
    padding: 16px;
    padding-top: 4px;
}

.button {
    background-color: var(--mantle);
    color: var(--text);
    padding: 8px;
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    border-color: var(--blue);
    font-size: 16px;
    margin: 4px;
}

@media (min-width: 768px) {
}

.button:before,
.button:after {
}

.button:before {
}

.button:after {
}

.button:hover:not(:disabled):after {
    transition-timing-function: ease-in;
}

.button:active:not(:disabled) {
    color: #ccc;
}

.button:active:not(:disabled):after {
}

.button:disabled {
    cursor: default;
    opacity: 0.24;
}