/* VARIABLES and DECLARATIONS, importing FONTS */
:root {
/*	--bg-color: #cfeaff; */
	--bg-color: #e5f3ff; 
/*  --bg-color: #a3d0f7; */
	--kate-green: #00a054;
	--veronica-purple: #b011ff;
	--and-accent: #ff6e6e;
	--oval-main: #cfff85;
	--oval-shadow: #7df6ff;
	--menu-green: #00753E;
	--yellow-triangle: #ffff6e;
  font-size: 16pt;
  --container-width: 960px;
}

@font-face {
	font-family: Marauder-bold;
	src: url('/assets/Marauder-Text-Bold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: Marauder-regular;
	src: url('/assets/Marauder-Text-Regular.woff2') format('woff2');
	font-display: swap;
}

/* MAIN BODY STUFF, CONTAINER ETC */
body {
  background-color: var(--bg-color);
	font-family: sans-serif;
}

main, #indexPageHeader, footer, #mainNavbar {
  max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
  margin-bottom: 1rem;
/*  background-color: red !important; */
}

/* ADDITIONAL TEXT DECORATION */
h1,h2,h3,h4,h5,h6 {
	font-family: Marauder-bold, serif;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: var(--menu-green);
}

a:hover {
	background-color: var(--veronica-purple);
	color: white;
}

/* STYLING THE BANNERS, NAVBARS, AND FOOTER */

/* the SVG on the front page */
#headerLogoAndWordmark {
  width: 100%;
  height: 100%;
}

#logobanner img {
  height: 100px;
}

#logobanner {
  display: inline-block;
  }


/* I don't want logos in the banner to color on hover */
#logobanner:hover {
	background-color: transparent;
}

/* main navbar css */
#mainNavbar ul {
	padding: 0;
	display: flex;
	gap: .7rem;
}

#mainNavbar li {
	list-style: none;
	flex: 1 1 0;
	background-color: var(--menu-green);
	margin: auto;
	height: 2rem;
	box-shadow: .3rem .3rem 0px var(--veronica-purple);
}

#mainNavbar li:hover {
	background-color: var(--veronica-purple);
	box-shadow: .3rem .3rem 0px var(--kate-green);
}

#mainNavbar li a {
	font-family: Marauder-bold;
	color: white;
	width: 100%;
	height: 100%;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* footer styling */
footer {
	background-color: var(--menu-green);
  color: white;
	box-shadow: .3rem .3rem 0px var(--veronica-purple);
  padding-bottom: 1rem;
}

footer nav {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1px;
  padding-bottom: 1px;
}

footer hr {
  margin-left: 1rem;
  margin-right: 1rem;
}

footer a {
  color: var(--bg-color);
}

footer ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
}

footer h2 {
  margin-bottom: 0px;
}

#buildInfo, #copyrightnotice {
  font-size: .7rem;
  margin-bottom: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0px;
}

#copyrightnotice {
  font-style: italic;
  font-weight: bold;
} 

/* SECTION STYLING */

/* the styling for the primary sections */
.main-colorbox {
	background-color: var(--yellow-triangle);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1px;
	padding-bottom: 1px;
	box-shadow: .3rem .3rem 0px var(--veronica-purple);
}

/* styling for the most recent episode on the main and "episodes" page, also using it for the bio page */
.latestEpisodeArticle, .bioarticle {
	background-color: var(--oval-main);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-top: 1rem;
	box-shadow: .3rem .3rem 0px var(--veronica-purple);
}

/* episode header styling, for use in lists and on the main episode page */
.episodeHeaderLink {
	display: block;
	text-decoration: none;
	color: black;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.episodeHeaderLink:hover {
	color: var(--veronica-purple);
	text-decoration: underline;
	background-color: transparent;
}

.episodeHeaderLink h2 {
	margin: 0px;
}

.releaseDate {
	margin: 0px;
	font-style: italic;
}

/* additional episode styling using CSS grid */
.additionalEpisodes {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
  list-style: none;
  padding: 0px;
}

@media (max-width: 640px) {
	.additionalEpisodes {
		grid-template-columns: 1fr;
	}
}

/* individual episode page styling */
.episodePageHeader h1 {
  margin-bottom: 0px;
}

/* about page styling */
.bioarticle {
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 1rem;
}

/* on smaller screens, drop to one column because I'm bad at css lol */
@media (max-width: 640px) {
  .bioarticle {
		grid-template-columns: 1fr;
	}
}

/* the "figure" is the attached photos of us */
.bioarticle > figure {
	margin: auto;
}

.bioarticle > figure > img {
	width: 100%;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.bioarticle a {
  color: var(--veronica-purple);
}

.bioarticle a:hover {
  color: white;
}

/* audio player needs width: 100% otherwise it falls off the container on small screens */
audio {
  width: 100%;
}