/* Project1 Emily Gorgees ITWP 1050 In this assignment, I will be taking a plain web document and format it with CSS. */ 

/* A global variable using the :root selector. Setting the color to white*/
:root {
    --white: #ffffff
}

/* Universal selector to add the box-sizing property with a border-box value */
* {
    box-sizing: border-box;
}

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

/* A class named header that sets the background color, background image, background size, background position, alligns the text, sets the height, applies border-radius, and box-shadow.*/
.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 black inset;
}

/* h1 element selector that sets text color and padding.*/ 
h1{
    color: var(--white);
    padding: 15px;
}

/* h2 element selector that sets the padding and aligns text in the center */
h2{
    text-align: center;
    padding: 0;
}

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

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

/* ID selector retired*/ 
#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 floats next to each other -W3Schools */
.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 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%;
    }
}

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