@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
*{
    font-family: "Nunito", sans-serif;
}
html {
    scroll-behavior:smooth;
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#565363;
  }
body {
      /* This overflow disables pull down to refresh when PWA */
    overscroll-behavior-y: contain;
}

.shadow-text {
    text-shadow: #000 1px 1px 1px, 1px 1px 000, -1px -1px #68abed;
}

button{
    cursor: pointer;
    display:inline-block;
    background: #eeeeeecc;
    padding:5px;
    margin:5px;
    border-radius: 7px;
    text-transform: uppercase;
    font-weight:bold;
}
.button {
    cursor: pointer;
    display:inline-block;
    text-decoration: none;
    border:1px solid #ccc;
    color:inherit;
    box-shadow: 1px 1px 1px #333;
    background: #eeeeeecc;
    padding:5px;
    margin:5px;
    border-radius: 7px;
    text-transform: capitalize;
}
.button:active {
    box-shadow: -1px -1px 1px #333;
}
.donateButton {
    width:200px;
    font-size: 1rem;
    /* background: #0000ff33; */
    background-image: (linear-gradient(270deg, #8e9ac2, #42579a));
    /* background-image: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); */
    
    /* transition: all 800ms; */
    transition: all 100ms 0ms;
}
.donateButton:after {
    /* color: darken(#00684d, 10%); */
    content: "\f004";
    font: 1rem "FontAwesome";
    padding: 10px 0;
    padding-left: 25px;
    position: relative;
    right: 5px;
    top: 0px;    
    -webkit-transition: all 600ms 200ms;
    transition: all 600ms 200ms;
  }
.donateButton:hover{
    background: #81a0f8;
    color:#fff;
    text-shadow: 0px 0px 10px #ffffff;
    /* background-image: linear-gradient(to bottom, rgb(208, 231, 247) 0%,rgb(115, 189, 231) 24%,rgb(10, 132, 213) 50%,rgb(83, 180, 225) 79%,rgb(135, 227, 234) 100%); */
    background: #0000ff33;
    /* background-position: -100% 0; */
    background-size: 400% 400%;
    animation: TransitioningBackground 3s ease infinite;
              transition: all 600ms 200ms;
              
            }

.activeButt{
    background-color: #0000ff33 ;
    color:#fff;
    
}
.toggleButt{
    min-width:100px;
    
}
.accentButt{
    display:inline-block;
    min-width:72px;
}
.accentValue{
    appearance: textfield;
    display:inline-block;
    max-width: 18px;
    min-height:1.5rem;
    text-align:center;
}
.paypalButton{
    max-width:150px;
}

fieldset{
    position: relative;
    /* max-width:200px; */
    text-align: center;
    justify-content: center;
    margin: auto;
    padding:1rem;
    margin:1.5rem;
    border-radius: 7px;
    
    box-shadow:  2px 2px 7px -1px #000000;
}
.section fieldset{
    
    
    position:relative;
    display: block;
    
}
section p{
    margin: 5px;
    padding:15px;
}
main fieldset{
    background: #6c2505cc;
    position: relative;
    /* max-width:200px; */
    text-align: center;
    justify-content: center;
    margin: auto;
    padding:1rem;
    margin:1.5rem;
    border-radius: 7px;
    
    box-shadow:  2px 2px 7px -1px #000000;
}
main{
    color:#fff;
    display: block;
    position: relative;
    max-width: 500px;
    border: 1px solid #000;
    text-align: center;
    /* justify-content: center; */
    margin: auto;
    padding:5px;
    z-index:0;
    border-radius: 7px;
    background-color: #6c2505;
background-size: 40px 160px, 60px 29px, 27px 27px;
box-shadow: inset 1px 1px 7px -1px #000000;
  

background-image: linear-gradient(90deg, #551c07 50%, transparent 50%),
  linear-gradient(94deg, rgba(91,33,5,.1) 0%,rgba(83,29,4,0.32) 23%,rgba(74,24,3,.41) 47%,rgba(80,27,5,0.44) 70%,rgba(81,27,5,0.59) 74%,rgba(93,33,4,0.2) 83%,rgba(115,43,3,.5) 100%),
                  linear-gradient(90deg, #541c09 50%, transparent 50%),
                  linear-gradient(90deg, #7a2e00 50%, #632401 50%)
  ;
}
.section{
    display: block;
    position:absolute;
    border: 3px solid #999999;
    background: #ffffff;
    border-radius: 7px;
    padding: 7px;
    min-height:50%;
    text-align: center;
    max-width:85%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    opacity:1;
    margin-top: 1rem;
 
}



.clickLight{
    /* background: red; */
    border:2px solid #000;
    border-radius: 50%;
    width:30px;
    height:30px;
    margin: auto;
    position: relative;
}


.clickLight::after{
    display:block;
    position: absolute;
    content:"";
    background:#ffffffcc;
    border:0px solid #000;
    border-radius: 50%;
    width:10px;
    height:10px;
    top:5px;
    right:5px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%,rgba(168, 167, 167, 0) 90%);
  
}
.clickLight::before{
    display:block;
    position: absolute;
    content:"";
    background:#ffffffcc;
    border:0px solid #000;
    border-radius: 50%;
    width:30px;
    height:30px;
    bottom:2px;
    left:2px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%,rgba(168, 167, 167, 0) 90%);
  
}

.clickHolder{
    display: block;
    margin-top: 10px;
    /* padding: 5px; */
    position: relative;
    min-height:34px;
    text-align: center;
    justify-content: center;
    
}
.valueNum{
    display:block
}

#btnPlay{
    min-width: 150px;
    margin: 15px;
}
.normalButton{
    min-width:150px;
}
input[type=range]{
    width:75%;
}


#donate p{

    /* display: inline-block; */
    /* position: relative; */
    text-align: left;
    justify-content: left;
    margin: auto;
    max-width:75%;
}

#donate{
    min-width:50%;
    max-width:70%;
}
#installContainer{
    position: relative;
    justify-content: center;
    text-align: center;
    

}
.over{
    background:#fff;
    opacity:1;
}
.sectionx::before{
    position: absolute;
    content: "";
    background: #000000dd;
    width:10000%;
    height:10000%;
    left:-1000%;
    top:-1000%;
    z-index: 2;
   
}
.sectionx{
    display:block;
}
label{
    display:block;
    padding:5px;
}
#settings{
    min-width:50%;
    max-width:70%;
    
}
.closeBox{
    all: unset;
    cursor: pointer;
    position: absolute;
    right:10px;
    top:1px;
    padding:0;
    width:40px;
    height:40px;
    font-size: 32px;
    justify-content: center;
    text-align: center;
    background: #e27373cc;
    color:#fff;
    border-radius: 50%;
    margin-top:1px;
    padding-bottom:-5px;
    text-shadow: 1px 1px 2px #000;
    
box-shadow: inset 1px 1px 7px -1px #000000;
}
.closeBox:hover,.closeBox:active{
    
    color:red;
    background: #ffcccccc;
}

.hidden{
    display:none;
}

@keyframes TransitioningBackground {
    0% {
        box-shadow: 0px 0px 0px -1px #f2f8b7;
    }
    25% {
        box-shadow: 1px 1px 15px -1px #f8f7b7;
    }
    50% {
        box-shadow: 1px 1px 25px -1px #f2f8b7;
    }
    75% {
        box-shadow: 1px 1px 7px -1px #f2f8b7;
    }
    100% {
        box-shadow: 1px 1px 0px -1px #f2f8b7;
    }
  }