/* 
    Created on : Feb 5, 2020, 2:57:02 PM
    Author     : jkofsky
*/
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');

html {
    background-color: rgba(0, 64, 128, 0.5);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Scroll Bar Coloring
/* width */
html::-webkit-scrollbar {
    width: 1.75rem;
    height: 1.75rem;
}
/* Track */
html::-webkit-scrollbar-track {
    background-image: repeating-linear-gradient(55deg, red, red 2.5%, white 3%, white 4%, green 4.5%, white 5%, white 6%, red 6.5%, white 7%, red 7.5%, white 8%, red 8.5%, white 9%, white 10%, green 10.5%, white 11%, white 12%, red 13%);
    /*background: linear-gradient(to right,red,darkred);*/
}
html::-webkit-scrollbar-track {
    background-color: red;
    box-shadow: inset 0 0 5px grey;
}
/* Handle */
html::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,lightgreen,#28a745);
    border-radius: 0.6rem;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgb(254,230,170), goldenrod);
}

body {
    color: bisque;
    background: url(../img/ChristmasRadioBG.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Tahoma, 'Cabin', Geneva, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

h1, h2, h3, h4, h5,h6 {
    font-family: 'Lobster', cursive;
    color: lightgreen;
    text-shadow: black .125rem .125rem .15rem;
}
header {
    background: transparent;
}

audio, img.img-fluid, #countdown {
    border-radius: 24px;
    border: 2px ridge gold;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.4);
}
#countdown{
    background-image: url(../img/SantaCat_Alone-w-CatShirt.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100% ;
}
#days {
        display: table-cell;
    text-align: center;
 position: absolute;
  bottom: 0;
  width:90%;
}

dd {
    display: block;
    /*margin-left: 1rem;*/
}

#about {
    background-color: darkred;
}

#comments {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a57c1d+0,d2b872+3,fee6aa+50,d2b872+97,a57c1d+100 */
    background: #d2b872; /* Old browsers */
    background: -moz-linear-gradient(top,  #a57c1d 0%, #d2b872 3%, #fee6aa 40%,#fee6aa 60%, #d2b872 97%, #a57c1d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a57c1d 0%, #d2b872 3%, #fee6aa 40%,#fee6aa 60%, #d2b872 97%,#a57c1d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a57c1d 0%, #d2b872 3%, #fee6aa 40%,#fee6aa 60%, #d2b872 97%,#a57c1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a57c1d', endColorstr='#a57c1d',GradientType=0 ); /* IE6-9 */

}
#services {
    background: url(../img/GrayWood-bg.jpg) fixed;
}

#playList, #history {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a57c1d+0,d2b872+3,fee6aa+50,d2b872+97,a57c1d+100 */
    background: rgb(254,230,170); /* Old browsers */
    background: -moz-linear-gradient(left, rgb(165,124,29) 0%, rgb(210,184,114) 3%, rgb(254,230,170) 40%, rgb(254,230,170) 60%, rgb(210,184,114) 97%, rgb(165,124,29) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgb(165,124,29) 0%, rgb(210,184,114) 3%, rgb(254,230,170) 40%, rgb(254,230,170) 60%, rgb(210,184,114) 97%, rgb(165,124,29) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgb(165,124,29) 0%, rgb(210,184,114) 3%,  rgb(254,230,170) 40%, rgb(254,230,170) 60%, rgb(210,184,114) 97%, rgb(165,124,29) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a57c1d', endColorstr='#a57c1d',GradientType=1 ); /* IE6-9 */
    color: darkred;
    min-height: 34rem;
    padding: 1.5rem;
}

#contact {
    background-color: transparent;
    color: white;
}
#contact a {
    color:yellow;
}
.jumbotron, .dimBox {
    background-color: rgba(0, 64, 128, 0.5);
    box-shadow: 0px 0px 10px 4px rgba(0, 64, 128, 0.5);
}

.text-outlined-white {
    text-shadow:
        -1px, -1px, 0 white,
        0px, -1px, 0 white,
        1px, -1px, 0 white,
        1px,  0px, 0 white,
        1px,  1px, 0 white,
        0px,  1px, 0 white,
        -1px,  1px, 0 white,
        -1px,  0px, 0 white;
}

.text-outlined-black {
    text-shadow:
        -1px, -1px, 0 black,
        0px, -1px, 0 black,
        1px, -1px, 0 black,
        1px,  0px, 0 black,
        1px,  1px, 0 black,
        0px,  1px, 0 black,
        -1px,  1px, 0 black,
        -1px,  0px, 0 black;
}

.text-glow-light {
    text-shadow: white 0px 0px .5rem;
}

.text-glow-dark {
    text-shadow: black 0px 0px .5rem;
}

.text-shadow-light {
    text-shadow: white .125rem .125rem .15rem;
}

.text-shadow-dark {
    text-shadow: black .125rem .125rem .15rem;
}

.text-pink {
    color: gold;
}
a.text-pink:hover {
    color: yellow;
}