@font-face {
font-family: 'Della Respira';
src: url('../f/dellarespira-regular.woff2') format('woff2'),
     url('../f/dellarespira-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
}

/* reset  */

html {
font-family: sans-serif; 
-ms-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%; 
}

body {
margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}

audio,canvas,progress,video {
display: inline-block; 
vertical-align: baseline; 
}

audio:not([controls]) {
display: none;
height: 0;
}

[hidden],template {
display: none;
}

a {
background-color: transparent;
}

b,strong {
font-weight: bold;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

small {
font-size: 80%;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
margin: 2rem 0;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:    -moz-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:     -ms-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:      -o-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
}

ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; 
}
ul ul,ul ol,ol ol,ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; 
}
li {
margin-bottom: 1rem; 
}

/* Spacing */
pre,blockquote,dl,figure,table,p,ul,ol,form {
margin-bottom: 2.5rem; }

/* Self Clearing Goodness */
.container:after, .row:after {
content: "";
display: table;
clear: both; 
}



/* generic stuff  */

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.2em;
line-height: 1.5;
text-align: left;
color: #000;
background-color: #fff;
background-image: radial-gradient(circle at center center, rgb(204,0,51) 0%, rgb(204,0,51) 12%,transparent 12%, transparent 83%,rgb(51,153,0) 83%, rgb(51,153,0) 100%),linear-gradient(67.5deg, rgb(255,255,255) 0%,rgb(255,255,255) 78%); 
background-size: 20px 20px;
background-attachment: fixed;
}

:focus-visible {
outline: 3px solid black;
box-shadow: 0 0 0 6px white;
}
 
.clearboth { 
clear: both; 
}

a, a:visited, a:active { 
color: #060; 
text-decoration: underline; 
}

a:hover, a:focus { 
color: #a03;
}


/* header */

header {
background: #fc0;
font-family: 'Della Respira', Baskerville, Georgia, serif;
margin: 2.5vw;
padding: .5vw 1vw;
box-shadow: -10px -10px 0 0 #060;
display: flex;
flex-flow: row wrap;
justify-content:space-between;
}

.logo {
background: url(../images/icon-karaoke.svg) no-repeat 0 50%;
padding: .3em 0 .3em 2em;
background-size: auto 80%;
font-size: 1.8em;
}

header nav {
padding: .5em 0;
font-size: 1.5em;
}

header nav ul {
margin: 0;
}

header nav li {
display: inline;
margin: 0 .2em;
list-style: none;
}

header nav li a, header nav li a:visited, header nav li a:active, .logo a, .logo a:visited, .logo a:active {
text-decoration: none;
}

header nav li a:hover, header nav li a:focus, .logo a:hover, .logo a:focus { 
text-decoration: underline;
}

header nav li .btn-carols {
background: url(../images/icon-carols.svg) no-repeat 0 50%;
padding: .2em 0 .2em 1.2em;
background-size: auto 60%;
color: #a03!important;
}

header nav li .btn-songs {
background: url(../images/icon-songs.svg) no-repeat 0 50%;
padding: .2em 0 .2em 1.2em;
background-size: auto 60%;
color: #060!important;
}


/* main */

main {
clear: both;
background: #fc0 url(../images/top-lights.png) no-repeat;
background-position: 50% -0.2em;
background-size: 90% auto;
margin: 2.5vw;
padding: 5vw;
box-shadow: -10px -10px 0 0 #060;
}

h1, h2, h3, h4 {
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-style: normal;
font-weight: normal;
color: #060;
}

h1 {
margin: 0 0 1.5rem 0;
font-size: 2.1em; 
}

.carolsheading {
color: #a03;
}

body.home h1 {
font-size: 2.5em;
text-align: center;
}

h2 {
font-size: 1.6em;
margin: 1.2rem 0 .7rem 0;
}

h3 {
margin: .7rem 0;
font-size: 1.4em;
}

p { 
margin: 0 0 1.5em 0;
}

.center {
text-align: center;
}

.chorus {
font-style: italic;
}

ul, ol {
margin: 0 0 1.5em 0;
padding: 0;
}

ul li {
margin: 0 0 .3em 0;
}

ul.carolslist li, ul.songslist li, ul.homelist li {
padding: 0.1em 0 0.1em 1.4em;
list-style: none;
}

ul.carolslist li {
background: url(../images/icon-carols.svg) no-repeat 0 50%;
background-size: 1.1em auto;
}

ul.songslist li {
background: url(../images/icon-songs.svg) no-repeat 0 50%;
background-size: 1.1em auto;
}

ol li {
margin: 0 0 0.2em 0;
}

p.ref {
font-style: italic;
}

audio {
margin-bottom: 1em;
}

.twotunes {
float: left;
display: inline;
margin-right: 2.5em;
}

.twotunes h3 {
margin-top: 0;
}

.cleartune {
clear: both;
}

.small {
font-size: 0.9em;
font-style: italic;
}

.homeboxes {
display: flex;
flex-flow: row wrap;
}

#carolshome, #songshome {
flex: 1;
margin: 0 1em;
}


/* footer */

footer {
background: #fc0 url(../images/icon-karaoke.svg) no-repeat 50% 3em;
background-size: auto 15em;
text-align: center;
margin: 5vw 2.5vw;
padding: 20em 1vw 1vw 1vw;
box-shadow: -10px -10px 0 0 #060;
font-size: .7em;
}

#printfooter {
display: none;
}



/* sharing */

ul.share-buttons {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.8);
width: 100%;
}

ul.share-buttons img {
height: 24px;
}

ul.share-buttons li {
display: inline;
text-align: center;
}

ul.share-buttons li a {
display: inline-block;
width: 11%;
padding: 5px 0 2px 0;
background: #000;
border-radius: 0px;
}

ul.share-buttons li.share {
padding: 0 5px;
}

ul.share-buttons li.share-fb a {
background: #3B5998;
}

ul.share-buttons li.share-tw a {
background: #000;
}

ul.share-buttons li.share-pn a {
background: #DB081c;
}

ul.share-buttons li.share-em a {
background: #444;
}

ul.share-buttons li.share-wa a {
background: #25d366;
}

ul.share-buttons li.share-pr a {
background: #3B5998;
}

ul.share-buttons li a:hover {
filter: brightness(70%);
}

ul.share-buttons .sr-only{
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

@media (min-width: 601px) {

ul.share-buttons li.share-wa {
display: none;
}

}


/* media queries */

@media only screen and (max-width: 980px) {

#printfooter {
display: none !important;
}

.logo {
padding: .4em 0 .4em 2em;
background-size: auto 70%;
font-size: 1.2em;
}

header nav {
font-size: 1.1em;
}

header nav li .btn-carols, header nav li .btn-songs {
padding: .4em 0 .4em 1.3em;
background-size: auto 50%;
}

main {
padding: 3vw;
}

h1 {
font-size: 1.8em;
}

body.home h1 {
font-size: 4.5vw;
}

h2 {
font-size: 1.3em;	
}

h3 {
font-size: 1.1em;	
}

p.ref {
font-size: 0.8em;
}

#carolshome, #songshome {
flex: 1 100%;
}

footer {
background-size: auto 10em;
margin: 5vw 2.5vw 7.5vw 2.5vw;
padding: 16em 1vw 1vw 1vw;
}

}

@media only screen and (max-width: 700px) {

header, main, footer {
margin: 5vw 5vw 10vw 5vw;
}

header {
flex-flow: column wrap;
justify-content:flex-start;
}

.logo {
margin: 0 0.5em;
padding: 0.4em 0 0.4em 1.5em;
background-size: auto 50%;
font-size: 1.3em;
}

header nav {
padding: .5em 0;
font-size: 1.3em;
}

header nav li {
display: block;
margin: 0 .5em;
list-style: none;
}

main {
background-position: 50% -0.1em;
padding: 4vw 3.5vw 3.5vw 3.5vw;
}

h1 {
font-size: 1.3em;
}

body.home h1 {
font-size: 1.3em;
}

h2 {
font-size: 1.2em;
}

h3 {
font-size: 1.1em;	
}

footer {
margin-bottom: 15vw;
}

}