* {
margin: 0;
padding: 0;
font-family: 'Ariel', sans-serif;
font-size:16px;
--grey: #455762;
--mediumgrey:#ca77cc;
--lightgrey: #7c5fb3;
--redglow: #facfc2;
--blue: #b8e8e8;
--yellow:#fff;
--accent: #dcc4da;
--light: #efd0ed;
--width_big:90%;
--width_square:90%;
--width_small:95vw;
}

body {
background-color: var(--accent);
color: var(--lightgrey);
}

.clear {
  position:relative;
  display:block;
  width:100%;
  height:5px;
  clear: both;
}

a {
    text-decoration:none;
    color: var(--yellow);
}

.text3 {
    font-size: 56px;
    font-family: 'Bebas Neue', sans-serif;
    line-height:1;
}

.text2 {
    font-size: 36px;
    font-family: 'Bebas Neue', sans-serif;
}

.text1 {
    font-size: 18px;
    font-family: 'Arial', sans-serif;
}

p {
  font-size: 13px;
}

.overlay {
  position:fixed;
  left:0px;
  top:0px;
  display:none;
  width:100vw;
  min-height:100vh;
  background-color:rgba(0,0,0,.75);
  z-index:20;
}

.blur {
  filter: blur(4px);
}

.modal {
  position:fixed;
  display:none;
  width:35%;
  height:75%;
  top:50%;
  left:50%;
  transform:translate(-50%,-53%);
  z-index:25;
}

.modal_content {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  background-color:#fff;
  padding:20px;
  border-radius:25px;
  box-shadow: -1px 5px 19px 2px rgba(0,0,0,0.45);
  -webkit-box-shadow: -1px 5px 19px 2px rgba(0,0,0,0.45);
  text-align:center;
  overflow-wrap:break-word;
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
}

.container {
  display:block;
  position:relative;
  margin:0px;
  padding:0px;
  height:100vh;
  width:100vw;
  overflow:auto;
}

.content_box {
  position:absolute;
  display:block;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:var(--width_big);
  height:var(--width_big);
}

.content_left {
  position:relative;
  display:inline-block;
  width:47%;
  height:100%;
  margin-right:20px;
  overflow:hidden;
}

.eye {
  position:absolute;
  display:block;
  left:calc(.7 * var(--width_big));
  top:calc(.017 * var(--width_big));
  height:180px;
  width:180px;
  z-index:8;
  cursor:pointer;
}

.touchmeseeme {
    position:absolute;
    display:block;
    width:80%;
    height:89%;
    left:10%;
    top:1%;
    animation: rotation 36s infinite linear;
    z-index:3000;
}

.content_right {
  position:relative;
  display:inline-block;
  width:47%;
  height:100%;
  overflow:auto;
}

.randombutton {
  position:absolute;
  display:block;
  left:calc(.33 * var(--width_big));
  top:calc(.27 * var(--width_big));
  height:calc(.12 * var(--width_big));
  width:calc(.12 * var(--width_big));
  background-image: url(../images/button_randomback1.png);
  background-size: cover;
  cursor:pointer;
  overflow:hidden;
  z-index:1;
}

.titlestrip {
  position:absolute;
  display:block;
  top:calc(.155 * var(--width_big));
  left:calc(.04 * var(--width_big));
  z-index:5;
}

.playerstrip {
  position:absolute;
  display:block;
  top:calc(.2 * var(--width_big));
  left:50%;
  transform:translateX(-48%);
  width:95%;
  height:auto;
  z-index:2;
}

.audiobox {
  position:relative;
  display:block;
  left:50%;
  transform:translateX(-50%);
  margin-top:calc(.008 * var(--width_big));
  width:98%;
  z-index:4;
}

/*audio {
  width:100%;
}

audio::-webkit-media-controls-panel {
  background-color: #fff;
}

audio::-webkit-media-controls-play-button {
  transform: scale(1.5, 1.5);
}

audio::-webkit-media-controls-mute-button {
  transform: scale(1.5, 1.5);
}

audio::-webkit-media-controls-volume-slider {
  background-color: var(--yellow);
  border-radius: 25px;
  padding-left: 8px;
  padding-right: 8px;
}

audio::-webkit-media-controls-timeline-container{
  background-color:#fff;
}

audio::-webkit-media-controls-timeline {
  background-color: var(--yellow);
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
}*/

.socialbox {
  position:absolute;
  display:block;
  top:calc(.29 * var(--width_big));
  left:calc(.05 * var(--width_big));
}

.socialiconbox {
  position:relative;
  display:inline-block;
  margin-right:10px;
  text-align:center;
  background-color:var(--light);
  border-radius:50%;
  height:50;
  width:50;
}

.socialicon {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:var(--lightgrey);
}

.lyricsbutton {
    top:4px;
}
.copyrightbox {
  position:absolute;
  display:block;
  bottom:0px;
  width:100%;
  text-align:center;
}

.rotateme {
  animation: rotation 36s infinite linear;
}

.rotatemetoo {
  animation: rotationtoo 21s infinite linear;
}

.rotateonce {
  animation: rotationtoo .5s 1 linear;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes rotationtoo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.divider_line {
  position:relative;
  display:block;
  height:20px;
  width:75%;
  left: 50%;
  transform:translateX(-50%);
  border-bottom:2px solid var(--mediumgrey);
}


.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

.vidpre {
  position:relative;display:inline-block;vertical-align:middle;border-radius: 10px;border: 3px solid var(--yellow);box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.59);margin:10px;
}

.vidstill {
  position:relative;
  max-width:180px;
  border: 2px solid var(--yellow);
  border-radius:15px;
}

@media (max-width: 1150px) {
  .text2 {
    font-size: 36px;
  }
  .modal {
    width:45%;
    height:65%;
    top:50%;
    left:50%;
    transform:translate(-50%,-53%);
  }

  .titlestrip {
    position:absolute;
    display:block;
    top:0px;
    left:calc(.12 * var(--width_big));
    z-index:5;
  }

  .content_box {
    position:absolute;
    display:block;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:var(--width_square);
    height:var(--width_square);
  }
  
  .content_left {
    position:relative;
    display:block;
    left:50%;
    transform:translateX(-50%);
    width:calc(.63 * var(--width_square));
    height:calc(.55 * var(--width_square));
    overflow:visible;
  }

  .eye {
    left:calc(.7 * var(--width_big));
    top:calc(.017 * var(--width_big));
    height:120px;
    width:120px;
  }

  .content_right {
    position:relative;
    display:block;
    width:100%;
    overflow:visible;
  }

  .randombutton {
    position:absolute;
    display:block;
    left:calc(.7 * var(--width_square));
    top:calc(.21 * var(--width_square));
    height:calc(.14 * var(--width_square));
    width:calc(.14 * var(--width_square));
    background-image: url(../images/button_randomback1.png);
    background-size: cover;
    cursor:pointer;
    overflow:hidden;
    z-index:1;
  }
  
  .playerstrip {
    position:absolute;
    display:block;
    top:calc(.08 * var(--width_square));
    left:50%;
    transform:translateX(-50%);
    width:80%;
    height:auto;
    z-index:2;
  }
  
  .audiobox {
    margin-top:calc(.034 * var(--width_big));
  }

  .socialbox {
    position:absolute;
    display:block;
    top:calc(.23 * var(--width_square));
    left:calc(.18 * var(--width_square));
  }
  
  .socialiconbox {
    position:relative;
    display:inline-block;
    margin-right:10px;
    text-align:center;
    background-color:var(--light);
    border-radius:50%;
    height:45;
    width:45;
  }
  
  .socialicon {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      color:var(--lightgrey);
  }
  .lyricsbutton {
    top:3px;
    }
}

@media (max-width: 600px) {

  .modal {
    width:85vw;
    height:65vh;
    top:50%;
    left:50%;
    transform:translate(-54%,-53%);
  }

  .content_box {
    position:absolute;
    display:block;
    left:50%;
    top:24px;
    transform:translateX(-50%);
    width:var(--width_small);
    height:auto;
  }
  
  .content_left {
    position:relative;
    display:block;
    left:50%;
    transform:translateX(-50%);
    width:calc(.8 * var(--width_small));
    height:calc(.4 * var(--width_small));
    overflow:visible;
  }

  .eye {
    left:calc(.7 * var(--width_big));
    top:calc(.017 * var(--width_big));
    height:100px;
    width:100px;
  }

  .content_right {
    position:relative;
    display:block;
    top:calc(.4 * var(--width_small));
    width:100%;
    height:calc(.7 * var(--width_small));
    overflow:visible;
  }

  .text2 {
    font-size: 24px;
  }

  .titlestrip {
    position:absolute;
    display:block;
    top:0px;
    left:calc(.11 * var(--width_big));
    z-index:5;
  }

  .randombutton {
    position:absolute;
    display:block;
    left:calc(.65 * var(--width_small));
    top:calc(.3 * var(--width_small));
    height:calc(.25 * var(--width_small));
    width:calc(.25 * var(--width_small));
    background-image: url(../images/button_randomback1.png);
    background-size: cover;
    cursor:pointer;
    overflow:hidden;
    z-index:1;
  }
  
  .playerstrip {
    position:relative;
    display:block;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    height:auto;
    z-index:2;
  }
  
  .audiobox {
    margin-top:calc(.022 * var(--width_big));
  }

  .socialbox {
    position:absolute;
    display:block;
    top:calc(.33 * var(--width_small));
    left:calc(.06 * var(--width_small));
  }
    .socialiconbox {
        position:relative;
        display:inline-block;
        margin-right:10px;
        text-align:center;
        background-color:var(--light);
        border-radius:50%;
        height:50;
        width:50;
        }
        
    .socialicon {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        color:var(--lightgrey);
    }

    .lyricsbutton {
        top:-5px;
    }
    
}