@charset "UTF-8";

Body {
	background-color: #77B28C;
}

h1 {
	text-align: center;
	background-color: #1F2041;
	font-size: 4em;
	color: #FCF2EA;
	border-radius: 100px;
	text-shadow: 0px 0px 5px #FFFFFF, 0px 0px 10px #FCF2EA, 2px 2px 15px
		#95E6D8, -2px -2px 20px #156064, 2px -2px 25px #1F2041, -2px 2px 30px
		#A63D40;
}

ul {
	list-style-type: none; /* Remove the default bullet */
	margin: 0px;	/* Remove the default margin */
	padding: 0px;	/* Remove default padding */
	background-color: #A63D40;	/* Makes background color */
	overflow: auto;	/* Allows content to stay within unordered list */
	border-radius: 10px;
}

ul li {
	float: left;
}

ul li a {
	color: #FCF2EA;	/* sets font color */
	text-decoration: none;	/* Remove default underline */
	padding: 14px 11px;	/* add to top/bottom and left/right */
	display: block;	/* Display at block level */
	font-family: "Michroma", sans-serif;
	font-weight: 400;
	font-style: normal;
}

ul li a:hover {
	background-color: #7A3437;
	text-shadow: 0px 0px 5px #FFFFFF, 0px 0px 10px #FCF2EA, 2px 2px 15px
		#95E6D8, -2px -2px 20px #156064, 2px -2px 25px #1F2041, -2px 2px 30px
		#A63D40;
}

div {
	background-color: #156064;
	border-radius: 60px;
	overflow: auto;
	border-width: 3px;
	border-color: #1E4649;
	border-style: solid;
	padding: 5px 5px 5px 5px;
	color: #B4CACB;
	font-size: 2.5em;
}

div a {
	color: #DCBBAC;
}

div img {
	border-radius: 50px;
	padding: 5px;
}

div p {
	padding: 5px;
}

div div {
	background-color: #1E4649;
	font-size: 1em;
}

div div div {
	background-color: #122F31;
}

div div div div {
	background-color: #081B1D;
}

.width15 {
	width:99%;
}

.width33 {
	width: 99%;
}

.width49 {
	width: 99%;
}

.width66 {
	width: 99%;
}

.width99 {
	width: 99%;
}

.floatright {
	float: none;
}

.floatleft {
	float: none;
}

.announce {
	color: #B4CACB;
	text-align: center;
	font-size: 1.5em;
	text-shadow: -2px 2px 2px #1E4649;
}

.pressed {
	background-color: #7A3437;
	text-shadow: 0px 0px 5px #FFFFFF, 0px 0px 10px #FCF2EA, 2px 2px 15px
		#95E6D8, -2px -2px 20px #156064, 2px -2px 25px #1F2041, -2px 2px 30px
		#A63D40;
}

.desmos {
	width: 99%;
	border-radius: 50px;
	height: 500px;
}

.pun {
	padding: 0;
	margin: 0;
	background-color: #1E4649;
}

/* @media from https://www.w3schools.com/css/css3_mediaqueries_ex.asp */

@media screen and (min-width: 1200px) {
	h1 {
		font-size: 5em;
	}
	
	ul li a {
		padding: 14px 30px;
	}
	
	div {
		font-size: 2em;
	}
	
	.width15 {
		width: 15%;
	}
	
	.width33 {
		width: 32%;
	}
	
	.width49 {
		width: 49%;
	}
	
	.width66 {
		width: 64%;
	}
	
	.floatright {
		float: right;
	}
	
	.floatleft {
		float: left;
	}
	
	.announce {
		font-size: 1.75em;
	}
	
	.desmos {
		width: 31%;
	}
}

/* All Fonts from https://fonts.google.com/selection/embed */
.michroma-regular {
	font-family: "Michroma", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.space-grotesk-300 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  font-style: normal;
}