body {
         width:100%;
         height:100%;
          background-color: #d1d1d1ff;
          font-family: Arial;
          color: #344e62 ;
          
            }
          
        .innertube{
          display: flex; 
          flex-direction: column; 
          justify-content: center; 
          align-items: center;
          z-index: 10;
   }
        
            #myBtnContainer {
            margin-top: 5px;
            margin-bottom: 8px;
            font-size: 12px;
            position: relative;
            padding: 4px 5px 5px 10px;
            height: 71px; 
            width: 718px; 
              float: left;
            
    }

#top-navi{
		  z-index: 1;
		  display: flex; 
          flex-flow: row wrap;
  background-color: #ffffffff;
  border-radius: 15px;
          background-size: 12%;
          height: 90px;
          width: 1022px;
          margin: 19px 0px 0px 0px;
		}

            #myBtnContainer button {
              margin-top: 4px;
    }
    
            /* Style the buttons */
            .btn {
                background-color: #ffffffff;
                color: #1301da;
                cursor: pointer;
                border: solid 1px #b7b7b7ff;
                box-shadow: inset 0px 3px 4px 1px #9090ffa5;
                border-radius: 4px;
   }

            .btn:hover {
                background-color: #206f29;
                color: #ffffff;
                transform: rotate(9deg);
                box-shadow: inset 0px 3px 4px 1px #ffffff67;
   }

            .btn.active {
                background-color: #2625ff;
                color: white;
   }
    
        .filterDiv {
          
          display: none; /* Hidden by default */
        }
        

        /* The "show" class is added to the filtered elements */
        .show {
            display:inline; 
    }
    

        .tabs {
            display: flex;
            overflow: hidden;
        }
       
        .tab-content {
          display: none;
          }
         
        .tab-content.active {
            display: flex;
        }


        .thumb-list {
          border: 1px solid;
          border-radius: 10px;
          width: 1022px;
          height: 1028px;
          flex-direction: column; 
          justify-content: flex-start; 
          align-items: center;
          overflow: scroll;
          margin-top: 10px;
         
          
          }

      .row {
       display: flex; 
      justify-content: flex-start; 
      align-items: center;
      flex-flow: row wrap;
       }

.thumb {
   border: 5px ridge #ffffff; 
   border-radius: 15px;
   margin: 5px;
   background-color: #000000;
  box-shadow: inset 0px 0px 9px 11px #000000ff;
   overflow: hidden;
   opacity: 0.8;
}

.thumb:hover{
 opacity: 1;
 transform: scale(1.05) rotate(8deg);
}

.full-view{
   border: 1px solid; 
   border-radius: 10px;
   width: 1011px;
   height: 1000px;
   flex-direction: column; 
   justify-content: flex-start; 
   align-items: center;
	 z-index: 10;
	 margin-top: -103px;
  margin-bottom: -79px;
	 padding: 5px;
   border-color: #959595; 
   background-color: #ffffff;
  overflow: scroll;
  
}
  


  .full-view img {
         height: auto ;
         width: auto ;
         max-width: 750px;
         max-height: 900px;
         border-radius: 10px;
         margin-bottom: 9px;
      } 

  #left {
		 height: 90vh;
	   flex-direction: column;
     float: left;
	   width: 300px;	
		 margin: 1%;
		 background-color: #2AC2FF;
	 	 border: 7px ridge #2AC2FF;
		 color: #007BDE ;
		 font-family:Arial ;
		 position: absolute;
     overflow: hidden;
		}
		
    /* for blurbs abt the art */ 
     .yap-box {
       width: 750px;
       text-align: center;
       font-size: 14px;
       background-color: rgba(25, 90, 160, 0.21);
       border-radius: 10px;
       margin-top: 15px;
       margin-bottom: 15px;
       padding-left: 14px;
       padding-right: 14px;
       padding: 5px;
     }
   
.yap-box p {
           color: #222222;
  background-color: rgba(255, 255, 255, 0.31);
  border:ridge rgba(92, 137, 177, 0.47) 5px;
  padding: 10px;
  text-align: justify;
         }

.yap-box-dark {
       width: 750px;
       text-align: center;
       font-size: 14px;
       background-color: rgba(165, 165, 165, 0.28);
       border-radius: 10px;
       margin-top: 15px;
       margin-bottom: 15px;
       padding-left: 14px;
       padding-right: 14px;
  padding: 5px;
     }
.yap-box-dark p {
           color: #b7b7b7;
  background-color: rgba(5, 5, 5, 0.41);
  border:ridge #000000 5px;
  padding: 10px;
  text-align: justify;
         }

.yap-box-dark img {
           width: 600px;
         }

.yap-box img {
           width: 600px;
         }

.yap-box-dark a, yap-box a {
           color: #3e6aff;
  border: groov;
         }

hr.dotted {
    border: 2px dotted #777777;
    margin: 2px 1px 5px 1px;
    padding: 1px;
  display: inline-block;
}

     h1, h2, h3, p {
           color: #626262;
         }
         
     a {
           color: #427cff;
         } 
         
     a:visited {
           color: #003aff;
         }
	
     a:hover {
           color: #de3434;
         }
  
  #floaties {
      position:fixed;
         }
         
         .mobile {
           display: none;
         }
         
 .back {
  text-decoration: none;
  border: 2px outset #b6d5ed; 
  padding: 2px 6px 1px 1px; 
  margin-left: -64%; 
   margin-top: 7px;
  border-radius: 10px; 
  background-color: rgba(190, 206, 216, 0.7);
   position: fixed;
          }
         
    .back:hover {
    border: 2px inset #bfd8e0;
      
  }
.back b {
    color: #61818b;
  }
.back b:hover {
    color: #9cc2ce;
  }
  
  #toggleMuteBtn {
  border: solid 2px #5f1b1bff;
    border-radius: 4px;
    box-shadow: inset 0px 3px 4px 1px #ffffffa5;
    background-color: #7e0c0c;
    color: #ffffff;
    text-align: right;
    width: fit-content;
    height: 22px;
    font-style: ;
    font-size: 12px;
    padding: 4px 9px 16px 6px;
    margin: 1px 2px 0px -5px;
    cursor: pointer;
  }
  
  #toggleMuteBtn:hover {
    border: solid 2px #ac2222ff;
     background-color: #f02020;
    color: #ffffff;
    box-shadow: inset 0px 3px 4px 1px #6f000067;
  }

#footer {
    z-index: 1;
		  display: flex; 
          flex-flow: row wrap;
  background-color: #ffffffff;
  border-radius: 15px;
          height: 68px;
          width: 1022px;
          margin: 10px 0px 0px 0px;
		}
.socials{
  margin-left: 5px;
  font-size: 12px;
  margin-top: 7px;
  float: left;
  width: 1014px;
			}
		.socials a{
			color: #929292;
			margin-top: 5px;
			font-style: italic;
          font-weight: 700;
			}
.socials a:hover{
			color: #ff3361;
  
			}
		.socials a img{
			width: 15px;
			margin: 0px 5px -4px 5px;
			}
#footer p {
			
  color: #b2b2b2;
  margin-left: 5px;
  margin-top: 11px;
			}
 /* ------------------- Buttons -----------------------*/


.button_socials {
    border: solid 1px #5f1b1bff;
    border-radius: 4px;
    box-shadow: inset 0px 3px 4px 1px #ffffffa5;
    background-color: #7e0c0c;
    color: #ffffff;
    text-align: right;
    width: fit-content;
    height: 22px;
    font-style: italic;
    font-size: 11px;
    padding: 4px 9px 16px 6px;
    margin: 1px 2px 0px -5px;
    cursor: pointer;
}

.button_socials:hover {
    background-color: #f02020;
    color: #ffffff;
    transform: rotate(-9deg);
    box-shadow: inset 0px 3px 4px 1px #6f000067;
}

.button_socials.unactive {
    background-color: #4f0808;
    color: #9d5b5b;
    box-shadow: inset 0px 5px 7px 1px #0000006f;
}

.button_socials.active {
    background-color: #2625ff;
    color: white;
}

.button_socials img {
    margin-top: -2px;
    margin-right: 3px;
}
/* ------------------- Buttons End -----------------------*/
  
   /* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: rgba(242, 255, 240, 0.4);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9f9f9f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d0d0d0;
}



audio::-webkit-media-controls-panel {
  background-color:  rgba(80, 189, 255, 0.8);
   }

audio::-webkit-media-controls-current-time-display {
  color: #008FFF;
      }

audio::-webkit-media-controls-time-remaining-display {
   color: #008FFF;
}
 
         
  @media screen and (max-width: 1350px) {
    
    .innertube{
			margin-left: 25%;
		}
    
  }
  
  @media screen and (max-width: 1190px) {
    
   .innertube{
			margin-left: 0%;
		}
		
		#left {
		 display: none;
		}  
		
		.mobile {
           display: flex;
         }
		
		.tab-content {
        height: 600px;
           }
		
  }
  
  @media screen and (max-width: 860px) {
    
     .tab-content, .full-view {
        width: 640px;
           }
    
    .full-view img {
      max-width: 600px;
    }
    
    	#left {
		 display: none;
		}  
		
				
		.mobile {
           display: flex;
         }
		
			#floaties {
		 display: none;
		}  
    
  }
    
  @media screen and (max-width: 680px) {
    
     .tab-content, .full-view {
        width: 400px;
           }
    .full-view img {
      max-width: 370px;
    }
    
    	#left {
		 display: none;
		} 
		
			#floaties {
		 display: none;
		}  
		
				
		.mobile {
           display: flex;
         }
    
    .thumb {
  width: 70px;
  height: 70px;
}

.back {
  margin-left: -80%; 
          }
          
          	
		.top-tab{
    height: 30px;
    width: 80px;
    }
    
    
    }
    
  @media screen and (max-width: 450px) {
    
    .tab-content, .full-view {
        width: 300px;
           }
    .full-view img {
      max-width: 280px;
    }
    	#left {
		 display: none;
		} 
		
			#floaties {
		 display: none;
		} 
	
    .thumb {
  width: 70px;
  height: 70px;
}

 .back {
  margin-left: -75%; 
          }
          		
		.mobile {
           display: flex;
         }
         
         	
		.top-tab{
    height: 30px;
    width: 55px;
    font-size: 85%;
    }
    
          
  }
  
  @media screen and (max-width: 310px) {
    
     .tab-content, .full-view {
        width: 250px;
           }
    
    .full-view img {
      max-width: 240px;
    }
    
    	#left {
		 display: none;
		} 
		
			#floaties {
		 display: none;
		} 
		
		.top-tab{
    height: 30px;
    width: 63px;
    }
    
    .thumb {
  width: 55px;
  height: 55px;
}
   
   .back {
  margin-left: -70%; 
          }
    
    		
		.mobile {
           display: flex;
         }
    	.top-tab{
    height: 30px;
    width: 45px;
    font-size: 70%;
    }
    
  }
  
  @media screen and (max-height: 680px) {
    
     .tab-content, .full-view {
        height: 550px;
           }
           
     .full-view img {
      max-height: 480px;
    }
  }
    
  @media screen and (max-height: 625px) {
    
     .tab-content, .full-view {
        height: 500px;
           }
           
      .full-view img {
      max-height: 400px;
    }
    }
    
  @media screen and (max-height: 570px) {
    
    .tab-content, .full-view {
        height: 450px;
           }
           
      .full-view img {
      max-height: 380px;
    }
    
   
  }
  
  @media screen and (max-height: 540px) {
    
     .tab-content, .full-view {
        height: 400px;
           }
           
      .full-view img {
      max-height: 310px;
    }
  }
  
  @media screen and (max-height: 480px) {
    
     body {
          overflow: scroll;
     } 

     
  }