/*********/
/* Fonts */
/*********/

@font-face {
    font-family: SourceSansPro-SemiBold;
    src: url(/fonts/SourceSans3-Semibold.woff2) format(woff2);
}

@font-face {
    font-family: SourceSerif-Regular;
    src: url(/fonts/SourceSerif4-Regular.woff2) format(woff2);
}

@font-face {
    font-family: SourceSerif-Italic;
    src: url(/fonts/SourceSerif4-It.woff2) format(woff2);
}

@font-face {
    font-family: SourceSerif-Semibold;
    src: url(/fonts/SourceSerif4-Semibold.woff2);
}

@font-face {
    font-family: SourceSerif-Bold;
    src: url(/fonts/SourceSerif4-Bold.woff2) format(woff2);
}

@font-face {
    font-family: SourceCodePro-Regular;
    src: url(/fonts/SourceCodePro-Regular.woff2) format(woff2);
}


/*************/
/* Variables */
/*************/

:root {
    /* Fonts */
    --content-font: SourceSerif-Regular;
    --semibold-content-font: SourceSerif-Semibold;
    --bold-content-font: SourceSerif-Bold;
    --italic-content-font: SourceSerif-Italic;
    --nav-font: SourceSansPro-SemiBold;
    --ui-font: SourceSansPro-Regular;
    --heading-font: SourceSerif-Regular;
    --bold-heading-font: SourceSerif-Bold;
    --code-font: SourceCodePro-Regular;

    /* Light theme colours */
    --foreground-color: black;
    --background-color: white;
    --secondary-background-color: hsl(0deg 0% 97%);
    --border-color: hsl(0deg 0% 90%);
    --accent-color: hsl(245, 86%, 36%);
    --secondary-accent-color: hsl(272, 71%, 39%);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme colours */
        --foreground-color: white;
        --background-color: hsl(0deg 0% 12%);
        --secondary-background-color: hsl(0deg 0% 17%);
        --border-color: hsl(0deg 0% 27%);
        --accent-color: hsl(237deg 100% 74%);
        --secondary-accent-color: hsl(281deg 100% 76%);
    }
}


/********/
/* Base */
/********/

body {
    background-color: var(--background-color);
    background-image: url(/images/background.png);
    background-repeat: repeat;
    color: var(--foreground-color);
    font-family: var(--content-font);
    color-scheme: light dark;
    max-width: 650px;
    margin: auto;
    padding: 0 25px 0 25px;
}

@media (prefers-color-scheme: dark) {
    body {
        background-image: url(/images/background-dark.png);
    }
}

h1 {
    font-size: 1.75rem;
    font-family: var(--bold-heading-font);
    font-weight: normal;
}

h2 {
    font-size: 1.375rem;
    font-family: var(--heading-font);
    font-weight: normal;
}

h3 {
    font-size: 1.25rem;
    font-family: var(--heading-font);
    font-weight: normal;
}

h4, h5, h6 {
    font-size: 1rem;
    font-family: var(--heading-font);
    font-weight: normal;
}

p {
    line-height: 1.5rem;
    font-size: 1rem;
}

b {
    font-weight: normal;
    font-family: var(--bold-content-font);
}

i {
    font-style: normal;
    font-family: var(--italic-content-font);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

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

a:visited {
    color: var(--secondary-accent-color);
}

a:hover {
    text-decoration: underline;
}

cite {
    font-style: normal;
}

sub,
sup {
    line-height: 0;
}

.page-heading {
    margin: 1.25rem 0 0 0;
}

.page-subheading {
    margin: 2rem 0 1.5rem 0;
    padding: 0;
    line-height: 0;
}


/******************/
/* Navigation Bar */
/******************/

.nav-list {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    display: grid;
    grid-template-columns: 1fr repeat(6, min-content);
    column-gap: 0.75rem;
    align-items: center;
}

.nav-list picture {
    display: flex;
    align-items: center;
}

.nav-list img {
    height: 1rem;
}

.nav-list button {
    all: unset;
}

.nav-item a,
.nav-item-github a,
.nav-item-active a,
.nav-menu-item a,
.nav-menu-item-active a {
    text-transform: uppercase;
    font-size: 0.95rem;
    font-family: var(--nav-font);
}

.nav-item a:link,
.nav-item-github a:link,
.nav-menu-item a:link,
.nav-item a:visited,
.nav-item-github a:visited,
.nav-menu-item a:visited {
    color: var(--foreground-color);
    text-decoration: none;
}

.nav-item a:hover,
.nav-item-github a:hover,
.nav-menu-item a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.nav-item-active a:link,
.nav-menu-item-active a:link,
.nav-item-active a:visited,
.nav-menu-item-active a:visited,
.nav-item-active a:hover,
.nav-menu-item-active a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.nav-item-home a:link,
.nav-item-home a:visited,
.nav-item-home a:hover {
    text-decoration: none;
    color: var(--foreground-color);
}

.nav-item-home a {
    font-size: 1.25rem;
    font-family: var(--bold-heading-font);
}

.nav-item-github p {
    margin: 0;
    padding: 0;
    display: none;
}

.nav-item-menu {
    display: none;
}

.nav-menu {
    position: absolute;
    padding: 0 25px 0 25px;
    width: calc(100dvw - 50px);
    height: 100dvh;
    border: none;
    display: none;
}

.nav-list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-list-menu li {
    margin: 1rem;
}

.nav-list-menu a {
    font-size: 1.5rem;
}

.nav-menu {
    transition: opacity 0.15s ease-in-out,
                display 0.15s ease-in-out allow-discrete;
    opacity: 0;
}

.nav-menu:popover-open {
    opacity: 1;
    display: inherit;
}

@starting-style {
    .nav-menu:popover-open {
        opacity: 0;
    }
}


@media screen and (max-width: 430px) and (scripting: enabled) {
    .nav-list {
        grid-template-columns: 1fr min-content;
    }

    .nav-item,
    .nav-item-active,
    .nav-item-github {
        display: none;
    }
    
    .nav-item-menu {
        display: inherit;
    }
}

@media screen and (max-width: 430px) and (scripting: none) {
    .nav-list {
        grid-template-columns: none;
        grid-template-rows: 1fr repeat(6, min-content);
        row-gap: 0.25rem;
    }

    .nav-item-github p {
        display: inherit;        
    }

    .nav-item-github picture {
        display: none;
    }
}

/****************/
/* Profile Page */
/****************/

#profile {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

#profile img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
}

#profile > div {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#profile h1 {
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
}

#profile p {
    margin: 0;
    padding: 0;
    font-family: var(--heading-font);
    font-size: 1.1rem;
}

#profile a {
    font-family: var(--code-font);
    color: var(--foreground-color);
    font-size: 1rem;
}

@media screen and (max-width: 650px) {
    #profile {
        flex-direction: column;
        gap: 0.5rem;
    }

    #profile img {
        align-self: center;
    }

    #profile h1 {
        text-align: center;
    }

    #profile p {
        align-self: center;
    }

}

@media screen and (max-width: 430px) {
    #profile h1 {
        font-size: 1.5rem;
    }
}

/**************/
/* Notes Page */
/**************/

#notes-list p {
    margin: 0.125rem 0;
}

#notes-list h2 {
    font-family: var(--italic-content-font);
    margin: 0.125rem 0;
    font-size: 1rem;
}

#notes-list a {
    font-family: var(--semibold-content-font);
}