/*
Melissa Daoud
ITWP 1150
2/17/2024
File name: styles.css

This is the CSS styling page used for homework 2
*/

/* Add a background image, readjust it for display and make sure it spans the whole page, align the text in the body to center */
body {
    background: url("images/mk8d.jpg") no-repeat;
    background-position-y: -164px;
    background-size: cover;
    text-align: center;
}

/* Resizing the font to make it easier to read */
p {
    font: 18px Arial, Helvetica, sans-serif;
}

/* Add a margin around the entire footer */
footer {
    margin: 50px;
}

/* Make a purple button with a dark blue border, bold white text, and a 14px font size so it's easy to read */
button {
    border: darkblue solid 5px;
    background-color: purple;
    color: white;
    font: bold 14px Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 10px 20px;
    margin-top: 10px;
}

/* Add effect to make it appear as though the button is 'pressed down' when clicked */
button:active {
    transform: translateY(2px);
}

/* Change the font color of visited links to dark red so they're more distinguishable */
a:visited {
    color: darkred;
}

/* ID Section */

/* Formats the container id. Give it a blue outset border of 4 px, set the width to 30% (just enough to cover the text), and set margin to auto */
#container {
    border: darkslateblue outset 4px;
    width: 30%;
    margin: auto;
}

/* ID that centers the validation text */
#validation {
    text-align: center;
}