@charset "utf-8";
/* CSS Document */

/* Global root selector */
:root {
	--white: #ffffff;
}

/* Universal selector */
* {
	box-sizing: border-box;
}

/* Body font selector */
body {
	font-family: Arial, Helvetica, sans-serif;
}


/* Header selector */
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 0 rgba(0, 0, 0, 0.5)
}

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

/* h2 element selector */	
h2 {
  text-align: center;
  padding: 0;
}	

/* Image element selector */
img {
  border: 3px double black;
  border-radius: 10px;
  padding: 5px;
  width: 100%;
  height: auto;
}

/* Awards and info ID */
#awards,
#info {
  text-align: left;
  font-size: 85%;
}

/* Retired ID */
#retired {
  color: maroon;
  font-weight: bold;
}

/* Highlights class */
.highlights {
  text-align: left;
  font-size: 85%;
}

/* Headlines class */
.headlines {
  font-size: 85%;
  font-weight: bold;
  text-align: center;
}

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

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

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

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

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


/* Footer validation class */
.footer_validation {
  padding: 20px;
  text-align: center;
  font-size: 11px;
}