p{
    font-family: 'Cormorant Garamond', serif;

}
a:link{
    font-family: 'Cormorant Garamond', serif;
    color: black;
    text-decoration: none;
}
a:visited{
    font-family: 'Cormorant Garamond', serif;
    color: black;
    text-decoration: none;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url(font/Cormorant_Garamond/CormorantGaramond-Light.ttf) format(truetype);
}



.header{
    height: 130px;
    width: 100%;
 background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 3px 20px rgb(215, 215, 215) ;


    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}


.headdiv{
    height: 70px;
    margin-top: -9px;
}
.head{
    text-align: center;
    font-size: 25px;
}


.category{

   
   width: 100%;
  
    display: grid;
    grid-template-columns:0fr 1fr 1fr 1fr 1fr 0fr ;
}

.studiophotodiv{
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.studiophoto{
    font-size: 18px;
}
.studiophoto:hover{
    font-size: 19px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .studiophoto:active{
        opacity: 1;
        transition: 0s;
    } 

.homediv{
   box-shadow: 0px 3px 20px rgb(215, 215, 215);
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
  
  
 
}

.home{
    font-size: 22px;
    font-weight: 500;
    opacity: 0.5;
}



.outdoorphotodiv{
   
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}
.outdoorphoto{
    font-size: 18px;
}
.outdoorphoto:hover{
    font-size: 19px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .outdoorphoto:active{
        opacity: 1;
        transition: 0s;
    } 







    

    .videodiv{
       
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        
    }
    .video{
        font-size: 18px;
    }
    .video:hover{
        font-size: 19px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .video:active{
            opacity: 1;
            transition: 0s;
        } 
    

.wholegrid{
  
  height: 80%;
    background-color: rgba(255, 255, 255,0.92);
    
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;
    margin-top: 130px;
   
    
     
    display: grid;
    
}

    

.profilediv{
margin-top: 2%;

    margin-left: auto;
    margin-right: auto;  
    translate: -50;
    height: 500px;
}
.profile{
   align-self: start;
   width: 370px;
   
}

.quote{
    @font-face {
        font-family: 'Cormorant Garamond';
        src: url(font/Cormorant_Garamond/CormorantGaramond-Bold.ttf) format(truetype),
    
        ;
    }
    color: rgb(255, 255, 255);
    margin-left: auto;
    margin-right: auto; 
    margin-top: -160px;
    
    text-align: center;
    font-size: 50px;
    font-weight: 900;
   
    
}

.quote2{
    font-family: 'Noto Serif Thai', serif;
    
margin-top: -60px;

    color: rgb(255, 255, 255);
   font-size: 15px;
    text-align: center;
    



  transition: 0s;
    } 
    @font-face {
        font-family: 'Cormorant Garamond';
        src: url(font/Cormorant_Garamond/CormorantGaramond-Light.ttf) format(truetype);
    }




    .contact{
        color: rgb(255, 255, 255);
        font-weight: 900;
        font-size: 130%;
        margin-left: auto;
        margin-right: auto; 
        margin-top: 3%;
        text-decoration: underline;
    }
    .email{
       
        margin-left: auto;
        margin-right: auto; 
        background-color: rgba(255, 255, 255, 0.9);
      margin-bottom: 10px;
        text-align: center;
        font-size: 20px;
        
        cursor: pointer;
    }
    .email:hover{
        font-size: 21px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .email:active{
            opacity: 1;
            transition: 0s;
        } 
    
     
            .tel{
                margin-left: auto;
                margin-right: auto; 
                background-color: rgba(255, 255, 255, 0.9);
           
                text-align: center;
                font-size: 20px;
                
                cursor: pointer;
            }
            .tel:hover{
                font-size: 21px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
                }
                .tel:active{
                    opacity: 1;
                    transition: 0s;
                } 
                
               




.sk{
    margin-top: 80px;
    box-shadow: 0px 3px 20px rgb(215, 215, 215);
    padding-bottom: 30px;
}
    .sketch{
       
        font-weight: 900;
        font-size: 130%;
    text-align: center;
        
        text-decoration: underline;
        
    }
  


                            .imgdiv{
                                
                                display: grid;
                              grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
                              gap: 15px;
                            }
                            .imgdiv img{
                                margin-top: 15px;
                                width: 100%;
                                height: 500px;
                                object-fit: contain;
                            }

 .copy{
    font-size: 30%;
    left: 1%;
   
    bottom: 1%;
  }

  @media (max-width: 900px){


                  


                      
                         
               
                     
                            
                            
                     
                     .home{
                             font-size: 18px;
                             font-weight: 500;
                             opacity: 0.5;
                         }
                         
                         
                         
                        
                         .studiophoto{
                             font-size: 14px;
                         }
                         .studiophoto:hover{
                             font-size: 15px;
                             text-decoration: underline;
                                 opacity: 0.5;
                             transition: 0.5s;
                             }
                             .studiophoto:active{
                                 opacity: 1;
                                 transition: 0s;
                             } 
                         
                         
                         
                     
                      
                         
                         
                       
                             .outdoorphoto{
                             font-size: 14px;
                         }
                         .outdoorphoto:hover{
                             font-size: 15px;
                             text-decoration: underline;
                                 opacity: 0.5;
                             transition: 0.5s;
                             }
                             .outdoorphoto:active{
                                 opacity: 1;
                                 transition: 0s;
                             } 

                          

                             .video{
                                font-size: 14px;
                            }
                            .video:hover{
                                font-size: 15px;
                                text-decoration: underline;
                                    opacity: 0.5;
                                transition: 0.5s;
                                }
                                .video:active{
                                    opacity: 1;
                                    transition: 0s;
                                } 


  }

  @media (max-width: 600px)
  {




   
                          
                      
                   
                        
                         
                         
                         .home{
                                 font-size: 14px;
                                 font-weight: 500;
                                 opacity: 0.5;
                             }
                             
                             
                             
                            
                             .studiophoto{
                                 font-size: 12px;
                             }
                             .studiophoto:hover{
                                 font-size: 13px;
                                 text-decoration: underline;
                                     opacity: 0.5;
                                 transition: 0.5s;
                                 }
                                 .studiophoto:active{
                                     opacity: 1;
                                     transition: 0s;
                                 } 
                             
                             
                             
                    
                             
                           
                                 .outdoorphoto{
                                 font-size: 12px;
                             }
                             .outdoorphoto:hover{
                                 font-size: 13px;
                                 text-decoration: underline;
                                     opacity: 0.5;
                                 transition: 0.5s;
                                 }
                                 .outdoorphoto:active{
                                     opacity: 1;
                                     transition: 0s;
                                 } 
    
    
                               
    
                                 .video{
                                    font-size: 12px;
                                }
                                .video:hover{
                                    font-size: 13px;
                                    text-decoration: underline;
                                        opacity: 0.5;
                                    transition: 0.5s;
                                    }
                                    .video:active{
                                        opacity: 1;
                                        transition: 0s;
                                    } 
  }