/*
Author: William Bergler
Course ITWP 1050
File: styles.css
CSS external file for project 1
*/

/*Creates a global variable that has color white*/
:root{
    --white: white;
}

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

/*Formats the bodys font*/
body{
    font-family: Arial, Helvetica, sans-serif;
}

/*creates a class that sets the background to an image*/
.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 inset;
}

/*text color of h1 to white*/
h1{
    color: var(--white);
    padding: 15px;
}

/*aligns h2 text to center*/
h2{
    text-align: center;
    padding: 0;
}

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

/*creates 2 IDs that align and size text*/
#awards, #info{
    text-align: left;
    font-size: 85%;
}

/*creates an ID that bolds and colors the text*/
#retired{
    color: maroon;
    font-weight: bold;
}

/*class that aligns text to the left*/
.highlights{
    text-align: left;
    font-size: 85%;
}

/*class that bolds and centers text*/
.headlines{
    font-size: 85%;
    font-weight: bold;
    text-align: center;
}

/*Create three unequal columns that float 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 column*/
.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%;
    }
}

/*Centers, and changes font size and padding of the footer*/
.footer_validation{
    padding: 20px;
    text-align: center;
    font-size: 11px;
}