@import url('https://fonts.googleapis.com/css2?family=Jacquarda+Bastarda+9&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');


:root {
	--background: #D0CEBA;
	--text: #417B5A;
	--primary: #4B3F72;

	--darkgreen-background: #1F2041;
	--darkgreen-text: #4B3F72;
}
h1 {
	font-family: "Jacquarda Bastarda 9", serif;
	font-weight: 400;
	font-style: normal;
}
body {
	font-family: "Azeret Mono", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.audio-player {
	background-color: var(--background);
	padding: 1rem;
	text-align: center;
	max-width: 80%;
	margin: 2rem auto;
}
.audio-player h2 {
	font-family: "Jacquarda Bastarda 9", serif;
	color: var(--text);
	margin-bottom: 1rem;
	overflow: hidden;
}

audio {
	width: 80%;
	padding: 10px 15px;
}

audio::-webkit-media-controls-panel {
	background-color: var(--background);
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
	color: var(--text);
}

.aud-img{
	max-width: 30%;
}



.articleFlex{
	display: flex;
	justify-content: center;
}
.articleImg{
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	max-height: 300px;
	max-width: 90%;
	cursor: pointer;
}
.article {
	width:inherit;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align: justify;
	text-justify: inter-word;
	padding-top:10px;
}

.article > h1, h5{
	text-align: center;
}

.image-wrapper {
	position: relative;
}
.image-hover {
	position: absolute;
	border: 1px solid var(--background);
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-out;
}

.vidimage-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	animation-name: myfade;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes myfade{
	from{opacity: 1;}
	to{opacity:0}
}
.grid-container > a:hover .image-hover{
	opacity: 1;
}


.grid-container {
	max-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.grid-container > a {
	text-decoration: none;
}

.grid-container > a > div > img {
	width: 200px;
}

#mycanvas {
	width: 100%;
	height: 100%;
}


#canvasdiv{
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	z-index: 1;
}
#codediv {
	position: absolute;
	height: 100%;
	width: inherit;
	display: block;
	margin-left: 1rem;
	z-index: 999;
	opacity: 0;
	transition: opacity 1s;
}
#codediv > p {
	background-color: rgba(65, 123, 90, 0.69);
	color: #D0CEBA;
}

#maindisplay-wrapper:hover > #codediv{
	opacity: 1;
}


h1, h2, h3,
nav a,
nav p {
	font-weight: normal;
	text-transform: uppercase;
}

nav .title {
	font-weight: normal;
	text-transform: uppercase;
}

body {
	background-color: var(--background);
	color: var(--text);
	width: 100vw;

	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

header {
	top: 0;
	background-color: var(--background);
}


.vidheader{
	animation-name: myvidtrans;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
.vidbody{
	animation-name: myvidtrans;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes myvidtrans{
	from {	background-color: var(--background);}
	to {background-color: var(--darkgreen-background);}
}
.homenavcontainer{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.homenavcontainer > img {
	padding-top: 1rem;
	padding-right: 1rem;
	height: 100px
}


.linkscontainer > li {
	margin-bottom: 1rem;
}
.linkscontainer > li > a > img {
	max-height: 100px;
	max-width: 100px;
	margin-right: 1rem;
}





.vidimage-wrapper {
	position: relative;
}




.homenavcontainer >.vidimage-wrapper> img {
	padding-top: 1rem;
	padding-right: 1rem;
	height: 100px
}


.aboutcontainer, .vidaboutcontainer {
	display: flex;
	justify-content: space-between;
}
.aboutcontainer > img, .vidaboutcontainer >.vidimage-wrapper> img{
	width: 200px;
	height: 200px;
	padding-left: .5rem;
}

header,
main,
footer {
	padding: 1rem;
}

footer {
	margin-bottom: 10px;
}


main,
nav {
	overflow-y: auto;
}

p, a {
	line-height: 120%;
}

a, a:visited {
	color: var(--primary);
}

hr {
	color: var(--background);
	border: none;
	border-bottom: 1px solid var(--text);
}
.vidhr {
	animation-name: myhrtrans;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes myhrtrans{
	from {border-bottom: 1px solid var(--text);}
	to {border-bottom: 1px solid var(--darkgreen-text);}
}



ul {
	list-style: none;
	padding-left: 16px;
}

.hidden {
	display: none;
}

.navsection {
	display: inline-block;
}
.navsection p, .navsection a {
	font-size: 16px; /* Set a base font size */
}
/* Default styles */
.navsection p, .navsection a {
	font-size: 16px; /* Adjust font size as needed */
}

/* Media query for screens less than 425px */
@media (max-width: 425px) {
	.navsection p, .navsection a {
		font-size: 14px; /* Adjust the font size for smaller screens */
	}
	.homenavcontainer > img {
		height: 60px !important; /* Force override with !important */

	}
}

header h1 {
	margin: 0 0 1rem;
}

nav .title,
nav a,
nav p{
	display: inline;

}

nav a {
	text-decoration: none;
}

nav p {
	text-decoration: none;
	color: var(--text);
}

nav a,
nav a:visited {
	color: var(--primary);
}

nav a:hover {
	color: var(--text);
	text-decoration: underline;
}

nav a:active,
nav a.active {
	text-decoration: none;
	color: var(--primary);
}

a.headerlink {
	color: var(--text);
	text-decoration: none;
}
.vidheaderlink {
	animation-name: mytexttrans;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes mytexttrans{
	from {	color: var(--text);}
	to {color: var(--darkgreen-text);}
}
.start-image {
	width: 100%;
	max-width: unset;
	border: 1px solid var(--text);

}



.grid-2,
.grid-4 {
	display: grid;
	grid-gap: 1rem;
}

.grid-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-2 {
	grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 800px) {
	header,
	main,
	footer {
		padding: 0.5rem;
	}
	.grid-2, .grid-4 {
		grid-template-columns: 1fr;
	}
	.hide-on-small {
		display: none;
	}
	.show-on-small {
		display: none;
	}
	.grid-container{
		justify-content: center;
	}

	.image-wrapper {
		position: relative;

	}

	.image-hover {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		animation: 2s myfade infinite alternate;
	}

	@keyframes myfade{
		from{
			opacity: 1;
		}
		to{
			opacity:0;
		}
	}
}

@media screen and (min-width: 600px){
	.overview {
		grid-template-columns: repeat(8, 1fr);
		row-gap: 5px;
		column-gap: 10px;
	}


}