body { background-color: #EAEAEA; color: #000000; font-family: Verdana, Arial, sans-serif; background-image: linear-gradient(to bottom,#FFD700,#FF6347);}
header { background-color: #FF6347; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-family: Georgia, serif; padding: 2px 2px 2px 2px; display: flex; align-items: center;}
header a:link { color: #FFFFFF;}
header a:visited { color: #FFFFFF;}
header a:hover { color: #A52A2A;}
header a { text-decoration: none;}
h1 { text-align: center; font-size: 1.5em;}
h2 { color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-family: Georgia, serif; text-align: center;}
h3 { font-family: Georgia, serif; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); text-align: center; text-wrap: nowrap;}
nav { text-align: center;}
nav a:link { color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-size: 1.5em; font-weight: bold;}
nav a:visited { color: #FFFFFF;}
nav a:hover { color: #A52A2A;}
/* I implemented nav a:hover directly above so when the mouse moves over the link it will show a different color. */
nav a { text-decoration: none;}
nav ul { list-style-type: none; padding-left: 0; display: flex; flex-direction: column; margin: 0;}
nav li { padding-top: .5em; padding-bottom: .5em; padding-left: 1em; padding-right: 1em; width: 100%; border-bottom: 1px solid;}
.paddle { color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-size: 1.2em;}
footer { font-size: .70em; font-style: italic; text-align: center; padding: 1em;}
#wrapper { background-image: linear-gradient(to bottom, #FFD700 20%, #FF6347 60%, #FFD700 100%);}
main { padding-left: 1em; padding-right: 1em; padding-top: 0; padding-bottom: 0; font-size: 20px;}
#sunsethero { height: 200px; background-image: url(Sunset.jpg); background-size: 100% 100%; background-repeat: no-repeat;}
#mountainhero { height: 200px; background-image: url(MountainLake.jpg); background-size: 100% 100%; background-repeat: no-repeat;}
#deserthero { height: 200px; background-image: url(DesertLake.jpg); background-size: 100% 100%; background-repeat: no-repeat;}
#friendshero { height: 200px; background-image: url(Friends.jpg); background-size: 100% 100%; background-repeat: no-repeat;}
#blowuphero { height: 250px; background-image: url(blowupboard.jpeg); background-size: 100% 100%; background-repeat: no-repeat;}
#hardhero { height: 250px; background-image: url(hardboard.jpeg); background-size: 100% 100%; background-repeat: no-repeat;}
#kayakhero { height: 250px; background-image: url(kayak.jpeg); background-size: 100% 100%; background-repeat: no-repeat;}
.logo { width: auto; height: auto; margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px;}
section { float: center; width: 80%; padding-left: .5em; padding-right: .5em; margin-left: auto; margin-right: auto; vertical-align: center;}
ul { display: flex; flex-direction: column;}
li { padding-top: .5em; padding-bottom: .5em; padding-left: 1em; padding-right: 1em; width: 100%;}
.custom-rule { border: solid; height: 0px; color: #FFFFFF;}
.back-to-top { display: block; text-align: right; text-decoration: none; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-weight: bold;}
.back-to-top:hover { color: #A52A2A;}
img { height: 180px; width: 225px; background-size: 100% 100%; background-repeat: no-repeat; padding-right: .5em; padding-left: .5em;}
.wrap { float: left;}
* { box-sizing: border-box;}
#mobile { display: inline;}
#desktop { display: none;}
table { margin: auto; width: 80%; border: 1px solid #000000; border-collapse: collapse;}
td, th { padding: 5px; border: 1px solid #000000;}
td { text-align: center;}
td.text { text-align: left;}
tr:nth-of-type(even) { background-color: #DFEDF8;}
form {display: flex; flex-direction: column; padding-left: 1em; width: 80%;}
input, textarea { margin-bottom: .5em; border: 1.5px solid #B0B0B0;}
input[type="submit"] { background-color: #CCCCCC;} 
input[type="number"] { width: 40%;}
/* I implemented @media rule directly below to create responsive designs that adjust to different screen sizes. */
@media (min-width: 600px) { 
h1 { font-size: 2.5em; letter-spacing: .25em;}
h3 { text-align: left;}
nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; padding-right: 2em;}
nav li { width: 12em; border-bottom: none;}
section { padding-left: .5em; padding-right: .5em; width: 33%; float: left;}
form { display: grid; width: 60%; grid-template-columns: 10em 1fr; grid-gap: 1em;}
input[type="submit"] { grid-column: 2; width: 9em;}
#flow { display: flex; flex-direction: row; }
#mobile { display: none;}
#desktop { display: inline;}
#sunsethero { background-size: 100% 100%;}
#mountainhero { background-size: 100% 100%;}
#deserthero { background-size: 100% 100%;}
#friendhero { background-size: 100% 100%;}
}
@media (min-width: 1024px) {
body { background-image: linear-gradient(to bottom, #FFD700 20%, #FF6347 60%, #FFD700 100%);}
nav ul { padding-right: 5%; padding-left: 5%;}
#wrapper { margin: auto; width: 80%;}
section { width: 33%; padding-left: .5em; padding-right: .5em; margin-left: auto; margin-right: auto;}
}