/* Kayla Perez ITWP1050 Project 1 */

:root {
    --white: #FFFFFF; /* Declare the white color variable */
}

*{
    box-sizing: border-box;
}

/* Sets the font family for the entire document */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Uses global white variable as the background color */
.header {
    background-color: var(--white); /* Uses the white variable */
    background-image: url("images/baseball_headerimage.jpg"); /*Adds background image */
    background-size: cover;
    background-position: center; /* Centers background image */
    text-align: center;
    height: 250px;
    border-radius: 10px; 
    box-shadow: inset 0px 0px 25px black; /* Adds an inset black shadow */
}

/* Sets text color using the white variable and adds padding */
h1 {
     color: var(--white); 
     padding: 15px; 
}

h2 {
    text-align: center; /*Centers the text*/
    padding: 0px; /* Removes padding on all four sides */
}

/* Applies border, border radius, padding, width, and height properties */
img {
    border: 3px double black; /* 3px double black border */
    border-radius: 10px;
    padding: 5px; /* 5px padding on all four sides */
    width: 100%;
    height: auto;
}

/* Aligns text to the left and sets the font size to 85% */
#awards, #info {
    text-align: left; /* Aligns text to left */
    font-size: 85%;
}

#retired {
    color: maroon; /*Sets text color to maroon */
    font-weight: bold; /* Bolds the text */
}
/* Class for highlighting text */
.highlights {
    text-align: left; /* Aligns text to left */
    font-size: 85%; /* Sets font size to 85% */
}
/* Class for headlines */
.headlines {
    font-size: 85%; /* Sets font size to 85% */
    font-weight: bold; /* Bolds the text */
    text-align: center; /* Centers the text */
}

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

/* Left and right column */
.column.side {
    color: var(--white); /* Uses the white variable */
    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% /* Stack the columns on small screens */
    }
}

.footer_validation {
    padding: 20px; /* Adds 20px of padding on all sides */
    text-align: center; /* Centers the text */
    font-size: 11px; /* Sets font size to 11px */
}