/*
    Author:     Philip Howard
    Date:       2026-03-27
    Course:     ITWP 1050
    Filename:   styles.css

    Stylesheet for project 1
*/

/*Declare variables*/
:root{
    --white: #ffffff;
}

/*Set universal defaults*/
*{
    box-sizing: border-box;
}

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

/*H1 element style*/
h1{
    color: var(--white);
    padding: 15px;
}

/*H2 element style*/
h2{
    text-align: center;
    padding: 0px;
}

/*Img element style*/
img{
    border: 3px double black;
    border-radius: 10px;
    padding: 5px;
    width: 100%;
    height: auto;
}
/*End element styles*/
/*********************************/



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

/*Styles for retired*/
#retired{
    color: maroon;
    font-weight: bold;
}
/*End ID styles*/
/*********************************/



/*Class styles*/
/*********************************/
/*Header class style*/
.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;
}

/*Highlights class style*/
.highlights{
    text-align: left;
    font-size: 85%;
}

/*Headlines class style*/
.headlines{
    font-size: 85%;
    font-weight: bold;
    text-align: center;
}

/*Footer validation class style*/
.footer_validation{
    padding: 20px;
    text-align: center;
    font-size: 11px;
}
/*End class styles*/
/*********************************/



/*Template styles*/
/*********************************/
/*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%;
    }
}