/* 
	FileName: styles.css
	Author: Christopher Millen
	Course: ITWP 1050
	Info: Style sheet to style the Miguel Cabrera Legend Page
*/


/*Root selector that styles color for page */
:root{
	--white: #FFFFFF;
}


/*Universal selector that sets box sizing for page*/
*{
	box-sizing: border-box;
}

/*body selector that sets the font type for page*/
body{
	font-family: Arial, Helvetica, sans-serif;
}

/*class selector named header that styles background*/
.header{
	background-color: var(--white);
	background-image: url(images/baseball_headerimage.jpg);
	background-size: cover;
	background-position: center;
	text-align: center;
	height: 250px;
	border-radius: 10px;
	box-shadow:0 0 25px black inset;
}

/*heading selector for h1 for color and padding*/
h1{
	color: var(--white);
	padding: 15px;
}

/*heading selector for h2 text alignment and padding*/
h2{
	text-align: center;
	padding: 0;
}

/*img selector that styles the image on the page*/
img{
	border: 3px double black;
	border-radius: 10px;
	padding: 5px;
	width: 100%;
	height: auto;
}

/*ID selectors named awards and info that style font size and text alignment*/
#awards, #info{
	text-align: left;
	font-size: 85%;
}

/*ID selector named retired that styles color and font-weight for span*/
#retired{
	color: maroon;
	font-weight: bold;
}

/*class selector named highlights for font size and text alignment*/
.highlights{
	text-align: left;
	font-size: 85%;
}

/*class selector named headlines for font size, weight, and text alignment */
.headlines{
	font-size: 85%;
	font-weight: bold;
	text-align: center;
}

/*Create three unequal columns that floats next to each other - W3Schools */
.column{
	float: left;
	padding-top: 10px;
	padding-right: 10px;
	width: 30%;
}

/*left and right column*/
.column.side{
	width: 30%;
	background-color: var(--white);
}

/*Middle Column*/
.column.middle{
	width: 40%;
}

/*Clear floasts after the columns*/
.row:after{
	content: "";
	display: table;
	clear: both;
}

/*Responsive layout - makes the three columns stack on top of each other instead of next to each other*/
@media(max-width: 600px){
	.column.side, .column.middle{
		width: 100%;
	}
}

/*styles for the footer*/
.footer_validation{
	padding: 20px;
	text-align: center;
	font-size: 11px;
}