/* 
   Wild Rescues Stylesheet
   Student Name
   Date
*/

/* CSS Reset */

body, header, nav, main, footer, img, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
border: 0;
}

/* Body */

body {
background-color: #f6eee4;
font-family: Verdana, Arial, sans-serif;
}

/* Images */

img {
max-width: 100%;
display: block;
}

/* Header */

header {
text-align: center;
background-color: #2a1f14;
color: #fff;
padding: 2%;
}

/* Navigation */

nav {
background-color: #2a1f14;
}

nav ul {
list-style-type: none;
text-align: center;
}

nav li {
border-top: 1px solid #fff;
}

nav li a {
display: block;
color: #fff;
padding: 0.5em 1em;
text-decoration: none;
}

/* Main */

main {
padding: 2%;
font-size: 1.1em;
}

/* Footer */

footer {
text-align: center;
font-size: 0.75em;
background-color: #2a1f14;
color: #fff;
padding: 2%;
margin-top: 2%;
}

/* Mobile Classes */

.mobile,
.mobile-tablet {
display: block;
}

.tab-desk,
.desktop {
display: none;
}

/* Gallery */

.gallery {
display: block;
}

/* Contact */

#contact,
#form h2 {
text-align: center;
}

/* Style rules for form elements */

fieldset,
input,
textarea {
margin-bottom: 2%;
}

legend {
font-weight: bold;
font-size: 1.25em;
}

label {
display: block;
padding-top: 2%;
}

#submit {
margin: 0 auto;
display: block;
padding: 2%;
background-color: #78593a;
color: #f6eee4;
font-size: 1.25em;
border-radius: 10px;
}

/* Tablet Media Query */

@media screen and (min-width: 620px) {

/* Tablet Viewport: Navigation */

nav li {
display: inline-block;
border-top: none;
}

/* Tablet Viewport: Style rule for form element */

form {
width: 70%;
margin: 0 auto;
}

}

/* Desktop Media Query */

@media screen and (min-width: 1000px) {

/* Desktop Viewport: Show desktop class, hide mobile-tablet class */

.desktop {
display: block;
}

.mobile-tablet {
display: none;
}

/* Navigation */

nav li {
display: inline-block;
font-size: 1.2em;
}

/* Style rules for table */

table {
border: 1px solid #2a1f14;
border-collapse: collapse;
margin: 0 auto;
}

caption {
font-size: 1.5em;
font-weight: bold;
padding: 1%;
}

th,
td {
border: 1px solid #2a1f14;
padding: 1%;
}

th {
background-color: #2a1f14;
color: #fff;
font-size: 1.15em;
}

tr:nth-child(odd) {
background-color: #deccba;
}

/* Desktop Viewport: Style rules for form elements */

form {
width: auto;
}

.form-grid {
display: grid;
grid-template-columns: auto auto;
grid-gap: 20px;
}

.btn {
grid-column: 1 / span 2;
}

}