* { box-sizing: border-box; }
header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }

#contact { font-size: 90%; }
#mobile { display: none; }
#desktop { display: inline; }

body {
    background-color: #FFFFFF;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
    width: 80%;
    min-width: 900px;
    max-width: 2050px;
    margin: 0 auto;
    border: 1.5pt solid #003300;
    background-color: #0C5442;
    background-image: linear-gradient(to bottom, #FFFFFF, #0C5442);
    box-shadow: 4px 4px 0 #133926;
}

header {
    height: 175px;
    padding-top: 30px;
    padding-left: 3em;
    background-color: #00B386;
    color: #FFFFFF;
    margin-bottom: 0;
}

h1 {
    margin-top: 0;
    font-size: 3em;
    letter-spacing: 0.25em;
}

nav {
    padding: 1.5em;
    font-size: 120%;
    float: left;
    width: 160px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    font-size: 1.2em;
}

nav a {
    color: #00664D;
    text-decoration: none;
    transition: color 3s ease-out;
}

nav a:visited { color: #7A7A52; }
nav a:hover { color: #FFFFFF; }

main {
    background-color: #FFFFFF;
    margin-left: 190px;
    padding: 1px 20px 20px 30px;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
h2 { color: #00664D; text-shadow: 1px 1px #CCCCCC; }
h3 { color: #006646; }
main ul { list-style-image: url('marker.gif'); }
dt { color: #00664D; }

footer {
    font-size: 75%;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    padding: 15px;
    margin-left: 190px;
    background-color: #FFFFFF;
    clear: both;
}

.barn { color: #70DBDB; font-weight: bold; }

#heroHome { height: 300px; background-image: url('heroHome.png'); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; }
#heroBoard { height: 300px; background-image: url('fenceline.png'); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; }
#heroTraining { height: 300px; background-image: url('BayBella.png'); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; }

label { float: left; display: block; text-align: right; width: 125px; padding-right: 2em; }
input, textarea { display: block; margin-bottom: 20px; }
input[type="submit"] { margin-left: 135px; }

table { border: 1.5px solid #006600; border-collapse: collapse; width: 100%; margin-top: 1em; }
td, th { border: 1px solid #006600; padding: 0.5em; }
tr:nth-of-type(odd) { background-color: #ECF9EC; }

#gallery { position: relative; width: 400px; margin-top: 20px; }
#gallery input[type="radio"] { display: none; }
#gallery .large { display: none; width: 100%; height: auto; }
#img1:checked ~ figure img:nth-of-type(1),
#img2:checked ~ figure img:nth-of-type(2),
#img3:checked ~ figure img:nth-of-type(3),
#img4:checked ~ figure img:nth-of-type(4) { display: block; }

#gallery ul { list-style: none; padding: 0; margin-top: 10px; display: flex; gap: 10px; }
#gallery ul li img { width: 100px; height: 75px; cursor: pointer; border: 2px solid #ccc; transition: border 0.3s; }
#gallery ul li img:hover { border: 2px solid #00664D; }

@media only screen and (max-width: 64em) {
    body { margin: 0; background-color: #FFFFFF; }
    #wrapper { min-width: 0; width: auto; box-shadow: none; border: none; }
    header { padding: 0.5em; height: auto; }
    h1 { letter-spacing: 0.1em; }
    main { margin-left: 0; }
    nav { float: none; width: auto; text-align: center; padding: 0.5em; }
    #heroHome, #heroBoard, #heroTraining { margin-left: 0; height: 200px; }
    footer { margin-left: 0; }
}

@media only screen and (max-width: 37.5em) {
    main { padding: 0.1em 1em; font-size: 90%; }
    h1 { font-size: 2em; }
    nav { padding: 0; }
    nav li { display: block; margin: 0; border: solid 2px #330000; }
    nav a { display: block; }
    #heroHome, #heroBoard, #heroTraining { background-image: none; height: 0; }
    #mobile { display: inline; }
    #desktop { display: none; }
    label { float: none; text-align: left; }
    input[type="submit"] { margin-left: 0; }
    #gallery { display: none; }
}