@charset "UTF-8";
*{
   margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    
}

@font-face{
    font-family: 'Metropolis';
    src:url("/fonts/Metropolis-Regular.otf") format('opentype');
    font-weight:normal;
    
}

body{
    background: rgba(51,49,50, 1.0)
        
}

nav{
    
    height: 90px;
    display: flex;
    justify-content: space-around;
    align-items:center;
    min-height: 12vh;
    padding-top: 70px;
    background-color:none;
   
}

#burger-btn {
	
	display: none;
	
} 

ul{
    
    list-style-type: none; 
    display: flex;
	justify-content: flex-start;
    margin-left:30%;
    
}

li a{
    font-family: 'Metropolis', sans-serif;
    color:whitesmoke;
    font-weight: lighter;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 20px;
    
    
}


nav li:nth-child(1) a:hover {
        color:rgba(225,160,59,1.00)
}

nav li:nth-child(2) a:hover {
      color:rgba(198,87,102,1.00)
}

nav li:nth-child(3) a:hover {
    color: rgba(185,39,16,1.00)
}

nav li:nth-child(4) a:hover {
    color:rgba(206,120,11,1.00)
}



/* HOME */



.home-page-image {
         max-width: 50%;
         height: auto;
          margin-left: 10%;
          margin-top: -10%;
      }

.home-page-title {
      max-width: 130%;
         height: auto;
          margin-left: 0%;
          margin-top: -20%;
    
}





.burger{
    padding: 30px;
    align-content: flex-start;
    display: none;
  
}

.burger div{
    
    width: 40px;
    height: 5px;
    background-color: whitesmoke;
    margin: 5px;
    align-content: flex-end;
    margin-left: 500%;
}





/* ABOUT */


.about-page-image {
         max-width: 37%;
         height: auto;
          margin-left: 10%;
          margin-top: 5%;
      }


.about-page-conatiner1{
    background-color:none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    alighn-items: center;
    align-content: center;

    
}

.about-page-conatiner2{
    background-color:none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
   align-items: center;
    
    
}


    
.about-page-paragraph{
    display: block;
    color: whitesmoke;
    font-size: 1.5rem;
    font-family:'Metropolis';
    padding-left: 400px;
    padding-right: 400px;
    padding-bottom: 300px;
    margin-top: -10%;  
    
    }

.about-page-conatiner3{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    top-margin: -50%;
    
    
    
}

.about-page-title-image{
    max-width: 17%;
    min-width: 17%;
    margin-left: 75%;
    margin-top: -70%;
}
    



/* GALLERY */


.column {
  float: left;
    width: 33.33%;
  padding-right: 20px;
    padding-left: 10px;
    margin-top: 5%;


}

/* Clear floats after image containers */
.row::after {
  content:normal;
  clear: both;
  display: table;

}





/* GALLERY-PAINTINGS */



.paintings-page-title-image{
      max-width: 17%;
    min-width: 17%;
    margin-left: 75%;
    margin-top: -70%;
}

.paintings-page-conatiner1{
    box-sizing: border-box;
    transition:0.2s linear;
    padding: 2rem 5%;
     background-color:none;
    display: flex;
    flex-direction: flex-start;
    justify-content: center;
    alighn-items: center;
    align-content: center;
    margin-right: 20%;
}

.paintings-page-conatiner1 .image-container{
    columns: 15rem 3;
    gap:1.4rem;
    
}

.paintings-page-conatiner1 .image-container img{
    width: 100%;
    margin-bottom: 1rem;
    border-radius:0.7;
    
}


.paintings-page-conatiner2{
     background-color:none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    alighn-items: center;
    align-content: center;
    
}

/* GALLERY-PHOTOS */



.photos-page-title-image{
    max-width: 17%;
    min-width: 17%;
    margin-left: 75%;
    margin-top: -70%;
}

.photos-page-conatiner1{
    box-sizing: border-box;
    transition:0.2s linear;
    padding: 2rem 5%;
     background-color:none;
    display: flex;
    flex-direction: flex-start;
    justify-content: center;
    alighn-items: center;
    align-content: center;
    margin-right: 20%;
}

.photos-page-conatiner1 .image-container{
    columns: 15rem 3;
    gap:1.4rem;
    
}

.photos-page-conatiner1 .image-container img{
    width: 100%;
    margin-bottom: 1rem;
    border-radius:0.7;
    
}


.photos-page-conatiner2{
     background-color:none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    alighn-items: center;
    align-content: center;
    
}
    





/* CONTACT */



.contact-page-title-image{
    
    max-width: 17%;
    min-width: 17%;
    margin-left: 75%;
    margin-top: -30%;
    margin-bottom: 10%;
}

.contact-page-main-image{
   max-width: 30%;
    max-height: auto;
    margin-top: 10%;
    margin-top: 10%;
    margin-left: 10%;
    
}

.contact-page-text{
    font-family: 'Metropolis';
    color: whitesmoke;
    font-size: 1.2rem;
    margin-left: 10%;
    margin-top: 5%;
  
}


#contact_form {
    font-family: 'Metropolis';
    background-color: none;
     padding-top: 20px; 
    padding-bottom: 20px;
    margin-left: 45%;
    margin-top: -30%;
  }

.row label{
  color:whitesmoke;
  font-size: 18px;
  margin-left: 10px;
}

input[type=text], textarea {
  text-align: center;
  background-color: dimgray;
  border-radius: 5px;
  margin: auto 0;
  color: #FFFFFF;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 5px 5px 5px #3e4444;
  }

input[type=text] {
  height: 25px;
}

input[type=submit] {
  background-color: #ff7b25;
  color: #FFFFFF;
  border-radius: 5px;
  font-size: 18px;
  margin-left: 10px;
  box-shadow: 5px 5px 5px #3e4444;
}













/* RESPONSIVE STUFF */




@media screen and (max-width: 768px){   
    
    body{
        overflow-x: hidden;
    }
    
    nav{
        margin-bottom: 10px;
    }
    
    
    .burger{
        display: block;
        cursor: pointer;
        
    }
    
    .burger:hover{

		/*background-color: lime; <-- note to self: turn this on to double check navigation respose */
        
    }
    
    .home-page-image{
          max-width: 60%;
          height: auto;
          margin-left: -10%;
          margin-top: 20%;
      }
    
    .home-page-title {
          max-width: 70%;
         height: auto;
          margin-left: 10%;
          margin-top: -20%;
    
}
        
        
    
    
    .nav-links {
        
        position: absolute;
        background-color: none;
        left: 10px;
        height: 19vh;
        top: 8vh;
        display:block;
        flex-direction: column;
        justify-content: flex-end;
		margin-left: 770px;
		margin-top: 55px;
        
    }
	
	nav input:checked ~ div .nav-links {
		transform: translateX(-450px);
        transition: transform 0.5s ease-in;
        
	} 
    
.contact-page-main-image{
   max-width: 50%;
    max-height: auto;
    margin-top: 10%;
    margin-top: 10%;
    margin-left: 10%;
    
}
    
    #contact_form {
    font-family: 'Metropolis';
    background-color: none;
     padding-top: 20px; 
    padding-bottom: 20px;
    margin-left: 10%;
    margin-top: 0%;
  }