*{box-sizing: border-box;
      margin: 0 auto;}

body {
    height:100%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-image:repeating-linear-gradient(45deg,
     /*inside transparent orange 1*/ rgba(255, 141, 0, 0.50) 0px,
    rgba(255, 141, 0, 0.50) 20px,
      transparent 20px,
      transparent 50px),

    /*orange border 1*/    repeating-linear-gradient(45deg,
      rgba(255, 200, 0, 1.0) 20px,
    rgba(255, 200, 0, 1.0) 25px,
      transparent 25px,
      transparent 45px),

    /*orange border 2*/     repeating-linear-gradient(-45deg,
      rgba(255, 200, 0, 1.0) 20px,
    rgba(255, 200, 0, 1.0) 25px,
      transparent 25px,
      transparent 45px),


   /*inside transparent orange 2*/ repeating-linear-gradient(-45deg,
      rgba(255, 141, 0, 0.50) 0px,
    rgba(255, 141, 0, 0.50) 20px,
      transparent 20px,
      transparent 50px),

        
   linear-gradient(90deg, rgb(22, 150, 5),
    rgb(22, 135, 5) 40%,
    rgb(11 113 0) 42%,
    rgb(11 113 0) 60%,
    rgb(22, 135, 5) 62%, rgb(22,150,5));
      
}


#header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-inline-start: 0px;
    /** background-color: rgb(11 113 0);*/
    width: 100%;
    overflow: auto;
    border: 3px dashed black /*rgba(255, 141, 0, 0.90)*/;
    margin: 0px auto;
    padding: 2px;
    background-image: repeating-linear-gradient(180deg,
    /*inside transparent orange 1*/ rgba(255, 141, 0, 0.50) 0px, rgba(255, 141, 0, 0.50) 20px, transparent 20px, transparent 50px),
    /*orange border 1*/ repeating-linear-gradient(180deg, rgba(255, 200, 0, 1.0) 20px, rgba(255, 200, 0, 1.0) 25px, transparent 25px, transparent 45px),
    /*orange border 2*/ repeating-linear-gradient(-90deg, rgba(255, 200, 0, 1.0) 20px, rgba(255, 200, 0, 1.0) 25px, transparent 25px, transparent 45px),
    /*inside transparent orange 2*/ repeating-linear-gradient(-90deg, rgba(255, 141, 0, 0.50) 0px, rgba(255, 141, 0, 0.50) 20px, transparent 20px, transparent 50px), linear-gradient(90deg, rgb(22, 150, 5), rgb(22, 135, 5) 40%, rgb(11 113 0) 42%, rgb(11 113 0) 60%, rgb(22, 135, 5) 62%, rgb(22,150,5));
}

a{color: black;}

#body{width: 1000px;
      min-height: 100%;
    /* height: inherit;*/
      background-color: rgb(22, 150, 5);
      margin: 0px auto;
      border: solid;
      position: relative;
      text-align: center;
      overflow: hidden;
      
       

}

#body>p{
    margin: 0 auto;
    
}

ul{list-style: none;}



#header > li {
    float: left;
    width: 33.33%;
    padding: 3px 3px 0px 3px;
    box-sizing: border-box;
    letter-spacing: 10px;
    list-style-type: none;
    text-align: center;
    font-size: 33px;
    border: 1px outset green;
    flex: 1 0 0;
}

[id='splash page']{
    height: 65%;
    width: 100%;
}





h1{text-align: center;
   font-family: serif;
   font-size: 500%;
   text-shadow: 0px 1px 2px white, 0px 3px 5px black;
   color: black;

}

h2 {
    text-align: center;
    margin: 0px 0px 0px 0px;
    font-size: 400%;
   
}

#nav{
    background-image: linear-gradient(90deg, rgb(22, 150, 5),
    rgb(22, 135, 5) 40%,
    rgb(11 113 0) 42%,
    rgb(11 113 0) 60%,
    rgb(22, 135, 5) 62%, rgb(22,150,5));
    position:absolute; 
    width: 100%;
   left:0px;
    bottom: 0px;
    margin:0 auto;
    height:6%;
    min-height:45px;
    max-height: 20%;

   
    

    
    
    
    
}

#nav>ul{
    
        color: black;
     width:100%;
     /*margin: 0 auto;*/
      text-align: center;
     list-style-type: none;
     font-size: 200%;
     display: flex;
     flex-direction:row;
     justify-content:flex-start;
     padding-inline-start: 0px;
     height: 100%;
    
     
     
     

     
}
    #nav > ul > li {
        border: 3px dashed rgb(0, 0, 0);
       /* width: 33.33%;*/
       flex: 1 0 0;
       margin: 0 0;
        
         background-image:repeating-linear-gradient(180deg,
     /*inside transparent orange 1*/ rgba(255, 141, 0, 0.50) 0px,
    rgba(255, 141, 0, 0.50) 20px,
      transparent 20px,
      transparent 50px),

    /*orange border 1*/    repeating-linear-gradient(180deg,
      rgba(255, 200, 0, 1.0) 20px,
    rgba(255, 200, 0, 1.0) 25px,
      transparent 25px,
      transparent 45px),

    /*orange border 2*/     repeating-linear-gradient(-90deg,
      rgba(255, 200, 0, 1.0) 20px,
    rgba(255, 200, 0, 1.0) 25px,
      transparent 25px,
      transparent 45px),


   /*inside transparent orange 2*/ repeating-linear-gradient(-90deg,
      rgba(255, 141, 0, 0.50) 0px,
    rgba(255, 141, 0, 0.50) 20px,
      transparent 20px,
      transparent 50px),

        
   linear-gradient(90deg, rgb(22, 150, 5),
    rgb(22, 135, 5) 40%,
    rgb(11 113 0) 42%,
    rgb(11 113 0) 60%,
    rgb(22, 135, 5) 62%, rgb(22,150,5));
    }
        #nav > ul > li:nth-of-type(1) {
            border-width: 3px 0px 3px 3px;      
}
        #nav > ul > li:nth-of-type(2) {
            border-width: 3px 3px 3px 3px;  
        }

#nav>ul>li:nth-of-type(3){border-width: 3px 3px 3px 0px;                      
}

#nav>ul>li:nth-of-type(4){border-width: 3px 3px 3px 0px;

}


/*MUSIC PAGE--------------------------------------------------------------MUSIC PAGE*/

.bandname{text-decoration: none;}



.genre_list>ul{
    list-style: none;
}

.photo_container {
    border: none;
    height: 156px;
   /* max-height: 20%;*/
   
    overflow: auto;
    position: static;
    margin: 5px auto;
    width: 100%;
    justify-content: stretch;
    
    overflow:visible;
    display: flex;
    
}

    .photo_container {
        animation: 25s infinite normal linear gallery_scroll;


    }

    .photo_container:hover {

        animation-play-state:paused;
    }

    @keyframes gallery_scroll{

        0%{
            transform: translateX(0);
        }

        100%{
            transform: translateX(-208%);
        }
    }
    /*These two where smaller than the others for some reason
    .photo_container > img:nth-of-type(1) , .photo_container > img:nth-of-type(9){
        min-height: 100%;
        width: 70%;
        
    }*/
    


.photo_container > img {
    /*float: left;*/
   /* max-height: 100%;
    max-width: 100%; */
    /*min-width: 25%;
    min-height:20%; 
    width: 25%; */
    height: 100%;
    border: dashed;
    margin: 0 5px;
    display: inline;
    overflow: hidden;
    object-fit:fill;
    position: static;
    flex: 1 0 25%;
    transform-origin:50% 50%;
    scale: 1 1;

    transition:
        width 0.5s,
        height 0.5s,
        flex 0.5s,
    scale 0.5s;
    
    
}

    .photo_container > img:hover,
    .photo_container > img:active {
        width: 30%;
        height: 100%;
        flex: 1 0 28%;
        scale: 1 1.05;
    }

bandname{
    margin: 1% auto;
}

#player  {
    max-width: 100% !important;
}

#gallery{
    height:100%;
    width:100%;
    display:flex;
   
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
}

#gallery>img{
    width: 24%;
    height: 33%;
    flex:1 0 auto;
    border: 5px dashed black;
    margin: 1px 1px;
    
}

#education{
    
    position:absolute;
    left: 0%;
    width: 33.3333%;
    text-align: left;
    margin: 0% 0%;
}

#history{
    
    position: absolute;
    left: 33.3333%;
    width: 66.66666%;
    margin: 0% 0%;
}
#history>ul{
    list-style-type:disc;
    list-style-position:inside;
}

[id='Teaching Rundown']{
    
    position: absolute;
    bottom: 0%;
    margin: 0 auto;
    width: 100%;
}