/*CSS Reset*/
body, main, nav{ 
    margin: 0;
    padding: 0;
    border: 0;
}

main, body, head, header, h1, h2, h3, h4, h5, nav, br{
    text-align: center;
}

body{
    color: white;
    background: linear-gradient(to bottom, #0048ffcc 0%, #FF2400 100%);
}

/*Table Customization Rules to differentiate them*/

#tableone{
    margin: 1em 2em 2em 32%;
    background-color: blue;
}

#tabletwo{
    margin: 1em 2em 2em 30%;
    background-color: plum;
}

#tablethree{
    margin: 1em 2em 2em 28%;
    background-color: teal;
}

#tablefour{
    margin: 1em 2em 2em 22%;
    background-color: purple;
}

table{
    border: 1em solid black;
    padding: 1em;
    text-align: center;
    border-radius: 2em;
    color: black;
}

th, tr{
    border: .5em inset black;
    background-color: wheat;
    font-weight: bold;
}

th, caption{
    font-style: oblique;
}

td{
    padding: .5em;
}
td#Price{
    color: green;
}
td#Price:hover {
    background-color: yellow;
}

tr:hover {background-color: #e80000;}

a:hover{
    color: #e80000;
}

caption{
    margin: 0em;
    padding: 0em;
    font-size: larger;
    font-weight: bold;
}

/*Form Control*/

form{
    font-size: larger;
    border: black solid;
    padding: .5em;
    margin: .5em;
    font-weight: bolder;
    border-width: 1em;
}
label{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

input[type="radio"]:hover {
    outline: .25em dotted black;
}

form div{
    border: black solid;
    border-radius: .5em;
    padding: .5em;
    margin: .5em;
}

/*Grid Content*/
.grid{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    padding: .5em;
}