@import url('https://fonts.googleapis.com/css2?family=Syne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

body{
    background-color: black;
    color:white;
    font-family: 'Syne', sans-serif;
}

nav{
/* background-color:#fff; */
border:none;
border-radius: 15px;
width:100%;


}

#navbar {
    position: fixed;
    top: 0;
    z-index: 1000; 
}

ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    justify-content: end;
    margin:0px;
    padding: 0px;
   
    
}

li {
    background-color: #fff;
    display: inline;
    margin-right: 0px;
    padding: 15px;
    font-family: Arial;
    width:100px;
    font-size: 15px;
   
    }

    

li a {
    background-color: white;
    color: black; /* Change the text color as per your preference */
    border-radius: 10px;
    padding: 10px 20px;
    text-decoration: none; 
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5); /* Add box shadow */
}

li a:hover{
    color:thistle
}


a:hover{
    color:white;
}

p a{
    color: aqua;
}

span {
    margin-left: 8px; /* Adjust this value to control the spacing */
}

.dropbtn{
    position:relative;
   
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 125px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    z-index:2;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 0%;
    display: block;
  }

  .dropdown-content a:hover{
    color: thistle;
}
  
  .show {display:block;}

#about-section{
    margin-top: 70px;
}

img{
    width: 250px;
    transition: transform 0.3s ease-in-out;
    border-radius: 30px;
    

}
.images{
    display:flex;
    justify-content: space-between;  
  
}
.project{
    text-align:center;
    margin: 0px;
    position: relative;
    overflow: hidden;
}

.project:hover img {
    transform: scale(1.10);

   
}
#project-title{
    font-size:26px;
    font-family: 'DM Serif Display', serif;
 
}
.projects #project-title{
    margin: 0%;
}
footer {
    display: grid;
    place-content: center;
    height: 100%;
    margin-top: 20px;

   
}

.socials {
    text-align: start;

 

}

.socials p {
    margin-top:40px; 
    font-size: 20px;
}

.socials button {
    font-size: 12px;
    font-family: 'DM Serif Display', serif;
    padding: 8px 16px;
    margin-right:20px;
}

.socials button:hover{
    color:#357048;
    border-radius: 10px;
    box-shadow: none;
}
.socials button{
    background-color: #000;
    border:0.2px solid #357048;
    border-radius: 10px;
    color:#fff;
  
}


figure {
    width: 360px;
    height: 350px;
    position: relative;
   
}

figure img {
    width: 80%;
    height: 80%;
    border-radius: 180px;
    
}
figure img:hover{
    transform: scale(1.25);
    
}


#myphotocontainer{
    display: none;
}


@media screen and (max-width:768px){
    body{
        background-color: red;
    }
    .images{
       
        display: block;
    }
       
    .project{
        text-align:justify;
       
    }
    ul{
        justify-content: start;
        margin: 0px;
        padding: 0px;
    }
    #project-title{
        font-size: 24px;
      
    }
    .projects #project-title{
        margin: 0%;
    }

    footer {
        display:flex;
        margin: 0 auto;
        height: 100%;
    }
    
    .socials button {
   
    font-size: 12px; 
    font-family: 'DM Serif Display', serif;
    padding: 8px 16px;
    
    }


    
figure{
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  
   
}


.socials button{
    box-shadow: none;
    background-color: #000;
    border:none;
    border-radius: 10px;
    color:#fff;
    
}
.socials button:hover{
    box-shadow: none;
    color:rgba(121, 85, 171);
    border:none;
    border-radius: 10px;
    

}
ul{
    list-style: none;
    display: flex;
    justify-content: center;
    margin:0px auto;
    padding: 0px;
   
    
}


}

@media screen and (min-width: 769px) {
   /* Apply styles only when "About" button is clicked */
.about-clicked .figure {
    position: absolute;
    
}

.about-clicked .socials {
    margin-top: 100px;
   
}

.about-clicked footer {
    display: float;
    justify-content: space-evenly;
    align-items: none;
    height: 100%;
    
}

.about-clicked .chaotic-about {
    display: flex;
    position: relative;
}





}