@import "nord.css";

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat/static/Montserrat-Regular.ttf") format("truetype");
}

/* @media (prefers-color-scheme: light) */

/* CSS reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
}

/* general styling */
body {
    margin: 3% 20%;
    font-family: "Montserrat", Arial, sans-serif;
    background: var(--nord0);
    color: var(--nord4);
}

section {
    margin: 20px 0% 30px 0%;
}

p {
    margin: 0px 0px 20px 0px
}

hr {
    margin: 0px 0px 10px 0px;
}

mark {
    color: var(--nord4);
    background-color: var(--nord2);
}

aside {
    color: var(--nord9);
}

/* tables */
table {
    table-layout: fixed;
    margin: 10px 0px;
}

caption {
    margin: 20px 0px;
    caption-side: bottom;
    font-size: 70%;
}

th,td {
    padding: 0.25em 1em;
}

/* style teaching timeline table */
.timeline-left { border-radius: 2em 0em 0em 2em; white-space: nowrap}
.timeline-right { border-radius: 0em 2em 2em 0em; }

/* style color palette table */
.palette { width: 100px; height: 100px; border-radius: 100em; }
.nord0 { background-color: var(--nord0); border: 1px solid var(--nord3); }
.nord1 { background-color: var(--nord1); }
.nord2 { background-color: var(--nord2); }
.nord3 { background-color: var(--nord3); }
.nord4 { background-color: var(--nord4); color: var(--nord0); }
.nord5 { background-color: var(--nord5); color: var(--nord0); }
.nord6 { background-color: var(--nord6); color: var(--nord0); }
.nord7 { background-color: var(--nord7); color: var(--nord0); }
.nord8 { background-color: var(--nord8); color: var(--nord0); }
.nord9 { background-color: var(--nord9); color: var(--nord4); }
.nord10 { background-color: var(--nord10); color: var(--nord4); }
.nord11 { background-color: var(--nord11); color: var(--nord0); }
.nord12 { background-color: var(--nord12); color: var(--nord0); }
.nord13 { background-color: var(--nord13); color: var(--nord0); }
.nord14 { background-color: var(--nord14); color: var(--nord0); }
.nord15 { background-color: var(--nord15); color: var(--nord0); }

/* links */
a {
    text-decoration: none;
}

a:link {
    color: var(--nord7);
}

a:visited {
    color: var(--nord7);
}

a:hover {
    color: var(--nord9);
}

/* lists */
ol,ul,dl {
    margin: 0.5em 2em;
}

li,dt {
    margin-top: 0.75em;
}

dd {
    margin-left: 1.5em;
    margin-top: 0.15em;
}

/* images */
img {
}

img.portrait {
    margin: 2% 5%;
    max-width: 12em;
    float: right;
    border-radius: 4em 4em 4em 4em;
    opacity: 0.9;
}

img.koi {
    max-width: 30%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}