html {
    font-family: "adobe-garamond-pro", serif;
    overflow-y: scroll;
}

.background-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
}


/* background colour for the writings page */
.background-grid.season-spring {
    background-color: #EECE01;
}

.background-grid.season-summer {
    background-color: #9C9807;
}

.background-grid.season-autumn {
    background-color: #BE382D;
}

.background-grid.season-winter {
    background-color: #F0F6F6;
}

.background-grid .grid-cell {
    width: 100%;
    height: 100%;
    background: var(--cell-color, transparent);
}

/* background colour for the contact page */
.contact-background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.contact-background-grid.season-spring {
    background-color: #F0F6F6;
}

.contact-background-grid.season-summer {
    background-color: #5EBF66;
}

.contact-background-grid.season-autumn {
    background-color: #C2B224;
}

.contact-background-grid.season-winter {
    background-color: #5F6471;
}

.contact-background-grid .grid-cell {
    width: 100%;
    height: 100%;
    background: var(--cell-color, transparent);
}

/* background colour for the projects page */
.projects-background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.projects-background-grid.season-spring {
    background-color: #E7E9A7;
}

.projects-background-grid.season-summer {
    background-color: #8AD056;
}

.projects-background-grid.season-autumn {
    background-color: #48122E;
}

.projects-background-grid.season-winter {
    background-color: #AAAAAA;
}

.projects-background-grid .grid-cell {
    width: 100%;
    height: 100%;
    background: var(--cell-color, transparent);
}


/* background colour for the project page */
.project-background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.project-background-grid.season-spring {
    background-color: #F1F181;
}

.project-background-grid.season-summer {
    background-color: #BCD865;
}

.project-background-grid.season-autumn {
    background-color: #F1B643;
}

.project-background-grid.season-winter {
    background-color: #624345;
}

.project-background-grid .grid-cell {
    width: 100%;
    height: 100%;
    background: var(--cell-color, transparent);
}

/* background colour for the writing page */
.writing-background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.writing-background-grid.season-spring {
    background-color: #9DDB93;
}

.writing-background-grid.season-summer {
    background-color: #C6C242;
}

.writing-background-grid.season-autumn {
    background-color: #9A0126;
}

.writing-background-grid.season-winter {
    background-color: #4C4E3A;
}

.writing-background-grid .grid-cell {
    width: 100%;
    height: 100%;
    background: var(--cell-color, transparent);
}




/* Override any individual cell colour by targeting its unique class.
   Example: .background-grid .cell-17 { --cell-color: #ff5733; } */

p {
    margin-top: 1em;
    /* font-size: 1.2em; */
    line-height: 1.2em;
}

/* HEADER */

.siteTitle {
    /* font-style: italic; */
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 50px;    
}

.siteTitle:hover {
    text-decoration: underline;
}

.siteTitle a {
    text-decoration: none;
    color: black;
}

/* White header pages */
.siteTitle.season-summer.article a{
    /* color: white; */
}

.siteTitle.projects {
    margin-top: 20px;
    margin-bottom: 50px;
}

/* site title colour changes */

.siteTitle.article.season-summer a {
    /* color: white; */
}

.siteTitle.article.season-autumn a {
    color: white;
}

.siteTitle.article.season-winter a {
    color: white;
}

/* Make all text white on article/writing page during winter */
body.writing-page.season-winter,
body.writing-page.season-winter h1,
body.writing-page.season-winter h2,
body.writing-page.season-winter h3,
body.writing-page.season-winter h4,
body.writing-page.season-winter h5,
body.writing-page.season-winter h6,
body.writing-page.season-winter p,
body.writing-page.season-winter a,
body.writing-page.season-winter li,
body.writing-page.season-winter blockquote,
body.writing-page.season-winter em,
body.writing-page.season-winter strong,
body.writing-page.season-winter span {
    color: white;
}

/* Make all text white on article/writing page during autumn */
body.writing-page.season-autumn,
body.writing-page.season-autumn h1,
body.writing-page.season-autumn h2,
body.writing-page.season-autumn h3,
body.writing-page.season-autumn h4,
body.writing-page.season-autumn h5,
body.writing-page.season-autumn h6,
body.writing-page.season-autumn p,
body.writing-page.season-autumn a,
body.writing-page.season-autumn li,
body.writing-page.season-autumn blockquote,
body.writing-page.season-autumn em,
body.writing-page.season-autumn strong,
body.writing-page.season-autumn span {
    color: white;
}

/* Make all text white on the project page during winter */
body.project-page.season-winter,
body.project-page.season-winter h1,
body.project-page.season-winter h2,
body.project-page.season-winter h3,
body.project-page.season-winter h4,
body.project-page.season-winter h5,
body.project-page.season-winter h6,
body.project-page.season-winter p,
body.project-page.season-winter a,
body.project-page.season-winter li,
body.project-page.season-winter blockquote,
body.project-page.season-winter em,
body.project-page.season-winter strong,
body.project-page.season-winter span {
    color: white;
}





.siteTitle.projects.season-autumn a {
    color: white;
}

.siteTitle.contact.season-winter a {
    color: white;
}

/* Make all text white on the contact page during spring */
body.contact-page.season-spring,
body.contact-page.season-spring h1,
body.contact-page.season-spring h2,
body.contact-page.season-spring h3,
body.contact-page.season-spring h4,
body.contact-page.season-spring h5,
body.contact-page.season-spring h6,
body.contact-page.season-spring p,
body.contact-page.season-spring a,
body.contact-page.season-spring li,
body.contact-page.season-spring blockquote,
body.contact-page.season-spring em,
body.contact-page.season-spring strong,
body.contact-page.season-spring span {
    color: white;
}

/* Make all text white on the contact page during winter */
body.contact-page.season-winter,
body.contact-page.season-winter h1,
body.contact-page.season-winter h2,
body.contact-page.season-winter h3,
body.contact-page.season-winter h4,
body.contact-page.season-winter h5,
body.contact-page.season-winter h6,
body.contact-page.season-winter p,
body.contact-page.season-winter a,
body.contact-page.season-winter li,
body.contact-page.season-winter blockquote,
body.contact-page.season-winter em,
body.contact-page.season-winter strong,
body.contact-page.season-winter span {
    color: white;
}

/* nav bar colour changes */

.menu-item.article-nav.season-summer a {
    /* color: white; */
}

.menu-item.article-nav.season-autumn a {
    color: white;
}

.menu-item.article-nav.season-winter a {
    color: white;
}

.menu-item.project.season-winter a {
    color: white;
}

/* .menu-item.project.season-summer a {
    color: white;
} */

.menu-item.projects.season-summer a {
    /* color: white; */
}

.menu-item.projects.season-autumn a {
    color: white;
}

.menu-item.contact.season-winter a {
    color: white;
}



/* HOME PAGE */

#about {
    display: flex;
    align-items: center;
    min-height: 70vh;
}

#aboutText {
    font-size: 2em;
    width: 60vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* FOOTER */

nav {
    margin-left: auto;
    margin-right: auto;
    font-size: 3em;
    position: fixed;
    bottom: 20px;
    width: 100%;
    z-index: 1000; /* Ensures it stays on top of content */
}

.main-menu {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul {
    justify-content: center;
}

nav a {
    text-decoration: none;
    color: black;
}

ul {
    /* display: flex;
    flex-wrap: wrap;    */
}

ul > li {
    /* display: flex; */
    /* You can also add some margins here to make it look prettier */
}

li {
    flex-grow: 3;
    text-align: center;
}

nav a:hover {
    text-decoration: underline;
}

em {
    font-style: italic;
}

.download-button {
    display: block;
    margin: 20px auto 0;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

#download-pdf:hover {
    text-decoration: underline;
}