/*Semantic elements. */
/* This is a really long block but it makes the nav bar stick to the top of the screen and move as user scrolls. The z-index part also makes sure that it scrolls on top of everything. */
nav {
    background-color: rgb(8, 46, 8);
    color: gold;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 10;
    text-align: center;
    font-size: 20px;
}

nav a {
    color: rgb(92, 171, 92);
    text-decoration: none;
}

/* This style rule only applies to the links in the nav bar when the user hovers over them. It allows the user to better see what link they're about to click. */
nav a:hover {
    text-decoration: underline;
    color: gold;
}

body {
    background-color: #008000;
    text-align: center;
}

main {
    overflow: auto;
}

footer {
    background-color: rgb(8, 46, 8);
    color: gold;
    width: 100%;
    text-align: center;
    font-size: 10px;
}

footer a {
    color: gold;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: gold;
    font-size: 18px;
}

/* Text and text containers. */
/* This will change all of the headings to the font that I got off of Google Fonts. It makes the text look spooky. */
h1, h2, h3, h4, th, legend {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}

table p {
    width: 80%;
    text-align: center;
    position: relative;
    left: 55px;
    bottom: 40px;
}

dt {
    text-decoration: underline;
}

dd {
    padding-bottom: 10px;
}

 th, td {
     border: 5px solid gold;
}

th {
    text-decoration: underline;
    text-align: center;
}

fieldset {
    border: 5px solid gold;
    margin: 10px;
}

legend {
    text-align: left;
    font-size: 15pt;
}

/* Links. */
a {
    color: rgb(8, 46, 8);
    text-decoration: none;
}

a:hover {
    color: gold;
    text-decoration: underline;
}

/* Classes. */
/* The border-radius attribute rounds the corners of the hero image (the big image on the home page). */
.hero-image {
    padding: 10px;
    border-radius: 60px;
}

.Jane-Doe-img {
    border: 5px solid gold;
}

.John-Doe-img {
    border: 5px solid gold;
}

.rooms {
    border: 5px solid gold;
    text-align: left;
    position: relative;
    left: 510px;
    border-collapse: collapse;
}

.amenities {
    border: 5px solid gold;
    text-align: left;
    position: relative;
    left: 589px;
    border-collapse: collapse;
}

.packages {
    border: 5px solid gold;
    text-align: left;
    position: relative;
    left: 560px;
    border-collapse: collapse;
}

.request-main {
    width: 50%;
    position: relative;
    left: 364px;
}

.request-footer {
    position: fixed;
    bottom: 0px;
}

.general-info {
    display: inline;
}

.one {
    display: inline;
}

.two {
    display: inline;
}

.three {
    display: inline;
}

.headshots-title {
    position: relative;
    text-decoration: underline;
}

.submit {
    background-color: gold;
    font-size: 12pt;
}

/* Sections and divs. */
#stay {
    display: block;
}

#room {
    display: inline;
}

#thankyou {
    position: relative;
    top: 215px;
}

#jane-doe {
    padding: 5px;
    margin: 5px;
    width: 40%;
}

#john-doe {
    padding: 5px;
    margin: 5px;
    width: 40%;
}

#headshots {
    position: relative;
    text-align: center;
}