/* CSS Style Sheet for ITWP 1150 Homework #2 */
/* Edith Harvey */

/* body style */
body {
     font-family: "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     background-color: #EEE8AA; /* pale goldenrod yellow */
     /* I purposely did not put a top border */
     border-left: #FFFFFF 5px solid;
     border-right: #FFFFFF 5px solid;
     border-bottom: #FFFFFF 5px solid;
}

/* main style to make it boxlike within the whole page */
main {
     font-family: "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     font-size: 12px;
     background-color: #99CC99; /* fills the background with the seafoam color */
     color: #660066; /* deep purple */
     border: #660066 5px double;
     width: 75%;
     /* centering the table */
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
/* Heading Styling Tags */
/* Heading 1 - h1 Tag */
h1 {
     /* Decided to change the font just for the top header */
     font-family: "Century Gothic", Arial, Helvetica, sans-serif;
     font-style: italic;
     text-align: center;
}

/* Styling for ID Container */
#container {
    width: 35%;
    padding: 1em;
    font-size: 1.25em;
    /* centering the container */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #FFFFFF;
    color: #660066; /* deep purple */
    border: #AFEEEE 10px dotted; /* pale turquoise */
    /* I usually align left or center. Thought I'd have fun with right alignment this time */
    text-align: right;
}
/* Styling for ID Container2 */
#container2 {
     width: 25%;
     padding: .75em;
     /* centering the container */
     margin-left: auto;
     margin-right: auto;
     position: relative;
     background-color: #EEE8AA; /* pale goldenrod yellow */
     color: #0080A8;
     margin-bottom: 10px;;
}

/* styling for the button class used for the button */
button {
     background-color: #33CCCC; /* turquoise */
     color: #FFFFFF;
     font-weight: bold;
     width: 100%;
     /* centering the button in container */
     margin-left: auto;
     margin-right: auto;
     position: relative;
}

/* Required CSS - ID that centers the validation text */
#validation {
     text-align: center;
}
/* Required CSS - add a margin around the entire footer */
footer {
     margin: 50px;
}