:root {
    --font-size: 24px;
    --h1: 40px;
    --h2: 34px;
    --h3: 25px;
    --h4: 18px;
    --h5: 16px;

    --side-color: #9dc;
    --bg-color: #fdb;
    --topnav-bg: #fec;
    --topnav-height: 70px;
    --topnav-logo-col-first: #798;
    --topnav-logo-col: #583;
    --nav-col: #474;
    --nav-col-dark: #353;
    --nav-col-hover: #595;
    --max-width: 1000px;
    --blue: #def;
}

@font-face {
    font-family: body;
    src: url(/src/january-snack.regular.ttf);
}

@font-face {
    font-family: title;
    src: url(/src/magnolia-script.regular.otf);
}

@font-face {
    font-family: basic;
    src: url(/src/NotesSans-Free.otf);
}

h1, .h1 {font-size: var(--h1)}
h2, .h2 {font-size: var(--h2)}
h3, .h3 {font-size: var(--h3)}
h4, .h4 {font-size: var(--h4)}
h5, .h5 {font-size: var(--h5)}

h2 {color: var(--nav-col-dark)}

.center {
    text-align: center;
}

.fancy {
    font-family: title, monospace, sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

body {
    overflow-x: hidden;
    position: relative;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--side-color);
}

.over-hold {
    max-width: var(--max-width);
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-color);
    box-shadow: 0 0 10px #0004;
    position: relative;

    display: flex;
    flex-direction: column;
}

a {color: #000; text-decoration: none}
h1, h2, h3, h4, h5 {margin: 0; font-weight: normal}
* {box-sizing: border-box}