/* 
Filename: styles.css
Author: Jordan Wlash
Course: ITWP 1050
*/

/* root selector creating a global variable */
:root {
 --white: #ffffff;
}
/*  the universal selector */
* {
 box-sizing: border-box;
}
/* body selector setting the font family */
body {
 font-family: Arial, Helvetica, sans-serif;
}
/*.header class using the global white variable */
.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;
}
/* Style for h1 elements */
h1 {
 color: var(--white);
 padding: 15px;
}
/* Style for h2 */
h2 {
 text-align: center;
 padding: 0;
}
/* Style for image  */
img {
 border: 3px double black;
 border-radius: 10px;
 padding: 5px;
 width: 100%;
 height: auto;
}
/* ID selectors for awards and info */
#awards,
#info {
 text-align: left;
 font-size: 85%;
}
/* ID selector for retired */
#retired {
 color: maroon;
 font-weight: bold;
}
/* Class selector for highlights */
.highlights {
 text-align: left;
 font-size: 85%;
}
/* Class selector for headlines */
.headlines {
 font-size: 85%;
 font-weight: bold;
 text-align: center;
}
/* Create three unequal columns that float next to each other */
.column {
 float: left;
 padding-top: 10px;
}
/* Left and right columns */
.column.side {
 width: 30%;
 background-color: var(--white);
}
/* Middle column */
.column.middle {
 width: 40%;
}
/* Clear float after */
.row:after {
 content: "";
 display: table;
 clear: both;
}
/* Responsive adjustments */
@media (max-width: 600px) {
  .column.side,
  .column.middle {
  width: 100%;
 }
}
/* Style for footer validation class */
.footer_validation {
  padding: 20px;
  text-align: center;
  font-size: 11px;
}