/* 
  Name: Evan Jackovich
  Course: ITWP 1050
  Assignment: Project 1
  Date: 3/29/2025
*/

/* section 1 step 4(global variable)*/
:root {
  --white: #ffffff;
}

/* section 1 step 5(universal selector)*/
* {
 
  box-sizing: border-box;
}
/* section 1 step 6(body)*/
body {

  font-family: Arial, Helvetica, sans-serif;
}

/* section 1 step 7(header)*/
.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 0 0 25px black;
}
/* section 1 step 9(h1)*/
h1 {
  color: var(--white);
  padding: 15px;
}

/* section 1 step 10(h2)*/
h2 {
  text-align: center;
  padding: 0;
}

/* section 1 step 11(image element selector)*/
img {
  border: 3px double black;
  border-radius: 10px;
  padding: 5px;
  width: 100%;
  height: auto;
}

/* section 1 step 12(ID: Awards and Info)*/
#awards, #info {
  text-align: left;
  font-size: 85%;
}

/* section 1 step 12(ID: Retired)*/
#retired {
  color: maroon;
  font-weight: bold;
}

/* section 1 step 14(Class: Highlights)*/
.highlights {
  text-align: left;
  font-size: 85%;
}

/* section 1 step 15(Class: Headlines)*/
.headlines {
  font-size: 85%;
  font-weight: bold;
  text-align: center;
}

/* section 1 step 16(tempelte design)*/
/*Create three unequal colums that floats next to each other -W3Schools*/
.column{
	float: left;
	padding-top: 10px;
	padding-right: 10 px;
	width: 30%;
}

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

/*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%;
	}
}

/* section 1 step 17(class: footer_validation)*/
.footer_validation {
  padding: 20px;
  text-align: center;
  font-size: 11px;
}