body {
    background-color: #85a290;
    
    
}
 main {
   margin-left: 20px;
   margin-right: 20px;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  list-style-type: none;
  background-color: #85a290;
  margin-bottom: 0px;
  border-radius: 0px;
  
  
  
}


.navbar ul{
 list-style-type: none;
 background-color: rgb(78, 73, 73);
 padding: 0px;
 margin: 0px;
 border-radius: 0px;
 overflow: hidden;
 margin-top: 0px;

}

a {
 color: white;
 text-decoration: none;
 padding: 15px;
 display: block;
 text-align: center;
 margin-left: 150px;
}
.navbar a:hover {
  background-color: #85a290;
  border-radius: 70px;
  cursor: pointer;
  color: #3e2b2c;
  box-shadow: 0 0 18px rgba(9, 9, 9, 0.5);
  transform: perspective(10deg);
  transition: all 2s ease

  

}
.navbar li{
  float: left;
  font-size: 25px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  margin-left: 0px;
  margin-top: 10px;
}
.logowebsite{
  width: 100px;
  height: 100px;
  margin-right: 20px;
  float: right;
  border-radius: 50%;
  animation-name:logoSpin; /* Animation name defined with @keyframes */
  animation-duration: 4s; /* Animation duration */
  animation-timing-function: ease; /* Timing function */
  animation-iteration-count: infinite; /* Run the animation infinitely */
}
@keyframes logoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }

.logowebsite:hover{
  opacity: 0.8;
  transform:rotate(360deg);
  transition: transform 2s ease;
  background: radial-gradient(circle, green, #3e2b2c);
  animation-play-state: paused;


}
.contact-container{
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    margin-left: 105px;
    margin-right: 150px;
    margin-top: 200px;

}
.contact-content{
    display: block;
    font-size: 200%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: oblique;
    margin-right: 90px; /* Add some spacing between text and photo */
    letter-spacing:normal;
    margin-bottom: 40px;

}
.text{
    background: linear-gradient(90deg, black, rgb(7, 44, 7));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
    animation: moveAndChange 7s linear infinite;

}
@keyframes moveAndChange {
    30% {
        background-position: -100%;
        color: rgb(42, 68, 68);
    }
    20% {
        background-position: 100%;
        color: darkorange;
    }
    20% {
        color: rgb(5, 42, 5);
    }
    100% {
        background-position: -100%;
        color: black;
    }
}
.text:hover{
    background-color: #c8c8c8;
    font-size: 33px;


}
.githublogo{
    width: 50px;
    height:50px;
    margin-right: 400px;
    animation-name:logoSpin; /* Animation name defined with @keyframes */
    animation-duration: 7s; /* Animation duration */
    animation-timing-function: ease; /* Timing function */
    animation-iteration-count: infinite; /* Run the animation infinitely */
    margin-left: 228px;
  
}

@keyframes logoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.githublogo:hover{
    animation-play-state: paused; /* Pause the animation on hover */
    width: 65px;
    height: 65px;
    border-radius: 40%;
    box-shadow: 5px 5px 10px rgba(0,0,0, 0.30);
    transition: box-shadow 1s;
}

    

a.githublink{
    display: inline-block;
    width: 50px; /* Adjust the width to match your logo's width */
    height: 50px; /* Adjust the height to match your logo's height */
    margin-right: 400px;
}


.githublogo:hover {
    animation-play-state: paused;
}




.xlogo{
    width: 55px;
    height:55px;
    margin-right: 400px;
    margin-left: 226px;
    margin-bottom: 0px;
}
a.xlogolink{
    display: inline-block;
    width: 50px; /* Adjust the width to match your logo's width */
    height: 50px; /* Adjust the height to match your logo's height */
    margin-right: 400px;
}
 
.xlogo:hover{
    width: 73px;
    height: 73px;
    border-radius:50% ;
    box-shadow: 5px 5px 10px rgba(0,0,0, 0.30);
    transition: box-shadow 1s;
}
.linkedinlogo{
    width: 60px;
    height:60px;
    margin-right: 400px;
    margin-left: 226px;
    margin-bottom: 5px;
}
a.linkedinlogolink{
    display: inline-block;
    width: 50px; /* Adjust the width to match your logo's width */
    height: 50px; /* Adjust the height to match your logo's height */
    margin-right: 400px;
}
.linkedinlogo:hover{
    width:79px;
    height:79px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0,0,0, 0.30);
    transition: box-shadow 1s;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3e2b2c;
    color: white;
    text-align: center;
    padding: 10px;
    margin-bottom: 0;
    text-align: left;
  }

  .footer p,
  .footer a {
      display: inline;
      margin: 0 10px; /* Add spacing between the text and the link */
      
  }
  
  .footer a:hover{
    color:  #0072b1 ;
    text-decoration:overline;
  }
  
 /* Styles for small screens (e.g., smartphones) */
  @media screen and (max-width: 768px) {
    /* Add your responsive styles here */
    body { background-color: #85a290;
    overflow: hidden;
    overflow-x: auto;
    
    
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 394vh; /* 100% of the viewport height */
   
    }
    main {
        margin-left: 20px;
        margin-right: 20px;
    }
    .navbar{
        margin: 0;
    }
    .navbar ul {
        padding: 0;
        margin: 0;
        padding-top: 33px;
        padding-bottom: 4px;
        padding-left: 12px;
    }
    a {
        display: block;
        text-align: center;
        padding: 14px;
        margin-left: 0;
        font-size: 14.5px;
        margin-bottom: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        
      }
    .navbar li {
          
          
        text-align: center;
        margin-bottom: 0px;
        margin-left: -5px;
        margin-right: 10px;
        padding-left: 0px;
        padding-bottom: -10px;
        margin-top: -10px;
        
    }
    .logowebsite {
        width: 51px;
        height: 51px;
        margin-right: 15px; /* Adjust as needed */
        margin-left: auto; /* Align to the right */
        border-radius: 50%;
        margin-bottom: 0px;
        margin-top: -25px;
        padding-top: 0px;
      }


    .contact-container {
        display: flex;
        max-width: auto;
        flex-direction: column; /* Stack child elements vertically */
        align-items: center; /* Center horizontally */
        padding: 0px; /* Add padding for better spacing */
        margin-left: 90px;
        margin-top: 160px;
        line-height: 55%;
        font-size: 150%;
    }

    .contact-content {
       
        text-align: center; /* Center text within the container */
        margin-bottom: 0px; /* Add spacing between text and logos */
        margin-left: 80px;
    }

    .text {
       max-width: fit-content;
       font-size: 33%;
       margin-left: 126px;
       
      
    }
    


    
    .githublink,
    .xlogolink,
    .linkedinlogolink {
        display: block; /* Change to block for better responsiveness */
        width: 100%; /* Adjust the width to fill the container */
        height: auto; /* Maintain aspect ratio */
        margin: 0px; /* Add spacing between logo links */
        margin-right: 80px; /* Adjust margin-left for better spacing on small screens */

        /* Set initial styles for non-hover state */
        
        
    }

   
   

    .githublogo,
    .xlogo,
    .linkedinlogo {
        width: 35px; /* Make logos fill the container width */
        height: 35px; /* Maintain aspect ratio */
        margin-left: 150px;
        margin-top: 25px;
       
    }
    .githublogo{
        animation-name:logoSpin; /* Animation name defined with @keyframes */
        animation-duration: 7s; /* Animation duration */
        animation-timing-function: ease; /* Timing function */
        animation-iteration-count: infinite; /* Run the animation infinitely */


    }

    .xlogo:hover{
        width: 35px;
        height: 35px;
        background: none;
        transition: none;
        box-shadow: none;
    }
    .githublogo:hover{
        width: 35px;
        height: 35px;
        background: none;
        transition: none;
        box-shadow: none;
    }
        
    .linkedinlogo:hover{
        width: 35px;
        height: 35px;
        background: none;
        transition: none;
        box-shadow: none;



    }
    
    






  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3e2b2c;
    font-size: 1px;
    color: white;
    text-align: center;
    padding: 7px;
    margin-bottom: 0px;
    text-align: left;
  }

  .footer p,
  .footer a {
      display: inline;
      margin: 0 10px; /* Add spacing between the text and the link */
      font-size: 15px;
      padding: 0px;
  }
  
 
  .footer a:hover{
    color:  #0072b1 ;
    text-decoration:overline;
  }
}