:root {
    --acc1-colour: #B71D25;
    --acc2-colour: #3874B7;
    --fg-colour: #000000;
    --fg2-colour: #000000;
    --bg-colour: #ffffff;
    --bg2-colour: #f1f5fe;
}

@font-face {
    font-family: display;
    src: url(fonts/junicode_cond.otf);
}

@font-face {
    font-family: body;
    src: url(fonts/hiroshige_book.ttf);
}
@font-face {
    font-family: hand;
    src: url(fonts/simsun_subset.ttf);
}

@font-face {
    font-family: scholar;
    src: url(fonts/artifex_hand.otf);
}

@font-face {
    font-family: fancy;
    src: url(fonts/garamond.ttf);
}

@font-face {
    font-family: fancy;
    font-style: italic;
    src: url(fonts/garamond_italic.ttf);
}

img {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

body {
    font-family: display;
}

@media screen and (min-height: 1080px){
  body{
    font-size: 200%;
  }
}

h1 {
    text-align: center;
    margin-top: 0px;
    color: var(--acc1-colour);
}

h2 {

}

h3 {
    margin: 0px;
}

p {
    font-family: body;
    margin-top: 0px;
}

#mainsection {
    width: 25em;
    padding: 10px 10px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
    border: 1px solid black;
}

#maincover {
    width: 80%;
    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
}

#navbar {
    width: 100%;
    text-align: center;
}

#currentpagenav {
    color: var(--fg-colour);
    text-decoration: none;
}


a:link {
    color: var(--acc2-colour);
}

a:hover {
    text-decoration: none;
}

a:active {
    color: var(--acc1-colour);
}

a:visited {
    color: var(--acc2-colour);
}