:root{
	--dark-shade: #271C2C;
	--light-shade: #F4F7F5;
	--dark-accent: #B43E51;
	--light-accent: #7C7F8A;
	--main-color: #A9D950;
}

@media (prefers-color-scheme: dark) {
	body{
		background: var(--dark-shade);
		color: var(--light-shade);
	}
}

@media (prefers-color-scheme: light) {
	body{
		background:  var(--light-shade);
		color: var(--dark-shade);
	}
}

body{
	font-family:'Abel', sans-serif;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". content"
    "nav content";
}

.nav { 
	grid-area: nav;
	color: #A9D950; 
	font-family: 'Sirin Stencil', cursive; 
	position: fixed;
	bottom: 0;
}
.nav h1{
	font-size: 6rem;
}
.nav h2{
	font-size: 2rem;
}
.nav a{
	color: #A9D950; 
	text-decoration: none; 
}
.content { grid-area: content; }
.content h1 {color: #B43E51; font-family: 'Sirin Stencil', cursive; font-size: 2.5rem}
.content h2 {color: #B43E51; font-family: 'Sirin Stencil', cursive; font-size: 2rem;}
.content h3 {font-family: ''Sirin Stencil, serif; font-size:1.5rem;}
.content h4 {font-family: 'VT323', monospace; font-size: 1rem; color: #7C7F8A; margin-top: 0.5em; margin-bottom: 0.5em;}
.content hr {border-style: dotted; color: var(--dark-accent); border-width: 1px;}
.content a {color: #A9D950; font-family: 'VT323', monospace;}
.content li {list-style-type: square;}
.label {color: #7C7F8A; font-family: 'VT323', monospace;}
.thumbnail {width: 400px;}
.toggled {display: none;}