/*CSS Document used for project1 assignment
Author: Joe Licavoli
Course: ITWP1050*/

/* root selector with global variable*/
:root { 
	/* create variable for color white */
	--white: #FFFFFF;
}
/* This sets the universal selector*/
* {
	/*This sets the box sizing */
	box-sizing: border-box;
}

/* This selects eveything in the body tag */
body {
	/* Changes the font to the specified values*/
	font-family: Arial, Helvetica, sans-serif;
}

/* This the class for the header */
.header {
	/* Sets background color using the global variable*/
	background-color: var(--white);
	/* This inputs the image for the background in the header */
	background-image: url("images/baseball_headerimage.jpg");
	/* This sets the background image to cover the entire element*/
	background-size: cover;
	/* This centers the background image*/
	background-position: center;
	/* this centers the text*/
	text-align: center;
	/* Sets the height*/
	height: 250px;
	/* Sets the border-radius*/
	border-radius: 10px;
	/* Sets the inset X & Y offets border size and color*/
	box-shadow: inset 0 0 25px black;
}

/* The H1 selector */
h1 {
	/* Sets the color to the global variable*/
	color: var(--white);
	/* Sets the padding */
	padding: 15px;
}
/* The H2 selector*/
h2 {
	/* Centers the text*/
	text-align: center;
	/* Sets the padding */
	padding: 0;

}

/* The img selector*/
img {
	/* Creates the border around the img*/
	border: 3px double black;
	/* Sets the radius */
	border-radius: 10px;
	/* Sets the padding, weight, and height */
	padding: 5px;
	width: 100%;
	height: auto;
}
/* This is the ID selectors for awards and info*/
#awards, #info {
	/* Sets the text to the left and font size */
	text-align: left;
	font-size: 85%;
}
/* The Id selector for retired */
#retired {
	/* Sets the color and font weight */
	color: maroon;
	font-weight: bold;
}
/* The class selector for highlights*/
.highlights {
	/* This sets the text left and changes the font size */
	text-align: left;
	font-size: 85%;
}

/* The class selector for headlines */
.headlines {
	/* This sets the font size, makes it bold, and centers the text */
	font-size: 85%;
	font-weight: bold;
	text-align: center;

}
/* Create three unequal columns that floats next to each other -W#School */
.column {
	float: left;
	padding-top: 10px;
	padding-right: 10px;
	width: 30%;
}
/* Left and right column*/
.column.side {
	background-color: var(--white);
	width: 30%;
}
/* Middle column*/
.column.middle {
	width: 40%;
}
/* Clear floats 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%;
	}
}

/* This the class for footer */
.footer_validation {
	/* Sets the padding, centers the text and changes the font size */
	padding: 20px;
	text-align: center;
	font-size: 11px;

}