body{
    background-color: black;
    color:
    white;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    font-size: 12px;
}

body#home{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    font-weight: 100;
}

#home_menu{
    background-image: url('assets/img/menu_fr.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
img.border-white{
    border: 2px solid white;
}

#vortexIntro{
    position: absolute;
    height: 53px;
    width: 53px;
    bottom: 30%;
    left: 48%;
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */ 
    /* transform: rotate(.03turn);  */
}
#vortexIntroMask{
    position: absolute;
    bottom: 30%;
    left: 48%;
    opacity: 0.5;
    height: 53px;
    width: 53px;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

a{
    text-decoration: none;
    color: #66ff00 !important;
    font-size: 18px;
}

a:hover{
    color: #ff0000 !important;
}


a#band-name{
    position:absolute;
    bottom: 10vh;
    /* right: 15%; */
}

.music>ul>li{
    list-style: none;
}

.music .song{
    color: #ff0000;
}
.text-red{
    color:#ff0000
}

span.copyright{
    font-size: 10px;
}
h1.lyric-title{
    color: #ff0000;
    font-weight: 700;
}
a.nav-link.active{
    color: white !important;
    font-weight: 700;
}
ul#lyric-tab{
    list-style: none;
}

.poster img{
    max-width: 50%;
}

.text-white{
    color: white !important;
}

.text-green{
    color:#66ff00;
}

.float-right{
    float: right;
}

button.playMusic{
    color: #fff;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    a#music{
        position:absolute;
        top: 25%;
        left: 30%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 25%;
    }
    a#freezone{
        position:absolute;
        bottom: 15%;
        left: 25%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 23%;
    }
    a#contact{
        position:absolute;
        top: 65%;
        right: 25%;
    }
    
  }
  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    
    /* CSS */
    a{
        font-size: 16px;
    }
    a#music{
        position:absolute;
        top: 25%;
        left: 30%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 25%;
    }
    a#freezone{
        position:absolute;
        bottom: 15%;
        left: 25%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 23%;
    }
    a#contact{
        position:absolute;
        top: 65%;
        right: 25%;
    }
  }
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* CSS */
    a{
        font-size: 16px;
    }
    a#music{
        position:absolute;
        top: 35%;
        left: 20%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 12%;
    }
    a#freezone{
        position:absolute;
        bottom: 25%;
        left: 15%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 15%;
    }
    a#contact{
        position:absolute;
        top: 65%;
        right: 16%;
    }
  }
  

  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
    
    /* CSS */
    a{
        font-size: 16px;
    }
    a#music{
        position:absolute;
        top: 35%;
        left: 15%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 10%;
    }
    a#freezone{
        position:absolute;
        bottom: 30%;
        left: 10%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 13%;
    }
    a#contact{
        position:absolute;
        top: 65%;
        right: 15%;
    }
    
  }
  
  @media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
    
    /* CSS */
    a{
        font-size: 16px;
    }
    a#music{
        position:absolute;
        top: 35%;
        left: 20%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 15%;
    }
    a#freezone{
        position:absolute;
        bottom: 30%;
        left: 17%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 18%;
    }
    a#contact{
        position:absolute;
        top: 65%;
        right: 21%;
    }
    a#band-name{
        position:absolute;
        bottom: -20px;
        /* right: 15%; */
    }
    
  }
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width: 480px) {
    
    /* CSS */
   
    /* CSS */
    a{
        font-size: 16px;
    }
    a#music{
        position:absolute;
        top: 40%;
        left: 15%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 8%;
    }
    a#freezone{
        position:absolute;
        bottom: 35%;
        left: 7%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 8%;
    }
    a#contact{
        position:absolute;
        top: 55%;
        right: 8%;
    } 
    a#band-name{
        position:absolute;
        bottom: 18vh;
        /* right: 15%; */
    }
  }
  @media (max-width: 319px){
    
   
    /* CSS */
    a{
        font-size: 10px;
    }
    a#music{
        position:absolute;
        top: 40%;
        left: 15%;
    }
    a#lyrics{
        position:absolute;
        bottom: 45%;
        left: 8%;
    }
    a#freezone{
        position:absolute;
        bottom: 35%;
        left: 7%;
    }
    a#guestbook{
        position:absolute;
        top: 40%;
        right: 8%;
    }
    a#contact{
        position:absolute;
        top: 55%;
        right: 8%;
    } 
    a#band-name{
        position:absolute;
        bottom: 18vh;
        /* right: 15%; */
    }
  }