/* CSS Document used for the project 1 assignment
Author: Ahmed Rokeeb
Course: ITWP 1050
File: styles.css
*/
:root {
    --white: #ffffff;
}

* {
    box-sizing: border-box; /* Set box-sizing to border-box for all elements*/
}

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

.header {
    background-color: var(--white); /* Use the white variable for background color */
    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 black;
}

/* Styling for h1 element */
h1 {
    color: var(--white); /* Text color referencing the white variable */
    padding: 15px; /* Padding of 15 pixels on all four sides */
}

/* Styling for h2 element */
h2 {
    text-align: center; /* Center align the text */
    padding: 0; /* Padding of 0 on all four sides for no spacing */
}

/* Styling for image elements */
img {
    border: 3px double black; /* 3 pixels wide double black border */
    border-radius: 10px; /* Border radius of 10 pixels */
    padding: 5px; /* Padding of 5 pixels on all sides */
    width: 100%; /* Width set to 100% */
    height: auto; /* Height set to auto */
}

/* ID selector for awards and info */
#awards, #info {
    text-align: left; /* Align the text to the left */
    font-size: 85%; /* Font size set to 85% */
}

/* ID selector for retired */
#retired {
    color: maroon; /* Text color set to maroon */
    font-weight: bold; /* Font weight set to bold */
}

/* Class selector for highlights */
.highlights {
    text-align: left; /* Align the text to the left */
    font-size: 85%; /* Font size set to 85% */
}

/* Class selector for headlines */
.headlines {
    font-size: 85%; /* Font size set to 85% */
    font-weight: bold; /* Font weight set to bold */
    text-align: center; /* Align the text to the 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); /*background color referencing the white variable */
}

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

/* Adds styling for the footer */
.footer_validation {
    padding: 20px; /* Adds 20 pixels of padding around the footer content for spacing */
    text-align: center; /* Centers the text within the footer */
    font-size: 11px; /* Sets the font size to 11 pixels to keep it small */
}