@charset "utf-8";

/* This is a global variable for white */
:root {
	--white: #ffffff;
}

/* This is a universal selector for box sizing */
* {
  box-sizing: border-box;
}

/* Setting the body font */
body {
	font-family: Arial, Helvetica, sans-serif;
}

/* A rule for the header area */
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: inset 0px 0px 25px black;
}

/* Using the global variable fo white for H1 */
h1 {
	color: var(--white);
	padding: 15px;
}

/* Centering and padding for h2 */
h2 {
	text-align: center;
	padding: 0px;
}
/* Some image styling */
img {
	border: 3px double black;
	border-radius: 10px;
	padding: 5px;
	width: 100%;
	height:auto;
}

/* Make the awards and info area left and 85% */
#awards, #info {
	text-align: left;
	font-size: 85%;
}
/* Make the retired text maroon and bold */
#retired {
	color: maroon;
	font-weight: bold;
}
/* Make the highlights area left and 85% */
.highlights {
	text-align: left;
	font-size: 85%;
}
/* Make the headlines text center and 85% and bold */
.headlines {
	font-size: 85%;
	font-weight: bold;
	text-align: center;
}

/* Create three unequal columns that float nest to eachother */

.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 floats after column */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the three columns stack on top of eachother instead of next to each other and to make image full width */

@media (max-width: 600px) {
	.column.side, .column.middle {
		width: 100%;
	}
		
	img {
        width: 100vw; /* Make image take the full viewport width */
        height: auto; /* Maintain aspect ratio */	
		
	}
}

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