@font-face {
    font-family: Domine;
    src: url(/Assets/Fonts/Domine.ttf);
}

@font-face {
    font-family: DMMono;
    src: url(/Assets/Fonts/DMMono.ttf);
}

:root {
    /* Generic colour variables */
    --colour-white: #FFFFFF;
    --colour-ghost-white: #F7F7FF;
    --colour-eggshell: #F0EAD6;

    --colour-rojo: #DE1A1A;
    --colour-burgundy: #800020;

    --colour-charcoal: #36454F;
    --colour-anchor: #3E424B;
    --colour-jet: #2F2D2E;
    --colour-gunmetal-grey: #2A3439;
    --colour-dark-charcoal: #2F2F2F;
    --colour-rich-grey: #1F2022;
    --colour-dark-grey: #101010;
    --colour-black: #000000;


    /* Colours for specific elements */
    --colour-header: var(--colour-eggshell);
    --colour-header-hover: var(--colour-dark-charcoal);
    --colour-header-bg: var(--colour-rojo);

    --colour-nav: var(--colour-eggshell);
    --colour-nav-bg: var(--colour-black);
    --colour-nav-bg-hover: var(--colour-dark-charcoal);

    --colour-text: var(--colour-eggshell);
    --colour-code: var(--colour-eggshell);
    --colour-bg: var(--colour-jet);

    --colour-link: var(--colour-rojo);
    --colour-link-hover: var(--colour-burgundy);

    --colour-table: var(--colour-eggshell);

    --colour-list-bg: var(--colour-dark-grey);
    --colour-list-bg-alt: var(--colour-rich-grey);
}

/* Generic options that don't need to be "responsive" */
body {
    font-family: Domine;
    color: var(--colour-text);
    background-color: var(--colour-bg);
    line-height: 1.625;
}

body > a {
    padding: 0%;
    margin: 0%;
    border: none;

    text-decoration: none;
}

main > p > code {
    font-family: DMMono;
    color: var(--colour-code);
    background: var(--colour-black);

    padding: 2px;

    border: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: var(--colour-eggshell);
}

/* Additions for some customization. */
.kanji-button {
    font-family: Domine;
    color: var(--colour-text);
}

.katex-display {
    overflow: auto hidden;
}

/* Header - Desktop */
@media screen and (min-width: 720px) {
    header {
        /* Position */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;

        /* Size */
        margin: 2%;
        width: 17.5%;
        padding-top: 2%;
        padding-bottom: 2%;

        /* Decorations */
        border-radius: 25px;

        /* Text */
        font-family: DMMono;
        font-size: 3vw;
        text-align: center;
        color: var(--colour-header);
        background-color: var(--colour-header-bg);
        text-decoration: none;

        /* Text Alignment */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Header - Mobile */
@media screen and (max-width: 719px) {
    header {
        /* Position */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;

        /* Size */
        margin: 2%;
        width: 95%;
        padding-top: 2%;
        padding-bottom: 2%;

        /* Decorations */
        border-radius: 25px;

        /* Text */
        font-family: DMMono;
        font-size: 15vw;
        text-align: center;
        color: var(--colour-header);
        background-color: var(--colour-header-bg);
        text-decoration: none;

        /* Text Alignment */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

header:hover {
    color: var(--colour-header-hover);
}

/* Nav Bar - Desktop */
@media screen and (min-width: 720px) {
    nav > ul {
        /* Position */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;

        /* Size */
        width: 17.5%;
        margin: 0;
        margin-top: 2%;
        margin-left: 2%;
        padding: 10% 0% 2% 0%;

        /* Decorations */
        border-radius: 25px;

        /* Content */
        list-style-type: none;
        overflow-x: hidden;
        background-color: var(--colour-nav-bg);
    }

    nav > ul > li {
        display: block;
    }

    nav > ul > li:hover {
        background-color: var(--colour-nav-bg-hover);
    }

    nav > ul > li a {
        display: block;

        padding: 5% 15% 5% 10%;

        /* Text */
        text-decoration: none;
        font-size: 1.5vw;
        color: var(--colour-nav);
    }
}

/* Nav Bar - Mobile */
@media screen and (max-width: 719px) {
    nav > ul {
        /* Position */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        /* Size */
        width: 95%;
        margin: 0;
        margin-top: 2%;
        margin-left: 2%;
        padding: 30% 0% 2% 0%;

        /* Decorations */
        border-radius: 25px;

        /* Content */
        list-style-type: none;
        overflow-x: hidden;
        background-color: var(--colour-nav-bg);
    }

    nav > ul > li {
        display: block;
    }

    nav > ul > li:hover {
        background-color: var(--colour-nav-bg-hover);
    }

    nav > ul > li a {
        display: block;

        padding: 5% 15% 5% 10%;

        /* Text */
        text-align: center;
        text-decoration: none;
        font-size: 7.5vw;
        color: var(--colour-nav);
    }
}

/* Content - Desktop */
@media screen and (min-width: 720px) {
    body > main {
        padding-top: 2%;
        padding-left: 22.5%;
        padding-right: 20%;
        padding-bottom: 2%;
    }

    main > h1 {
        margin-left: 4%;
        margin-right: 4%;

        font-size: 40px;
    }

    main > h2 {
        margin-left: 6%;
        margin-right: 6%;

        font-size: 36px;
    }

    main > h3 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 32px;
    }

    main > h4 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 28px;
    }

    main > h5 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 24px;
    }

    main > h6 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 20px;
    }

    main > p {
        margin-left: 8%;
        margin-right: 8%;

        padding-top: 2%;

        font-size: 16px;
        text-align: justify;
    }

    main > ul > li {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 16px;
    }

    main a {
        color: var(--colour-link);
        text-decoration: none;
    }

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

    main > pre {
        margin-left: 8%;
        margin-right: 8%;
    }

    main > pre > code {
        font-family: DMMono;
        font-size: 16px;
        color: var(--colour-code);
    }

    main > hr {
        display: block;
        height: 5px;

        margin: 4%;

        color: var(--colour-eggshell);
        background-color: var(--colour-eggshell);
    }
}

/* Content - Mobile */
@media screen and (max-width: 719px) {
    body > main {
        padding-top: 150%;
        padding-left: 0%;
        padding-right: 0%;
        padding-bottom: 20%;
    }

    main > h1 {
        margin-left: 4%;
        margin-right: 4%;

        font-size: 44px;
    }

    main > h2 {
        margin-left: 6%;
        margin-right: 6%;

        font-size: 40px;
    }

    main > h3 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 36px;
    }

    main > h4 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 32px;
    }

    main > h5 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 28px;
    }

    main > h6 {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 24px;
    }

    main > p {
        margin-left: 8%;
        margin-right: 8%;

        padding-top: 2%;

        font-size: 20px;
        text-align: justify;
    }

    main > ul > li {
        margin-left: 8%;
        margin-right: 8%;

        font-size: 20px;
    }

    main a {
        color: var(--colour-link);
        text-decoration: none;
    }

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

    main > pre {
        margin-left: 8%;
        margin-right: 8%;
    }

    main > pre > code {
        font-family: DMMono;
        font-size: 20px;
        color: var(--colour-code);
    }

    main > hr {
        display: block;
        height: 5px;

        margin: 4%;

        color: var(--colour-eggshell);
        background-color: var(--colour-eggshell);
    }
}