/* 
Jordan Winburn
ITWP-1450
Final Project
*/

/*Style the general page to be the color we'd like.*/
html {
    background-color: #2f302f;
}

/*Style our general/main paragraph elements to be the proper color, font, alignment, and size.*/
p {
    color: white;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}

/*Style our anchored elements, for our use-case links, to be the right text color, changing 
the default link text properties to make it look more like envisioned on the wireframe.*/
a {
    color: white;
    text-decoration-line: none;
    font-weight: bold;
}

/*Allow links to be a special color when moused over to indicate they are links to desktop users.*/
a:hover {
    color: yellow;
}

/*Style our h1 header to be the proper size, color, alignment, and weight.*/
h1 {
    color: white;
    text-align: center;
    font-weight: bold;
    scale: 150%;
    transform: skew(-10deg);
}

h2 {
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    scale: 110%;
}

/*Style our table elements to look nicer with proper spacing!*/
td {
    padding: 15px;
}

/*Style the header to be the navigation bar.*/
header {
    background-color: dodgerblue;
    text-align: center;
    font-size: large;
    color: white;
    padding: 8px;
    position: sticky;
    top: 0;
    /*Always make header appear/render over other elements, such as the <h#> tags.*/
    z-index: 10;
}

/*Style the footer to contain useful links on all pages like other proper websites. Stick it to
bottom of the page.*/
footer {
    background-color: black;
    width: 100%;
    text-align: justify;
    color: white;
    padding: 20px;
    left: 0;
    bottom: 0;
}

/*Styling for contact page form.*/
/*Sourced from W3Schools (https://www.w3schools.com/howto/howto_css_contact_form.asp)
Edited to fit the site.*/
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;
}
input[type=submit] {
  background-color: dodgerblue;
  color: white;
  padding: 12px 20px;
  margin: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
label {
    color: white;
}

/*Size the logo to fit nicely with the footer and be responsive.*/
#logo {
    float: left;
    max-width: 15%;
    height: auto;
}

/*Size the home page icon to fit better in the nav bar and be responsive.*/
#homecon {
    float: left;
    max-width: 4%;
    height: auto;
}

/*Make our home page console photo reactive and have the text wrap around it.*/
#consoles {
    float: right;
    max-width: 100%;
    height: auto;
}

/*Center the tables on the Emulators page.*/
#emuTable {
    margin-left: auto;
    margin-right: auto;
}