@font-face {
    font-family: Abel;
    src: url(Abel-Regular.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(Roboto-Black.ttf);
}

@font-face {
  font-family: Mulish;
  src: url(Mulish-VariableFont_wght.ttf);
}

@font-face {
  font-family: PlayWrite;
  src: url(PlaywriteAUQLD-Regular.ttf);
}



/*styling top nav*/
.topnav {
  position: fixed; /* Fixes the navbar to the viewport */
  top: 0;          /* Positions it at the very top */
  width: 100%;      
  background-color: #101010;
  z-index: 10;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-family: Abel;
  letter-spacing:1px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}



.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}






.NameDiv p:nth-child(1) {
 font-family: PlayWrite;
 font-size: 45px;
 text-align:center;
 color:grey;
}

.NameDiv p:nth-child(2) {
  font-family: Abel;
  font-size: 23px;
  text-align: center;
  letter-spacing:2px;
 }


@media screen and (max-width: 600px) {
  .NameDiv p:nth-child(1){
    font-size: 35px; 
  }

  .NameDiv p:nth-child(2) {
    font-size:18px;
  }
}

@media screen and (max-width: 450px) {
  .NameDiv p:nth-child(1){
    font-size: 30px; 
  }

  .NameDiv p:nth-child(2) {
    font-size:15px;
  }
}



/* About section  */
#band h2, #band p{
  font-family: Abel;
}

#band h2{
  font-size: 33px;
}

#band p{
  font-size: 20px;
}

#band .tagline{
  color:rgb(100,100,100);
  font-family:Abel;
  text-align: center;
  font-size:20px;
  letter-spacing:1px;
  margin-top:-10px;
}


@media screen and (max-width: 600px) {
  #band h2{
    font-size: 28px;
  }
  #band p, #band .tagline{
    font-size: 18px;
  }
}

@media screen and (max-width: 450px) {
  .NameDiv p:nth-child(1){
    font-size: 30px; 
  }

  .NameDiv p:nth-child(2) {
    font-size:18px;
  }
}


/*Products Div*/

.ProductsDivHeader h2{
  font-family:Abel;
  font-size:33px;
  letter-spacing: 3px;
  font-weight: normal;
  text-align:center; 
}

.ProductsDivHeader .tagline{
  color:rgb(100,100,100);
  font-family:Abel;
  text-align: center;
  font-size:20px;
  letter-spacing:1px;
  margin-top: -10px;
}

.Products1Div, .Products2Div{
  background-color:rgb(250,250,250); 
  padding-top:50px;
  padding-bottom:50px;
  padding-left:20px;
  padding-right:20px;
  height:fit-content;
  overflow:hidden;
 }

 .Products2Div{
  padding-top: 0px;
  margin-top: -30px;
 }
 
 .Products1Div .Content{
   float: left;
   width:75%;
   padding:10px;
 }

 .Products2Div .Content{
  float: right;
  width:75%;
  padding:10px;
}
 
 .Products1Div .Content h2, .Products2Div .Content h2{
   font-family:Roboto;
   font-size:22px;
   letter-spacing:1px;  
   word-spacing:2px;
   font-weight: normal;
 }
 
 .Products1Div .Content p, .Products2Div .Content p{
  font-family: Abel;
  font-size:20px;
  word-spacing: 4px;
 }
 
 .Products1Div .ImageDiv{
   width:25%;
   float: right;
   padding:10px;
 }

 .Products2Div .ImageDiv{
  width:25%;
  float: left;
  padding:10px;
}
 
 .Products1Div .ImageDiv img, .Products2Div .ImageDiv img{
   max-width:80%;
   height:250px;
 }


 @media only screen and (max-width: 900px) {
  .Products1Div .Content, .Products2Div .Content{
   width:60%;
  }
  .Products1Div .ImageDiv, .Products2Div .ImageDiv{
   width: 40%; 
  }
 }

 @media screen and (max-width: 600px) {

  .Products1Div .Content h2, .Products2Div .Content h2{
    font-size: 18px;
  }

  .ProductsDivHeader h2{
    font-size: 28px;
  }

  .Products1Div .Content p, .ProductsDivHeader .tagline, .Products2Div .Content p{
    font-size: 18px;
  }

  .Products1Div .Content, .Products1Div .ImageDiv, .Products2Div .Content, .Products2Div .ImageDiv{
    float:none;
    width:100%;
   }

   .Products1Div .ImageDiv img, .Products2Div .ImageDiv img{
    max-width:100%;
   } 
}


#contact h2{
  font-family:Abel;
  font-size:33px;
  letter-spacing: 3px;
  font-weight: normal;
  text-align:center; 
}

#contact p{
  color:rgb(100,100,100);
  font-family:Abel;
  text-align: center;
  font-size:20px;
  letter-spacing:1px;
  margin-top: -10px;
}

.ContactInfo{
  font-family: Abel;
  font-size:20px;
  word-spacing: 4px;
}


@media screen and (max-width: 600px) {

  .contact h2{
    font-size: 28px;
  }

  .contact p{
    font-size: 18px;
  }

  .ContactInfo{
    font-size: 18px;
  }


  
}