/* 
author: Joshua McBrantie
class: ITWP-1050 
file name: project 1
assignment description: format a plain web document 
using css and skills acquired in itwp-1000.  follow 
instructions and validate html and css of the file. 
*/

/* --------------------------------------------------- */

:root {
    --white: #f2f2f2; /* variable created for the color white */

}
*{/* universal selector */
    box-sizing: border-box;

}

body {
    font-family: Arial, Helvetica, sans-serif;


}

.header { /*a class allowing you to edit content in the header section inside a div seems kinda 
    redundant as you could have just targeted the header element. if there was more content than 
    the one div you might want to do this. */
    background-color: var(--white);
    background-image: url("/itwp1050/project1/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; /* adding the inset is a nice touch of depth at the top of the page. */

}
h1 {
    color: var(--white);
    padding: 15px;
}
h2 {
    text-align: center;
    padding: 0;
}
img {
    border: 3px double black;
    border-radius: 10px;
    padding: 5px;
    width: 100%;
    height: auto;
}

#awards, #info { /* using the , seperator allows you to target mutiple elements.ids,
     or classes with the same properties. */
    text-align: left;
    font-size: 85%; /* a good way to make sure font is always readable no matter how 
    big or little the page gets  */
}
#retired {
    color: maroon;
    font-weight: bold;
}

.highlights {
    text-align: left;
    font-size: 85%;
}
.headlines {
    font-size: 85%;
    font-weight: bold;
    text-align: center;
}

.column {
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    width: 30%;
}

.column.side {
    width: 30%;
    background-color: var(--white);
}

.column.middle {
    width: 40%;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) { /* great minimal effort to fix sizing on smaller screens 
    like phones. you can do this with all elements as well depending on how pages are setup. 
    for example if you had a nav bar you could stylize it as a pop up menu for phones. */
    .column.side, .column {
        width: 100%;
    }
}

.footer_validation {
    padding: 20px;
    text-align: center;
    font-size: 11px;

}