/*
 * Copyright 2023, Ryan Pavlik <ryan@ryanpavlik.com>
 *
 * SPDX-License-Identifier: CC-BY-SA-4.0
 */

/* Andika */
@font-face {
    font-display: swap;
    font-family: 'Andika';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Andika-Regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'GentiumPlus';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/GentiumPlus-Regular.woff2') format('woff2');
}

:root {
    /* coolors "Ghost white" */
    --ghost-white: #e9ecf5;
    /* coolors "rose pompadour" */
    --rose-pompadour: #DC7F9B;
    /* coolors "smoky black" */
    --smoky-black: #141204;
    /* coolors "English Violet" */
    --english-violet: #60435f;

    --african-violet: #a393bfff;
    --alabaster: #f3efe2ff;
    --dark-slate-gray: #1f4742ff;
    --night: #0c0910ff;
    --vivid-sky-blue: #0acdffff;
    --raspberry: #d81159ff;

    --color-primary-0: #A377B1;
    /* Main Primary color */
    --color-primary-1: #D8C2DF;
    --color-primary-2: #BF9DCA;
    --color-primary-3: #8C579D;
    --color-primary-4: #763C89;

    --color-secondary-1-0: #E496B0;
    /* Main Secondary color (1) */
    --color-secondary-1-1: #F4D3DE;
    --color-secondary-1-2: #ECB6C8;
    --color-secondary-1-3: #D17191;
    --color-secondary-1-4: #B64C70;

    --color-secondary-2-0: #8D80B7;
    /* Main Secondary color (2) */
    --color-secondary-2-1: #CDC7E1;
    --color-secondary-2-2: #ADA4CE;
    --color-secondary-2-3: #6F61A3;
    --color-secondary-2-4: #55458E;
}

html {
    background: linear-gradient(180deg, var(--color-primary-1) 0%, var(--color-secondary-1-2) 100%);
}

body {
    font-family: 'Andika', Arial, Helvetica, sans-serif;
    margin: 5em;
    padding: 2em;
    border-radius: 0.5em;
    border-width: 0;
    border-style: solid;
    background-color: white;
    color: var(--night);
}

a {
    color: var(--color-secondary-2-4);
}

main,
section {
    margin: 1em;
}

h1,
h2 {
    font-family: 'GentiumPlus', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}

h1 {
    font-size: 80px;
    font-style: normal;
    background-color: var(--color-secondary-1-1);
    border-radius: 0.5em;
}

main {
    text-align: center;
}


ul {
    padding: 0;
    list-style-type: none;
}

ul li {
    border-color: var(--color-primary-0);
    border-width: 2px;
    border-radius: 0.25em;
    text-align: center;
    background-color: var(--color-primary-1);
    padding: 0.5em;
    margin-top: 0.25em;
}

footer {
    font-size: x-small;
    margin-top: 10em;
    padding: 4em;
    color: gray;
}

footer a {
    color: var(--color-secondary-2-3)
}