@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* .montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/

	@font-face {
    font-family: 'naomi_handwriting_1regular';
    src: url('../fontKit/naomihandwriting1-regular-webfont.woff2') format('woff2'),
         url('../fontKit/naomihandwriting1-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



*{
margin:0;
padding:0;
box-sizing: border-box;
font-size: 100%;



}


a{
	
 color: #000;
 text-decoration: none;
}

a:hover{
	color:#ffc455;;
}

a:active{
	color:#ffc455;
}

body{
font-family: 'Arial, Helvetica, sans-serif';
display: flex;

min-height: 100vh;

}

#wrapper{
display:flex;
margin: 0 auto;
flex: 1;






}

.sidebar{
width: 300px;
height:100vh;
background-color: #fff;
position:fixed;
top:0;
left:0;


display:flex;
flex-direction: column;



}

.logo{
width:150px;
height:150px;
margin:100px auto 10px auto ;


}

.logo img{
	width:100%;
	height:auto;
	display:block;
		
}


.menuBut{
	width:auto;
	margin-top: 10px;
	font-size: 24px;
	height: auto;

	float: right;
	font-family: 'naomi_handwriting_1regular';
	display: none;
}


.menuBut:hover{
	
	 color:#ffc455;
}


h1,h2,h3{
    width:100%;
    height:auto;
    
    text-align: center;
    padding: 1%;
    margin: 5px 0;
    font-family: 'naomi_handwriting_1regular';
}

h1{
    font-size:37px;


}

h2{
    
    font-size:24px;
    

}

h3{
	
	font-size:40px;
	margin-top: 30px;
}

h1.wrap {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    text-wrap: wrap;
}


article h1, article h2, article h3{
	text-align: left;
}

article p{
		
	font-family: "Montserrat", sans-serif;
    font-size: 20px;
		
		
	}
	

nav{
width: 100%;
height: auto;
display:flex;
flex-direction: column;



}

nav ul{
    width: 100%;
    height: auto;
    display:flex;
    flex-direction: column;
    
    
    
    }


    nav ul li{
        width: 100%;
        height: 50px;
        
       text-align: center;
        display: block;
        
       
        
        
        
    }
    nav ul li a{
        width: 100%;
        height: inherit;
        padding:20px ;
        display: block;
        color:#000;
        text-decoration: none;
        font-size:20px;
        font-family: 'naomi_handwriting_1regular';
        
        
        
        
    }

   

    nav ul li a:hover{
        
        color:#ffc455;
        
    }

main {
    width:100%;
    height:100vh;
    padding-left: 310px;


}


 #home{


background-image: url(../images/testimage.jpg);
background-position: center;
background-repeat: no repeat;
background-size: cover;
    }

#portfolio{
  width:100%;

    
}

section{
	
	width: 100%;
	height: 90vh;
	margin: 95px auto;
}

    /*image css*/

    img{

width:100%;
height:auto;
color:rgb(0,0,0,0);
    }



/* Flex grid styles */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Flex item styles */
.flex-item {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    padding: 0;
    
}

/* Image inside flex item styles */
.flex-item img {
    width: 100%;
    height: auto;
}

#portfolio .flex-item img:hover{
    width: 99%;
    height: auto;
	filter: grayscale(50);
}

@media screen and (max-width: 768px) {
    .flex-item {
        flex: 0 0 calc(50% - 20px);
        margin: 5px; /* Adjust the margin size as needed */
    }





/* Media Query for Mobile Devices */
@media only screen and (max-width: 600px) {
	
	main{
		margin-top: 140px;
		padding: 0 0 0 0;
	}
	
    .sidebar {
        width: 100%;
        height: 100px;
        background-color: #fff;
        border-right: none;
        text-align: center;

    }
    .logo {
        width: 150px;
        height: 150px;
        margin: 5px; 
      display:none;
    }
    
    h1.wrap {
    width: 100%;
    
}


    h1, h2 {
        text-align: center;
    }

	
	
	
	
	
	.menuBut{
	width:auto;
	margin-top: 10px;
	font-size: 24px;
	height: auto;

	float: right;
	font-family: 'naomi_handwriting_1regular';
	display: block;
}
	
	
	
    nav {
        display: none; /* Hide the navigation by default */
        position: absolute;
        top: 130px;

        right: 0px;
        padding: 10px;
		color: #000;
        background-color: #ffc455;
    }

    nav.visible {
        display: block; /* Show the navigation when it's visible */
    }

    nav ul {
        display: block;
    }

    nav ul li {
        display: block;
        border-bottom: none;
    }

    nav ul li a {
        display: block;
        padding: 10px;
        color: #000000;
    }

    nav ul li a:hover {
    
        color: #FFFFFF;
    }
}



/* Media query for phone sizes */
@media screen and (max-width: 480px) {
    /* Adjust width for .flex-item */
    .flex-grid {
        flex-direction: column; /* Stack items vertically */
		display: grid;
    }

    .flex-item {
        width: 95%; /* Adjust the width as needed */
        margin: 2.5%; /* Adjust the margin size as needed */
    }
}

}