/* Global styles for the document */
/* the hands on excercise and referencing the code in 4.4 was extremely helpful doing the gradient. When testing the code I realized I first applied the wrong gradient and had to reread the instructions to ensure I was doing it correctly.*/
body {
    background-color: #90c7e3;
    background-image: linear-gradient(#ffffff, #90c7e3);
    background-repeat: no-repeat;
    color: #666666;
    font-family: Verdana, Arial, sans-serif;

}

/* Styles for the header element. This part seemed easy enough except my background was repeating and it was becuase I had it set to 'none' instead of no-repeat. I changed it and I was having trouble fidning the sunsest, it wasn't until I expanded my screen that I realized it was there and I wasted a lot of time trying to figure this out.*/
header {
    background-color: #002171;
    background-image: url(sunset.jpg);
    background-repeat: no-repeat;
    background-position: right;
    height: 72px;
    color: #FFFFFF;
    font-family: Georgia, serif;
}

/* Styles for the h1 element - aligned heading text and modified padding on top*/
h1 {
    text-align: center;
    padding-top: .5rem;
}

/* Styles for the nav element - removed background color, set padding as .5rem on all sides and centered text. */
nav {
    font-weight: bold;
    text-align: center;
    padding-top: .5rem;
    padding-left: .5rem;
    padding-bottom: .5rem;
    padding-right: .5rem;
}
/* I orginally tried to add this to the rule above and had to review the book to figure out that it needed its own seperate rules. This was added to remove hyperlink underlines. */
nav a {text-decoration: none;
}

main { 
    padding-left: 2em;
    padding-right: 2em;
    display: block;
}

/* these are style rules for the hero images - once I figured out how to do one, I copy and pasted the remaining rules.*/

#trailhero {
  height: 300px;
  background-image: url(trail.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#yurthero {
  height: 300px;
  background-image: url(yurt.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#coasthero {
  height: 300px;
  background-image: url(coast.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}



/* Styles for the h2 element */
h2 {
    color: #1976D2;
    font-family: Georgia, serif;
}

/* Styles for the h3 element - I added this to the CSS, set the font family. */
h3 {
  font-family: Georgia, "Times New Roman", serif;
}

/* Styles for the dt element */
dt {
    color: #002171;
    font-weight: bold;
}

/* Styles for a class named resort */
.resort {
    color: #1976D2;
    font-size: 1.2em;
}

/* Styles for the footer element - changed padding*/
footer {
    font-size: 0.70em;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Style rule for the wrapper ID - this part was intuitive for me, the predictive text was helpful and a refresher. The only error I had was I forgot to remove "width" at first and had to review the code a few times to maek sure it worked correctly, for a simple mistake.*/
#wrapper {
    background-color: #ffffff;
    min-width: 960px;
    max-width: 2048px;
    box-shadow: 3px 3px 3px #333333;
    margin-right: auto;
    margin-left: auto;
}