/* styles.css */

/* font-family: 'DM Serif Display', serif;
font-family: 'Roboto', sans-serif; 
fonts from https://fonts.google.com/ 10/17/23*/

/* CSS Reset Styles */
body, header, nav, main, footer, img, h1, ul, section, aside, figure, figcaption, div {
	margin: 0;
	padding: 0;
	border: 0;
}
/*Style rule for box sizing aplplying to ALL elements*/
* {
box-sizing; border-box;
}

/* Style rule for images */

/*homepage images */

/* Main picture on homepage styles */
#main{
	width: 100%;
	height: 35em; 
	border-bottom: solid;
	border-width: 1em;
	border-color:#C12E09; 
}

figure{
	position: relative;
	max-width: 250px;
	margin: 2% auto; 
	
}

/*style rules for nav */
nav ul{
	list-style-type: none;
	text-align: none;
	color: #C12E09;
}

nav li {
	border-top: none;
	display: inline-block;
	border-right: 1px solid #e5e9fc;
	font-size: 1.5em;
	}
	
nav li:last-child {
	border-right: none;
	}
	
nav li a {
	padding: 0.75em 1.5em;
	text-decoration: none; 
	color: #C12E09;
	}
	
nav li a {
	
	}
	
	nav li a:hover {
		color: #373684;
		background-color: #e5e9fc;
	}
	

/*Style rules for headers */
header h1, #whll, h3{
	font-family: Roboto;
}

header {
	padding: 2;
	background-color: #C12E09;
	color: white; 
	font-size: 1.5em; 
	
}

#whll{
	text-align: center;
	padding: 2%;
	color: #897F7C;
	font-size: 4em;
} 

/*Style rules for main content */ 
#intro{
	text-align: center; 
	font-size: 2em; 
	border-bottom: solid;
	border-width: 0.5em;
	border-color: #C12E09; 
}

main{
	font-family:"Roboto";
	padding: 1%;
}

.full{
	text-decoration: bold;
	color: #C12E09;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 2em;
}

.text {
  font-size: 20px;
  padding-left: 20px;
  text-align: center; 
  padding: 1em;
}

.mainpics1{
	width: 30em;
	height:25em;	
}

footer{
	text-align: center;
	font-family:"Roboto";
	padding: 2em;
} 

.hp{
	border-bottom: solid;
	border-width: 0.5em;
	border-color: #C12E09; 
} 

.container{
	border: solid;
	border-width: 0.5em;
	border-color: black;
	margin: 1em;
} 

.train1{
	width: 20em;
	height:15em; 
	border: solid; 
	border-width: 0.5em;
	border-color: black;
}

.grid{
	display: grid;
	grid-template-columns: 20em 20em 20em 20em; 
	grid-gap: 20px;
	} 
	
figcaption{
	float: right; 
	font-size: 1.5em; 
	font-weight: bold;
	background-color:  #C12E09;
	color: white;
}