/* site fonts */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Sora&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');


em {
    font-style: italic;
}

/* max width of site */
.site-container {
  width: 90%;
}

/* body style */

body {
  font-family: 'Permanent Marker', cursive;
  background-color: black;
  color: black;
}

a {color: black;}

a:link {
  text-decoration: none;
  color: black;
}

a:hover {color: black;}

a:visited {color: black;}

a.two:link { 
  text-decoration: none; 
  color: black; }

a.two:visited { color: black;}

a.two:hover { color: black;}

/* content containers and styles*/

mark {
  background-color: black;
  color: white;
  border-radius: 3px;
}

h1 {
   font-family: 'Lato';
   padding-top: 6px;
   padding-left: 15px;
   font-size: 16px;
   font-weight: bold;
   color: rgba(245,245,245, .85);
}

.stub1 {
   margin: auto;
   margin-top: 100px;
   max-width: 600px;
   background: black;
   color: white;
   padding: 5px;
   border: 1px solid rgba(105,105,105, .4);
 }

.stub-about3 {  
   font-family: 'Lato';
   font-size: 15px;
   text-align: left;
   margin: auto;
   margin-top: 100px;
   max-width: 500px;
   margin-bottom: 10px;
   color: black;
   background-color: white;
   padding: 5px;
   border: 1px solid rgba(105,105,105, .4);
 }

.stub-about3-name {
  font-family: 'Permanent Marker', cursive; 
  font-size: 25px;
  width: 180px;
  
}

.stub-about3-name2 {
  font-family: futura; 
  font-size: 16px;
  
}


/* navigation */
.sidenav {
  font-family: 'Permanent Marker', cursive;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  background: rgba(0, 0, 0, 0.75);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 115px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 19px;
  color: whitesmoke;
  display: block;
  transition: 0.3s;
  
}

.sidenav a:hover {
  color: silver;
}

.sidenav .active {
  color: darkgray;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.menu-icon {
 float: left;
 margin-left: 20px;
 margin-top: 20px;
 width: 45px;
 padding-top: 20px !important;
 cursor: pointer;
}

.menu-title2 {
  float: left; 
  margin-left: 10px;
  margin-top: 25px;
  font-family: 'Permanent Marker', cursive;
  height: 62px;
  width: 330px; 
  text-decoration: none; 
  font-size: 45px; 
  color: black;
  text-shadow: 1px 1px 4px grey;
}

.menu-lines {
  width: 35px;
  height: 5px;
  background-color: grey;
  margin: 6px 0;
}

.CC {
   margin: auto;
   margin-top: 80px;
   height: 50px;
   width: 100%;
   text-align: center;
   filter: opacity(50%);

}

.responsive-iframe1a {
  z-index: -1;
  position: absolute;
  top: 130px; /*was 170*/
  bottom: 0;
  margin-left: 75px;
  width: 70%;
  height: 500px;
  border: 1px solid rgba(105,105,105, .4);
}

.art-title1 {
  position: absolute;
  bottom: -10;
  left: -1px;
  width: 600px;
  height: 30px;
  /*border: 1px solid rgba(105,105,105, .4);*/
}
  
/* for mobile */
@media screen and (max-width: 800px) {

  .sidenav {padding-top: 100px;}
  
  .sidenav a {font-size: 18px;}
  
.menu-title2 {
  margin-left: 10px;
  margin-top: 31px;
  font-size: 40px;
} 
   
h1 {
  font-size: 12px;
}

.stub1 {
  margin-left: 20px;
  
}

.stub-about3 {
   margin-left: 20px; 
     
  }
    
  .art-title1 {
  width: 275px;
  height: 45px !important;
}
  
  .responsive-iframe1a {
  width: 80%;
}

.CC {
  
  scale: 80%;

}


}

@media screen and (max-width: 450px) {
    
.menu-title2 {
  margin-top: -47px;
  margin-left: 75px;
  font-size: 35px;
}
    
  .stub1 {
    width: 95%; 
} 

.stub-about3 {
   width: 95%;  
  }   
    
.responsive-iframe1a {    
  margin-left: 20px;    
  width: 85%;

} 
    
  }