/* html.home {
    background: url(images/surprise-thumbs-up.jpg) no-repeat top center fixed; 
    background-size: cover;
}
html{
    background-color: rgba(0,51,0, .7); 
}
*/
#site #logo {
    margin: 2rem auto;
    max-width: 700px;
}
body {
    /*
    background-image: url(images/thumbs-up.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    */
    text-align: left;
    font-size: 100%;
    font-family: calibri, arial, verdana, sans-serif;
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    color: #666;
    margin: 0;
    padding: 0 1rem 2rem 1rem;
    background-color: #fff; 
    /* background-color: #AC0016; */
    background: repeating-linear-gradient(
      to right,
      rgba(0,70,0, .8),
      rgba(0,70,0, .8) 10px,
      rgba(0,120,0, .8) 10px,
      rgba(0,120,0, .8) 20px
    );
}
.home body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(images/thumbs-up.jpg) -250px 0;
      background: url(images/thumbs-up.png) -250px 0;
      background-size: calc(100% + 250px)
      /*
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      */
}

#site {
    max-width: 1000px;
    background-color: rgba(0,0,0, 0);
    padding: 0;
    font-size: 1.7rem;
    margin: 0 auto 1rem auto;
    text-align: center;
}
.home #site {
    margin: 0rem 1rem 1rem calc(250px + 1rem);
}
#foot {
    position: fixed;
    color: #300;
    text-align: left;
    margin: 0;
    background-color: rgba(0,70,0, .7);
    z-index: 9;
    font-size: 1.4rem;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    text-align: left;
    padding: 0 .5rem .5rem ;
}
#site img {
    border: none;
}
#main-nav ul {
    margin: 0;
    list-style: none;
    padding-left: 0px;
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    flex-direction: row-reverse;
    row-gap: .5rem;
}
#main-nav ul li {
        min-width: calc(25% - .5rem);
}

#main-nav ul li a:link, #main-nav ul li a:visited {
    display:block;
    color: #fff;
    background-color: #000;
    font-weight: bold;
    text-decoration: none;
    line-height: 2em;
    text-align: left;
    padding: .5rem .5rem .25rem .5rem;
}

/* html #main-nav ul li a:link, #main-nav ul li a:visited {
    display: block;
    width: 169px;
}
*/
#main-nav ul li a:hover {
    color: #ddf;
    background-color: #666;
}
#content {
    color: #333;
    background-color: rgba(255, 255, 255, .75);
    /* background-color: rgba(255, 255, 255, 0); */
    padding: 1rem 2rem;
    border-radius: .5rem;
    text-align: left;
}
#content p, 
#content h2, 
#content ul, 
#content ol {
    letter-spacing: .01em;
    line-height: 1.35em;
}
#masthead {

}
h1.sitename, .sitename  {
    font-size: 4rem;
    line-height: 1;
    padding: 1rem;
    position: absolute;
    top: .6rem;
    left: 0;
    background-color: #900;
    color: #fff;
    font-weight: normal;
    margin-top: 0;
    width: 1px;
    height: 1px;
    left: -9999px;
}

h1.sitename a, .sitename a, .sitename a:visited  {
    color: #fff;
    font-weight: normal;
    text-decoration: none;
}

h2, h3, h4, p, ul, ol, figure, figcaption {
    margin: 0 0 1rem 0;
}
h1, h2.h1 {
    font-size: 2.5rem;
    color:#900;
}
h2, h3.h2 {
    font-size: 2.1rem;
    color:#060;
}
h3, h4.h3 {
    font-size: 1.7rem;
    color: #080;
}
a {
    color: #c14b13;
}
a:hover {
    color: #ef2e25;
}
a:active {
    color: #ef2e25;
}
a:visited {
    color: #909;
}
blockquote.quote {
    max-width: 600px;
    margin: 1.5rem auto;
    font-size: 2rem;
    padding: 2rem;
}
.quote .quotation {
    font-style: italic;
}
.quote .quoter:before {
    display: inline-block;
    content: "- ";
}.quote .quoter {
    text-align: right;
}
.copyright {
color: #fff;
font-size: 1rem;
text-align: right;
padding: 0;
margin: 1rem .6rem .25rem 0;
text-shadow: #000 1px 1px 2px, #000 -1px -1px 2px, #000 1px 1px 5px;
}
.video-gallery video {
    display: block;
    margin-top: .5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.two-col {
    columns: 2;
}

#content li {
    margin-bottom: 1rem;
}
li.icon {
    list-style: none;
}
li.icon:before {
    display:inline-block;
    margin: 0 .5rem 0 -1rem;
}
li.tree:before {
   content: "🎄";
}
li.santa:before {
   content: "🎅";
}
li.gift:before {
   content: "🎁";
}
li.frosty:before {
   content: "⛄";
}
li.snow:before {
   content: "❄";
}
li.deer:before {
   content: "🦌";
}
li.sled:before {
   content: "🛷";
}
li.elf:before {
   content: "🧝🏼";
}
li.music:before {
   content: "📯";
}
audio {
}
figure img {
    max-width: 100%;
    display:block;
    margin: 2rem auto;
}
figure a[download] {
    font-size: 70%;
    margin: .25rem auto;
}
figure a[download]:after {
    content: "↓";
    margin: 0 0 0 .5rem;
}
@media (max-width: 1250px) {

    .home #site {
        width: calc(100% - 2rem - 250px);
    }
    #site {
        font-size: 1.5rem;
    }

}

@media (max-width: 911px) {
    .home #site {
        width: calc(100% - 2rem);
        margin-top: 65vh;
        margin: 65vh 1rem 1rem 1rem;
    }
    blockquote.quote {
        max-width: 600px;
        margin: 1rem auto;
        font-size: 1.75rem;
        padding: 1.5rem;
    }
    h1 {
    font-size: 2.2rem
    }
    h2 {
        font-size: 1.95rem
    }
    h3 {
        font-size: 1.75rem;
        color: #009933;
    }
    .home body:after{
      background: url(images/thumbs-up.png) top center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
}

/*
@media (max-width: 750px) {

    html.home {
    background: url(images/surprise-thumbs-up.jpg) no-repeat 30% top fixed; 
    background-size: cover;
    }

}
*/

@media (max-width: 600px) {
    .two-col {
        columns: 1;
    }
    #main-nav ul li {
        min-width: calc(50% - .5rem);
        width: calc(50% - .5rem);
    }
    h1.sitename, .sitename  {
        font-size: 2.25rem;
        padding: .5rem;
        width: 100%;
    }
    #site {
        font-size: 1.3rem;
        margin: 3rem 0 1rem 0;
    }
    /* .home #site {
        width: calc(100% - .5rem);
    }
    */

    blockquote.quote {
        margin: .7rem auto;
        font-size: 1.5rem;
        padding: 1rem;
    }
    h1 {
    font-size: 2rem
    }
    h2 {
        font-size: 1.75rem
    }
    h3 {
        font-size: 1.5rem;
        color: #009933;
    }
}

@media (max-width: 540px) {
    .home body:after{
          background-position: 20% 10%;
    }
}
@media (max-width: 400px) {
    .two-col {
        columns: 1;
    }
    #main-nav ul li {
        min-width: calc(50% - .5rem);
        width: calc(50% - .5rem);
    }
    h1.sitename, .sitename  {
        font-size: 2rem;
        padding: .5rem;
    }
    #site {
        font-size: 1rem;
        margin: 3rem 0 1rem 0;
    }
    blockquote.quote {
        margin: .7rem auto;
        font-size: 1.1rem;
        padding: 1rem;
    }
    h1 {
    font-size: 1.5rem
    }
    h2 {
        font-size: 1.25rem
    }
    h3 {
        font-size: 1.15rem;
        color: #009933;
    }
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    margin-bottom: 2rem;
} 
.embed-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}