@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
@font-face {
	font-family: MyFirstFont;
	src: url(moonveil-stellarion-personal-use.regular.ttf) format("truetype");
}
@font-face {
	font-family: Rugislay;
	src: url(Ruigslay.otf) format("opentype");
}
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 5
   Case Problem 1
   
   Author:   Io Anderson
   Date:     10/15/25
   
   Filename: MidtermCSS.css

*/

body {
	background-color: tan;
	background-image: url(Stars.png);
	font-family: Sans-Serif;
	margin: 50px auto;
	width: 95%; 
	min-width: 640px; 
	max-width: 1024px;
	display: grid;
}

/*HEADERS*/
a.HomePage {
	display: block;
	font-family: Rugislay;
	background-color: white;
	text-align: center;
	font-size: 1.5em;
	width: 5%;
}
header h1{
	display: flex;
	color: white;
	text-align: center;
	font-family: Rugislay;
	background-image: url(twinkling.gif);
	
	width: 25%;
	font-size: 2em;
}



/*SECTIONS*/
section h1.Intro, p{
	padding-top: 20px;
	text-align: center;
	background-color: tan;
}	
section h1.Intro{
	background-color: brown;
	display: grid;
	font-size: 1.6em;
	width: 100%;
	height: 50px;
	text-align: center;
}
section p{
	background-color: tan;
	font-size: 1.3em
}

/*ARTICLES*/	

article.Start p {
	display: block;
	text-align: left;
	flex-wrap: wrap;
	background-color: white;
	margin: 1.6em;
	width: 100%;
	line-height: 1.6em;
	
}
article p {
	font-size: 1.6em;
}



div.row {
	display: flex;
	flex-wrap: nowrap;
	padding: 0 4px;
}
div.column {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}
div.column img{
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}


article p:first-of-type::first-letter {
	font-size: 3.8em;
	flex-wrap: wrap;
	line-height: 1em;
}

/*BLOCKQUOTE*/
blockquote{
	font-size: 1.4em;
	width: 60%;
	margin: 50px auto;
	font-family: Open Sans;
	font-style: italic;
	color: #555555;
	padding: 1.2em 30px 1.2em 75px;
	border-left:8px solid #78C0A8 ;
	line-height:1.6;
	position: relative;
	background:#EDEDED;
	box-shadow: 8px 8px 5px #444444;
}

blockquote::before{
	font-family:Arial;
	content: "\201C";
	color:#78C0A8;
	font-size:4em;
	position: absolute;
	left: 10px;
	top:-10px;
}

blockquote::after{
	content: '';
}

blockquote span{
	display:block;
	color:#333333;
	font-style: normal;
	font-weight: bold;
	margin-top: 1em;
}


/*FOOTER*/
footer{
	font-family: Rugislay;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 2.2em;
	background-image: url(twinkling.gif);
	text-align: center;
	order: 100;
}







/*Top Nav Bar*/
.topNav {
	background-color: #333;
	overflow: hidden;
	text-align: center;
	
}
.topNav > a#HomePage {
	font-size: 3em;
	float: left;
	background-image: url(io.png);
	background-size: contain;
	font-family: Rugislay;
}

.topNav a {
	float: center;
	background-image: url(twinkling.gif);
	color: #f2f2f2;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 30px;
	display: inline-block;
	font-family: MyFirstFont;
}
.topNav a:hover {
	background-color: #ddd;
	text-decoration: underline;
	color: gray;
}
.topNav a.split {
	float: right;
	background-color: #04AA6D;
	color: white;
}




/* ============================================
	Mobile Devices: 0 - 480 pixels
   ============================================
*/
@media screen and (max-width: 600px) {
	div.column {
		flex: 100%;
		max-width: 100%;
	}
	img.panel {
		width: 100%;
	}
	nav.horizontal {
		order: 99;
	}
	body > footer {
		order: 100;
	}
	section#sheets {
		order: 98;
	}
}



/* ===================================================
	Tablet and Desktop Devices: Greater than 480 pixels
   ===================================================
*/
@media screen and (max-width: 800px) {
	nav.horizontal ul{
		display: flex;
		flex: row no-wrap;
		height: 40px;
	}
	nav.horizontal ul > li {
		flex: 1 1 auto;
	}
	div.column {
		flex: 50%;
		max-width: 50%;
	}
}