@font-face {
  font-family: 'Arual';
  src: url('Arual.eot');
  /* IE9 Compat Modes */

  src: url('Arual.eot?#iefix') format('embedded-opentype'),
  /* IE6-IE8 */

  url('Arual.woff') format('woff'),
  /* Modern Browsers */

  url('Arual.ttf') format('truetype'),
  /* Safari, Android, iOS */

  url('Arual.svg#svgFontName') format('svg');
  /* Legacy iOS */
}
/*general*/
  
  body {
    background-color: #666;
    color: white;
    font-family: Verdana, sans-serif;
    text-align: center;
  }
  
    h1 {
      font-family: Arual, sans-serif
    }
    
    h2 {
      font-family: "Verdana Bold", sans-serif
    }
    
    a:link {
      text-decoration: none;
      color: #0B97FF;
    }
    
    a:visited {
      color: #6AB432;
    }
    
    a:hover {
      color: gray;
    }
    
    a:activated {
      color: #0B97FF;
    }

/*general*/
/*album pages*/

  .album-cover {
    max-width: 300px;
  }
  
  #tracks {
    line-height: 300%;
    border: 1px dashed white;
    padding: 5% 15% 5% 5%;
    max-width: 65%;
  }
  
    #tracks b {
      font-size: 100%;
      font-weight: lighter;
    }
  
    .num {
      bottom: -10px;
      font-family: Arual;
      font-size: 75%;
      display: block;
      z-index: 0;
    }
/*album pages*/
/*main page*/

  .container {
    padding: 2%;
    max-width: 75%;
    margin: 0 auto;
    margin-top: 140px;
  }
  
    .section {
      padding: 10% 0 10% 0;
    }
    
      #DISC {
        background: white;
        color: black;
      }
      
      #ABOUT {
        background: black;
        color: white;
        font-weight: lighter;
      }
      
      #MEMBERS {
        background: white;
        color: black;
      }
  
  /*topbar*/
  
    .toolbar {
      overflow: hidden;
      padding: 0.2%;
      position: fixed;
      width: 100%;
      top: 0;
      background-color: black;
      color: white;
      z-index: 10;
    }
    
      .toolbar a {
        position: relative;
        font-family: Arual, sans-serif;
        font-size: 28px;
        list-style: none;
        display: inline-block;
      }
      
      .toplink {
        padding-top: 2%;
        transition: 0.2s;
        position: relative;
      }
      
        .toplink:link {
          background-color: black;
          color: white;
        }
        
        .toplink:visited {
          background-color: black;
          color: white;
        }
        
        .toplink:hover {
          transition: 0.5s; 
          background-color: white;
          color: black;
          padding-top:2.8%
        }
        
        .toplink:activated {
          background-color: #0B97FF;
        }
  
  /*logos*/
  
    .logo {
      transition: 0.2s;
      color: white;
      background-color: black;
      z-index: 10;
    }
    
      .logo:hover {
        transition: color 0.5s, background-color 0.5s;
        background-color: #0B97FF;
      }
      
      .logo img {
        height: 80px;
      }
    /*member stuff*/
#MEMBER{
  font-family:sans-serif;
}
  #mbcontainer{
      left:15%;
      width:10%;
      height:40vh;
      position:relative;
      z-index:1;
  }
      .memberbox {
        background-color: black;
        color: white;
        height: 0;
        padding-bottom:75%;
        width: 75%;
        position:absolute;
        overflow:hidden;
        text-align: center;
        transition: 0.2s background-color;
      }
        .memberbox:hover {
          background-color: #3C3C3C;
        }
        .memberbox:active {
          background-color: #FFFFFF;
        }
  #mcontainer{
  left:15%;
  top:-40vh;
  height:40vh;
  width:50%;
  position:relative;
  } 
    .member {
      background-color: black;
      color: white;
      position:absolute;
      top:5%;
      padding-right:2%;
      width: 0;
      height: 0;
      display:none;
      overflow:hidden;
    }
      .cross{
        left:90%;
        top:5%;
        position: absolute;
        z-index:10;
      }
      .memberlink{
        text-decoration: none;
        font-weight:bold;
        color:white;
        position:absolute;
        top:90%;
        left: 10%;
      }
      .membertitle{
        top:0%;
        color:darkgray;
        opacity:0.2;
        font-weight:bolder;
        font-size:4em;
        position: absolute;
-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
      }
      .membertext{
        z-index:1;
        left:2%;
        position:relative;
        background-color:rgba(0,0,0,75%);
        top:10%;
      }