:root {
    --primary-light: #8abdff;
    --primary: gold;
    --primary-dark: #5b0eeb;
    
    --white: #86530f;
    --greyLight-1: #b66d0f;
    --greyLight-2: #583404;
    --greyLight-3: #422704;
    --greyDark: #8a5919;
}

/* MUSIC CONTROLS div */
.music-button{
    position:fixed;
    bottom:0;
    left:0;
    height:80px;
    width:80px;
    z-index:3;
    border-radius:0px;
}

/*  PLAY BUTTON  */
.circle {
    grid-column: 2 / 3;
    grid-row: 2 / 6;
    width: 4rem;
    height: 100%;
    justify-self: center;
    border-radius: 1rem;
    display: grid;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    margin-top:-10px;    
}    
  
.circle__btn {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 3rem;
      height: 3rem;
      display: flex;
      margin:2rem 1rem;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 3.2rem;
      color: var(--primary);
      z-index: 300;
      background: var(--greyLight-1);
      box-shadow:.3rem .3rem .6rem var(--greyLight-2), -.2rem -.2rem .5rem var(--white);
      cursor: pointer;
      position: relative;
}

.circle.shadow {
    box-shadow: inset .2rem .2rem .5rem var(--greyLight-2), inset -.2rem -.2rem .5rem var(--white);
}
  
.circle .play {
        position: absolute;        
        transition: all .2s linear;
        font-size: small;
}

.circle .play.visibility {
          opacity: 0;
}
      
.circle .pause {
        position: absolute;
        opacity: 0;
        transition: all .2s linear;
        font-size: small;
}
        
.circle .pause.visibility {
          opacity: 1;
}
      
    
  
.circle__back-1, .circle__back-2 {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 50%;
      filter: blur(1px);
      z-index: 100;
}
  
.circle__back-1 {
      box-shadow: .1rem .1rem .3rem var(--greyLight-2), 
      -.1rem -.1rem .3rem var(--white);
      background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
      animation: waves 4s linear infinite;
}

.circle__back-1.paused { 
      animation-play-state: paused;
}
    
  
.circle__back-2 {
      box-shadow: .1rem .1rem .3rem var(--greyLight-2), 
      -.1rem -.1rem .3rem var(--white);
      animation: waves 4s linear 2s infinite;
}      

.circle__back-2.paused { 
        animation-play-state: paused;
}

@keyframes waves {
    0% {
      transform: scale(1);
      opacity: 1;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }