body {
    background: #000000;
}


	@font-face {
  font-family: magentic;
  src: url("fonts/oldsport.ttf");
}




* {
  font-family: magentic;
  box-sizing: border-box;
}


/*--------------------------------------------------*/

h1 {

font-size: 60px;
margin-bottom: -30px;
color: #ffffff;
}

h2 {

font-size: 35px;
color: #ffffff;
font-size:40px;


}

h3{

font-size: 35px;
color: #333333;
font-size:20px;


}

a {
    
    text-decoration: none;
}

a:link {
    
    text-decoration: none;
    color: #e20074;
}

a:visited {
    
    text-decoration: none;
    color: #e20074;
}


.logo {

margin-left: 0%; 
margin-right: 30%; 
width: 50%; 
}

.floater {
    
    visibility: hidden;
    position: fixed;
    top: 10%;
    right 0px;
    left: 80%;
    width: 20%;
    height: auto;
    opacity: 100%;
 
}


#demo { width: 100%;  }

#demoAudio { width: 50%;
}
 }
#demoList { margin-top: 10px; }
#demoList .song {
  padding: 10px;
  color: #9f9f9f;
  /*border-bottom: 1px solid #e1e1e1;*/
  cursor: pointer;
   font-size:40px;
}
#demoList .song:first-child {
 /* border-top: 1px solid #e1e1e1;*/
  font-size:40px;
}
#demoList .song.now {
  font-size:40px;
  /*bfont-weight: bold;*/
  /*color: #ffffff;*/
  color: #cc0066;
  /*background: #cccccc;*/
}
#demoList .song::before {
  content: "\2022";
  margin-right: 10px;
   font-size:40px;
   color: #cc0066;
  
}
#demoList .song.now::before {
    /*content: "\27A4";*/
    content: "\2022";
    color: #ffffff;
  font-size:80px;
}


/*--------------------------------------------------*/



@media (min-aspect-ratio: 16/9) {


    * {
        font-family: magentic;
        box-sizing: border-box;}
  
   h1 {

       font-size: 40px;
       margin-bottom: -20px;
       color: #ffffff;
}
   
   h2 {

   font-size: 16px;
   color: #ffffff;
   }

   h3{

   font-size: 35px;
   color: #333333;
   font-size:10px;


   }
   
   a {
       
       text-decoration: none;
   }

   a:link {
       
       text-decoration: none;
       color: #e20074;
   }
   
   a:visited {
       
       text-decoration: none;
       color: #e20074;
   }

}

.floater {
    
    position: absolute;
    visibility: visible;
    top: 8%;
    right 5%;
    left: 75%;
    width: 20%;
    height: auto;
    opacity: 100%;
  
}


.logo {

width: 30%; 
height: auto;
}


#demo { width: 100%; }
#demoAudio { width: 100%; }
#demoList { margin-top: 10px; }
#demoList .song {
  padding: 10px;
  color: #9f9f9f;
  /*border-bottom: 1px solid #e1e1e1;*/
  cursor: pointer;
   font-size:80px;
}
#demoList .song:first-child {
  /*border-top: 1px solid #e1e1e1;*/
  font-size:80px;
}
#demoList .song.now {
  font-size:80px;
  font-weight: bold;
  /*color: #ffffff;*/
  color: #cc0066;
  /*background: #cccccc;*/
}
#demoList .song::before {
  content: "\2022";
  margin-right: 10px;
   font-size:100px;
}
#demoList .song.now::before {
  /*content: "\27A4";*/
  content: "\2022";
  color: #ffffff;
}
}
	
/*--------------------------------------------------*/


@media screen and (max-width: 700px){
 	* {
  font-family: magentic;
  box-sizing: border-box;
}

  h1 {

      font-size: 40px;
      margin-bottom: -20px;
}
  
  h2 {

  font-size: 16px;
  }

  h3{

  font-size: 35px;
  color: #333333;
  font-size:10px;


  }
  
  a {
      
      text-decoration: none;
  }

  a:link {
      
      text-decoration: none;
      color: #e20074;
  }
  
  a:visited {
      
      text-decoration: none;
      color: #e20074;
  }

  
  .floater {
      
      position: fixed;
      visibility: visible;
      top: 50%;
      right 5%;
      left: 75%;
      width: 20%;
      height: auto;
      opacity: 100%;
     
  }

  
.logo {

width: 70%; 
height: auto;
}

#demo { width: 100%; }
#demoAudio { width: 100%;  }
#demoList { margin-top: 10px; }
#demoList .song {
  padding: 10px;
  color: #9f9f9f;
  /*border-bottom: 1px solid #e1e1e1;*/
  cursor: pointer;
   font-size:100px;
}
#demoList .song:first-child {
 /* border-top: 1px solid #e1e1e1;*/
  font-size:100px;
}
#demoList .song.now {
  font-size:100px;
  /*font-weight: bold;*/
  color: #333;
  color: #cc0066;
 /* background: #cccccc;*/
}
#demoList .song::before {
  content: "\2022";
  margin-right: 10px;
   font-size:100px;
   color: #cc0066;
}
#demoList .song.now::before {
    /*content: "\27A4";*/
    content: "\2022";
    color: #ffffff;
    font-size:100px;
}



}
	
/*--------------------------------------------------*/

	@media screen and (max-device-width : 420px) {
	* {
  font-family: magentic;
  box-sizing: border-box;
}

  h1 {

font-size: 40px;
margin-bottom: -20px;
}
  
  h2 {

  font-size: 16px;
  }

  h3{

  font-size: 35px;
  color: #333333;
  font-size:10px;


  }
  
  a {
      
      text-decoration: none;
  }

  a:link {
      
      text-decoration: none;
      color: #e20074;
  }
  
  a:visited {
      
      text-decoration: none;
      color: #e20074;
  }

  
  .floater {
      
      position: absolute;
      visibility: visible;
      top: 3%;
      right 5%;
      left: 75%;
      width: 20%;
      height: auto;
      opacity: 100%;
     
  }

  
.logo {

width: 70%; 
height: auto;
}

#demo { width: 100%; }
#demoAudio { width: 100%; }
#demoList { margin-top: 10px; }
#demoList .song {
  padding: 10px;
  color: #9f9f9f;
  /*border-bottom: 1px solid #e1e1e1;*/
  cursor: pointer;
   font-size:40px;
  
}
#demoList .song:first-child {
  /*border-top: 1px solid #e1e1e1;*/
  font-size:40px;
}
#demoList .song.now {
  font-size:40px;
 /* font-weight: bold;*/
  /*color: #ffffff;*/
  color: #cc0066;
  /*background: #cccccc;*/
}
#demoList .song::before {
  content: "\2022";
  margin-right: 10px;
   font-size:40px;
   color: #ffffff;
}
#demoList .song.now::before {
  /*content: "\27A4";*/
  content: "\2022";
  font-size:40px;
  color: #ffffff;
}