/*Course: ITWP 1050
Author: Nicole Wozniak 
Assignment: Project 1*/

/* Global Variable */
:root {
    --white: #FFFFFF; 

}

/* Universal Selector */
* {
    box-sizing: border-box;
}

/* Body */
body{
 font-family: Arial, Helvetica, sans-serif;
}

/* 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: 0 0 25px black;
}

/* Elemental Selectors */
/* H1 */
h1{
    color: var(--white);
    padding: 15px;
}
/* H2 */
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 */
#awards, #info{
    text-align: left;
    font-size: 85%;
}

/* retired */
#retired{
    color:maroon;
    font-weight: bold;
}

/* Class Selectors */
/* Highlights */
.highlights{
    text-align: left;
    font-size: 85%;
}
/* Headlines */
.headlines{
    font-size: 85%;
    font-weight: bold;
    text-align: center;
}

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

/* CSS copied from assignment instructions */

/* Create three unequal columns that float next to each other-WSschools */
.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 float after columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next ot each other */
@media (max-width:600px) {
    .column.side, .column.middle{
        width:100%;
    }
}