@import url('../fonts/ScorchedEarthDEMO-KCFonts.otf');
@import url('../fonts/UrbanJungle.otf');

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  text-align: center;
  /* background-color: #0051ff; */
}
  
body {
   overflow:hidden;
   /* background-image: url("../images/aa.jpg"); */
   background-repeat: no-repeat;
   background-attachment: fixed;
   animation: noahcolors 7s infinite linear; 
   /* background-color: #0051ff; */
   /* background: linear-gradient(to right, red, yellow); */
   /* border-bottom: 11px solid red; */
  
}

#canvas1 {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* background-color: #0051ff; */
    /* background: linear-gradient(to right, white, black ); */
     /* animation:steps() noahcolors 7s infinite linear;  */
    /* /* background-image: url("../images/kangaroo.jpg"); */
    background-repeat: no-repeat;
    background-attachment: fixed; 
    box-shadow: black;
    z-index: 5;
    /* filter: blur(12px) contrast(7);  */
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
    stroke: black;
   
}

#mountainWaterWave {
  position: absolute;
  top:80%;
  left:0;
  width:100%;
  height:30%;
  z-index: 10;
  /* filter: blur(12px) contrast(7);  */

}
#canvas2 {
  position: absolute;
  top:0%;
  left:0;
  width:100%;
  /* height:20%; */
  /* z-index: 15; */
  /* background-color: #0051ff; */
}

#old_timer {
   /* animation: noah 7s infinite linear;  */
    position: absolute;
    left:9%;
    bottom: 2%; 
    z-index:200;
}

#container {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
  }

  #fileupload {
    position: absolute;
    left:2%;
    bottom: -3%; 
    color:white;
    margin:50px auto;
    display:block;
    z-index:100;
    color:black;
    background-color: gray;
    width:fit-content;
    height:fit-content;
    border-radius: 11px;
    border-color:#242424;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(114, 114, 114, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(119, 119, 119, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(124, 124, 124, 0.1) inset;
    box-shadow:  1px 3px  #464646;
    -moz-box-shadow:    inset 0 0 2px #000000;
   -webkit-box-shadow: inset 0 0 2px #000000;
   box-shadow:         inset 0 0 2px #000000;
  }

  /* Start of Audio Rules */
 .audio1 {
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
    position: absolute;
    bottom: -70px;
    border: #0051ff;
    box-sizing: border-box;
    width:fit-content;
    height: 11%;
    margin:50px auto;
    right: 2%;
    border-radius: 16px;
    /* box-shadow: 2px 2px #464646; */
    margin: 20px 2.5% 10px 2.5%;
    color:red;
    font-family: Scorched Earth;
    z-index:300;
  }
  .play_icon {
    margin: 20px 2.5% 10px 2.5%;
  }
  #audio-player-container {
    -webkit-text-stroke-width: .2px;
    -webkit-text-stroke-color: rgb(0, 0, 0);
    --seek-before-width: 0%;
      --volume-before-width: 100%;
      --buffered-width: 0%;
      position: absolute;
      z-index:300;
      top:82%;
      right:0%;
      margin: 100px 2.5% auto 2.5%;
      width: 50%;
      max-width:fit-content;
      height:fit-content;
      border-radius: 16px;
      border: #242424;
      border-color: #444444;
      border-style: solid;
      border-width: thin;
      background: rgb(68, 68, 68);
      color:black;
           
      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(114, 114, 114, 0.1) inset;
      -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(119, 119, 119, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 11px rgba(124, 124, 124, 0.1) inset;
      font-family: Scorched Earth;
  }
  #audio-player-container::before {
      border-color:#242424;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: black;
      position: absolute;
      content: '';
      width: calc(95% + 4px);
      height: calc(95% + 4px);
      /* left: -2px; */
      /* top: -2px; */
      bottom: -50px;
      background: linear-gradient(to bottom, #795200, #553a00);

      z-index: -1;
  }

  p {
    position: absolute;
    top: -18px;
    right: 5%;
    padding: 0 5px;
    margin: 0;
    font-size: 28px;
    background: #fff;
}
#play-icon {
    margin: 20px 2.5% 10px 2.5%;
}
path {
    stroke: #007db5;
}
.time {
    display: inline-block;
    width: 37px;
    text-align: center;
    font-size: 20px;
    margin: 28.5px 0 18.5px 0;
    /* float: left; */
}
output {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 20px;
    margin: 10px 2.5% 0 5%;
    /* float: left; */
    clear: left;
}
#volume-slider {
    margin: 10px 2.5%;
    width: 58%;
}
#volume-slider::-webkit-slider-runnable-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-moz-range-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-ms-fill-upper {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::before {
    width: var(--volume-before-width);
}
#mute-icon {
    margin: 0 2.5%;
}
input[type="range"] {
    position: relative;
    -webkit-appearance: none;
    width: 48%;
    margin: 0;
    padding: 0;
    height: 19px;
    margin: 30px 2.5% 20px 2.5%;
    float: left;
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
input[type="range"]::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: var(--seek-before-width);
    height: 3px;
    background-color: #007db5;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    margin: -7px 0 0 0;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #007db5;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
input[type="range"]::-moz-range-progress {
    background-color: #007db5;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
    background: #007db5;
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border: solid transparent;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background-color: #007db5;
}
input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
    background: #007db5;
}

    /* End of Audio Rules */
  .button {
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: white;
    position:absolute;
    top:3%;
    border-radius: 7px;
    background-color: #5f5f5f;
    border: none;
    color: black;
    text-align: center;
    font-size: 21px;
    padding: 7px;
    width:fit-content;
    height: fit-content;
    transition: all 0.5s;
    cursor: pointer;
    margin: 0px;
    box-shadow: 0 9px #999;
    z-index: 200;
  }
  
  #btn_previous {
    position:absolute;
    top:3%;
    left:3%;
    background-color: #ff0101;
    text-shadow: 1px 1px black;
    box-shadow: 2px 2px #464646; 
  }

  #btn_next {
    position:absolute;
    top:3%;
    right:3%;
    background-color: #467de4;
    text-shadow: 1px 1px black;
    box-shadow: 2px 2px #464646; 
  }
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    
  }
  .button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(2px);
  }
 
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover {
    padding-right: 15px;
    color:red;
  }
  
  .button:hover span:after {
    opacity: .5;
    right: 0;
  }

  .btn_controls {
    position: absolute;
    bottom:0%;
    top:0%;
    left:50%;
  }
.text_container {
  /* animation: rainbow 7s infinite linear; */
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: black;
  position: absolute;
  font-size:100px;
  color:red;
  font-family: Scorched Earth,  Urban Jungle, Helvetica, Cambria;
  position: fixed;
  top: 30%;
  left: 34%;
  transform: translate(-50%, -50%);
  margin-left:auto;
  margin-right:auto;
  transform(-50%, -50%);*/
}
.a {
  position:relative;
  color: orangered;
  top:50%;
  left:5%;
}
.b {
  position:relative;
  color: rgb(255, 136, 0);
  top:50%;
  left:15%;
}
.o {
  position:relative;
  color: yellow;
  top:50%;
  left:25%;
}
.r {
  position:relative;
  color: rgb(110, 5, 110);
  top:50%;
  left:35%;
 
}
.i {
  position:relative;
  color: #900cd1;
  top:50%;
  left:45%;
}
.g {
  position:relative;
  color: rgb(70, 155, 0);
  top:50%;
  left:55%;
}
#i {
  position:relative;
  color: rgb(70, 155, 0);
  top:50%;
  left:65%;
}
.n {
  position:relative;
  color: rgb(23, 106, 201);
  top:50%;
  left:75%;
}
#a {
  position:relative;
  color: orangered;
  top:50%;
  left:85%;
}
.l {
  position:relative;
  color: red;
  top:50%;
  left:95%;
}
@keyframes noahcolors {
  8% {
    background-color: #FF0000;
  }
  16% {
    background-color: #df4b07;
  }
  24% {
    background-color: #dddd09;
  }
  32% {
    background-color: #7FFF00;
  }
  40% {
    background-color: #00FFFF;
  }
  48% {
    background-color: #0051ff;
  }
  56% {
    background-color: #9b17dd;
  }
  64% {
    background-color: #FF1493;
  }
  72% {
    background-color: #00FFFF;
  }
  80% {
    background-color: #0051ff;
  }
  88% {
    background-color: #9b17dd;
  }
  100% {
    background-color: #FF1493;
  }
} 
 @keyframes noah {
  8% {
    background-color: #FF0000;
    background-image: url("../images/aa1.jpg");
  }
  16% {
    background-color: #df4b07;
    background-image: url("../images/aa2.jpg");
  }
  24% {
    background-color: #dddd09;
    background-image: url("../images/aa3.jpg");
  }
  32% {
    background-color: #7FFF00;
    background-image: url("../images/aa4.jpg");
  }
  40% {
    background-color: #00FFFF;
    background-image: url("../images/aa5.jpg");
  }
  48% {
    background-color: #0051ff;
    background-image: url("../images/aa6.jpg");
  }
  56% {
    background-color: #9b17dd;
    background-image: url("../images/aa7.jpg");
  }
  64% {
    background-color: #FF1493;
    background-image: url("../images/aa8.jpg");
  }
  72% {
    background-color: #00FFFF;
    background-image: url("../images/aa9.jpg");
  }
  80% {
    background-color: #0051ff;
    background-image: url("../images/aa10.jpg");
  }
  88% {
    background-color: #9b17dd;
    background-image: url("../images/aa11.jpg");
  }
  100% {
    background-color: #FF1493;
    background-image: url("../images/aa12.jpg");
  }
}  

.animated {
  /* background-image: url(../miscimages/earthtones.jpg); */
  background-repeat: no-repeat;
  background-position: left top;
  width:100%;
  padding-top:5px;
  margin-bottom:11px;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.slideshow{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
 -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}
.slideshow .mySlides {
  box-sizing: border-box;
 -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  transition: .5s;
  transition-property: opacity;
}
.slideshow.transition .mySlides{
    opacity: 0;
}