body {
	line-height: 3.6ex;
	height: 200%;
	margin: 0px;
	/* background-image: url('https://r2.moonbones.us/10900.jpg'); */
  /* background-repeat: no-repeat; */
  /* background-attachment: fixed; */
  /* background-size: cover;
	*/
	background-color: #9DD1F1;
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(6, 1fr);
	gap: 0px;
}

.default-theme {
	/* background-color: #3E1A09E0; */
	background-color: #3E1A09;
	color: #F5E3E9;
	margin: 5%;
	padding: 5%;
	border-radius: 2em;
	justify-content: center;
}

.pop-theme {
	background-color: #D81E5B;
	color: #F5E3E9;
	padding: 5%;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 18pt;
	line-height: 24pt;
}

.footer-theme {
	background-color: #3E1A09;
	color: #F5E3E9;
	margin-top: 5%;
	padding-top: 1ex;
}

.big-header {
  font-size: 12vmin;
	color: #F5E3E9;
}

.logo-header {
	padding-top: 1ex;
	padding-bottom: 1ex;
	margin-left: 4em;
	margin-right: 4em;
	color: #F5E3E9;
}

.little-header a,
.little-header a:visited,
.little-header {
	color: #9DD1F1;	
}


a {
	color: #D81E5B;
}

a:visited {
	color: #9DD1F1;
}

.grid1 {
	grid-column: 1 / span 6;
}

.grid1 img {
	max-width: 90%;
}

.grid2 {
	grid-column: span 3;
	margin-left: 5%;
	margin-right: 5%;
}

/* https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image */
.grid2 img {
	margin-top: 5%;
	width: 90%;
	max-width: 400px;
}

.grid3 {
	grid-column: span 2;
}


@media (prefers-color-scheme: light) {
	.default-theme.adaptive {
		background-color: #F5E3E9;
		color: #3E1A09;
		background-size: 100% 100%;
	}
	.little-header.adaptive a,
	.little-header.adaptive a:visited,
	.little-header.adaptive {
		color: #D81E5B;
	}
	a.adaptive {
		color: #D81E5B;
	}
	
	a.adaptive:visited {
		color: #3E1A09;
	}
}

@media only screen and (max-width: 800px) {
	.grid2 {
		grid-column: span 6;
	}
	.grid3 {
		grid-column: span 3;
	}
}

.over-the-rainbow-normal {
  font-family: "Over the Rainbow", cursive;
  font-weight: 400;
  font-style: normal;
}

.lexend-light {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.lexend-normal {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lexend-medium {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.lexend-bold {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.roboto-slab-medium {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}