:root {

                --content: #871315;
                --nfont: #FFF7EE;
                --nbg: #691618;
                --link: #E03134;
                
            }
            
            ::selection
            {
              color:white;
              background-color:darkred;
            }


            @font-face {
                font-family: "Bit";
                src: url('/fonts/DisposableDroidBB.ttf');
            }

            @font-face 
            {
                font-family: "Bit";
                src: url('/fonts/DisposableDroidBB_bld.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: "Bit";
                src: url('/fonts/DisposableDroidBB_ital.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: "Bit";
                src: url('/fonts/DisposableDroidBB_bldital.ttf');
                font-style: italic;
                font-weight: bold;
            }

            body 
            {
                font-family: 'Bit';
                background-color: #3D0708;
                color: #FFF7EE;
                
                background-image: url('/images/contentbg.gif');
                background-repeat:repeat;
                background-size:500px;
                
                font-size:25px;
            }

            #container 
            {
                max-width: 1450px;
                margin: 0 auto;
            }
            #container a 
            {
                color: #942222;
                font-weight: bold;
                text-decoration: none;

            }
            
            #container a:hover
            {
              color: #FFF7EE;
            }

            #container li a:hover 
            {
                color: #FFF7EE;
            }
            
            ul { 
              
              list-style-type: "+";
              text-indent: 5%;
              
              }
            
            
            

            #header 
            {
                max-width: 100%;   
                height: 150px;
                background-color: #871F21;
             
                
                background-image: url('/images/headerbg.png');
                background-repeat:repeat;
                background-size: 130px;
                
                border-top: 2px solid transparent;
                border-radius: 4px 4px 0 0;
                
                border-bottom: none;
                
                overflow:hidden;
            }
            #navbar 
            {
                max-height: 75px;
                max-width:100%;
                background-color: #000000;
                padding: 10px
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
                
              text-indent: 0;
            }


            /* navigation links*/
            #navbar li a {
                color: #A12B2B;
                font-weight: 800;
                text-decoration: none;
                border: none;
                content: none;
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #E0D6D6;
                text-decoration: underline;
                border:none
            }

            #flex 
            {
                display: flex;
            }

            aside {
                background-color: #240001;
                width: 160px;
                
                padding:30px;
                padding-right:20px;
                
                margin-top: 50px;
                margin-bottom: 125px;
                
                border: 2px transparent;
                border-radius: 4px;
            }
            #leftSidebar
            { margin-right: 10px }
            #rightSidebar
            { margin-left: 10px; }

    lastfm-tracks {
  box-sizing: border-box;
  border: 1px solid #000;
  width: 150px;
  height: 400px;
    }

            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: #450608;
                flex: 1;
                order: 2;
                
                /*
                outline: 1px;
                outline-style: solid; 
                outline-color: white; 
                */ 
                
                border: 2px transparent;
                border-radius: 4px;
                
                margin-top: 25px;
                margin-bottom: 100px;
            }
            
            #mainBody {  padding-left: 30px; padding-right:30px }
            
            #leftSidebar {order: 1;}
            #rightSidebar {order: 3;}

            footer {
                background-color: transparent;
                max-width: 100%;
                height: 40px;
                
                padding: 10px;
                text-align: center;
                font-size:16px;
            }
            
            footer li, a { 
                color: #942222;
                font-weight: bold;
                text-decoration: none; }

            h1, h2, h3 {color: #942222;}

            h1 {font-size: 50px;}
            
            h2 {font-size: 40px;}
            
            h3 {font-size:30px }
        
            strong { color: #AB3C3E; }

            .box {
                
                background-color: #000000;
                
                border: 2px transparent;
                border-radius: 4px;
                
                margin-top: 20px;
                
                padding: 10px;
                
                max-height:500px;
                max-width:120%;
                
                overflow-y:scroll;
                
                font-size: 60%;
            }
            
            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            
.tooltip {
  position: relative;
  border-bottom: 2px dotted #FFF7EE;
  
}

.tooltiptext
{
  position:relative;
  bottom: 100%;
  left: 0;
  overflow:visible

}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 200px;
  max-width: 9000px;
  color: #FFF7EE;
  font-size:17.5px;
  background-color:rgba(0, 0, 0, 0.9);
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  
  position:absolute;
  z-index:3;

  
}


.tooltip:hover .tooltiptext {  visibility: visible; }
  




.collapsible 
{
  
  background-color: #290001;
  color: white;
  font-family: 'Bit';         
  cursor: pointer;
  margin: auto;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  border-style:none;
  border-color: darkred;
  text-align: left;
  font-size: 30px;
  z-index:1;
  overflow:scroll
  
}



.collapsible:hover {
			z-index: 2;
			visibility: visible;
}

.collapsibleactive, .collapsible:hover {
  background-color: #610002;
}

.collapsible:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 30px;
  color: white;
  float:left;
  text-align:center;
  margin-right:20px

}

.collapsibleactive:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}



.accordion {
  background-color:#450608;
  color: #fff7ee;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-family:'Bit';
  font-size: 30px;
  overflow: scroll;
}


.accordion:after {
  content: '+'; 
  font-size: 30px;
  float: left;
  margin-right: 15px;
}

.accordionactive:after {
  content: "-"; 
}

.panel {
  padding: 0 10px;
  display: none;
  overflow: hidden;
}

.content {
  padding-top: 0;
  padding-left: 25px;
  padding-right: 15px;
  display: none;
  overflow: visible;
  z-index:1;
}

    .spacerbig
    {
     visibility:hidden;
     height:50px;
    }
    
    .spacersmall
    {
     visibility:hidden;
     height:20px;
    }

 /* Remove default bullets */
    ul, #nestUL {
      list-style-type: none;
    }
    
    /* Remove margins and padding from the parent ul */
    #nestUL {
      margin: 0;
      padding: 0;
    }
    
    /* Style the caret/arrow */
    .caret {
      cursor: pointer;
      user-select: none; /* Prevent text selection */
    }
    
    /* Create the caret/arrow with a unicode, and style it */
    .caret::before {
      content: "+";
      color: white;
      display: inline-block;
      margin-right: 10px;
    }
    
    /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
    .caret-down::before {
      content: "x"
    }
    
    /* Hide the nested list */
    .nested {
      display: none;
    }
    
    /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
    .nestactive {
      display: block;
    } 







            /* BELOW THIS POINT IS MEDIA QUERY */

            /* container width - 100 = max-width
    */

            @media only screen and (max-width: 1350px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }