/* Background Color for the app */
/* Default style (Mobile First) */
body {
  background-color: #0a192f; /* blueish color */
}

/* only display on mobile */
.mobile-only {
  display: block;
}

/* Only display on desktop */
.desktop-only {
  display: none;
}




/* Navigation Bar */
.navigation-bar {
  position: absolute; /* Or use 'fixed' if you want it to stay in place during scrolling */
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation-bar ol {
  display: flex;
  list-style-type: decimal-leading-zero;
  color: #64ffda; /* tech green */
  margin: 0;
  padding: 0;
}

.navigation-bar li {
  margin: 20px;
  padding: 0;
}

.navigation-bar a {
  color: rgb(185, 190, 207); /* grayish color */
  padding: 0;
  text-decoration: none;
  display: block;
}

.navigation-bar a:hover {
  color: #64ffda; /* tech green */
}








/* Name-Title-Image-Container */
.name-title-image-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 17px;
}

.name-title-buttons-container{
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-bottom: 30px;
}

.name-title {
  color: white;
  text-align: center;
  margin-bottom: 0px;
}

.job-title {
  text-align: center;
  color: rgb(185,190,207); /* grayish color */
}

.social-media-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}



/* Social Media Buttons */
.github-button {
  font-size: 32px !important;
  color: #64ffda;
  text-decoration: none;
}







/* Profile Image */
.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-image {
  max-width: 300px; /* The image will resize to fit its container */
  height: auto;   /* Maintains aspect ratio */
  border-radius: 8px;
  margin: auto;
}






/* Navigation Title */
.navigation-title {
  margin-left: 30px;
  color: #64ffda; /* tech green */
  margin-top: 50px;
}





/* Project Stuff */
.project-container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  gap: 20px; /* Space between the image and the content */
  flex-wrap: wrap;
  background-color: #112240;
  padding: 20px;
  border-radius: 8px;
  margin-left: 10px;
  margin-bottom: 30px;
  margin-right: 10px;
}

.project-title-date {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}

.project-skills {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 1px;
  row-gap: 0px;
  column-gap: 5px;
}

.project-skills p {
  /*color: white; /* */
  color: #64ffda; /* Tech Green */
  padding: 5px 15px;
  border-radius: 6px;
  background-color: #95ffe410; /* Techie Green Background */
  /*background-color: #64ffdb12;/* */
  text-align: center;
}

.project-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-image {
  max-width: 250px;
  max-height: auto;
  border-radius: 8px;
  justify-content: center;
}

.project-title {
  color: white;
  margin: 0 0 10px 0;
}

.project-description {
  color: rgb(185,190,207); /* grayish color */
  /*margin: 0 0 20px 0;*/
}

.aboutme-description {
  color: rgb(185,190,207); /* grayish color */
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
}

.learnmore-container {
  display: flex;
  justify-content: space-between; /* Center the button horizontally */
  align-items: center; /* Center the button vertically if needed */
  gap: 20px;
}

.learn-more {
  background-color: #112240; /* blueish color */
  border: solid;
  border-color: #64ffda; /* tech green */
  color: #64ffda;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin-top: auto;
  cursor: pointer;
  border-radius: 8px;
  border-width: 1px;
  flex: 1; /* Allow buttons to grow and fill the container equally */
  /*max-width: 200px; /* Optional: Set a max-width to avoid too large buttons */
}






/* Footer */
.footer-text {
  color: #8892b0;
  padding-top: 200px;
  padding-bottom: 50px;
  text-align: center;
}





/* Get in touch stuff */
.contact-container {
  display: flex;
  justify-content: center; /* Center the button horizontally */
  align-items: center; /* Center the button vertically if needed */
}

.contact-title{
  margin-top: 30px;
  color: white;
  text-align: center;
}

.contact-description-title {
  text-align: center;
  color: rgb(185,190,207); /* grayish color */
  margin-bottom: 30px;
  margin-right: 40px;
  margin-left: 40px;
}

.say-hello {
  background-color: #112240; /* blueish color */
  border: solid;
  border-color: #64ffda; /* tech green */
  color: #64ffda;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin-top: auto;
  cursor: pointer;
  border-radius: 8px;
  border-width: 1px;
}



@keyframes jump {
  0% { transform: translateY(0); }   /* Start at the original position */
  50% { transform: translateY(-10px); } /* Move up by 10 pixels */
  100% { transform: translateY(0); } /* Move back to the original position */
}








/* Responsive Design */
/* Styles for larger devices (Tablets and up) */
@media (min-width: 1265px) {

  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }




  /* Navigation Bar */
  .navigation-bar {
    display: flex;
    justify-content: space-between;
    position: fixed; /* Or use 'fixed' if you want it to stay in place during scrolling */
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #0a192fdc;
    width: 100%;
  }

  .navigation-bar ol {
    display: flex;
    list-style-type: decimal-leading-zero;
    color: #64ffda; /* tech green */
    margin: 0;
    padding: 0;
  }

  .navigation-bar li {
    margin: 30px;
    padding: 0;
  }

  .navigation-bar a {
    color: rgb(185, 190, 207); /* grayish color */
    padding: 0;
    text-decoration: none;
    display: block;
  }

  .navigation-bar a:hover {
    color: #64ffda; /* tech green */
  }

  .logo-image img {
    display: flex;
    justify-content: flex-start;
    width: 100px;
    position: fixed;
    margin: 0px;
    padding: 0px;
  }




  /* Name-Title-Image-Container */
  .name-title-image-container {
    margin-top: 100px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    font-size: 30px;
  }

  .name-title-buttons-container{
    display: flex;
    flex-direction: column;
    margin: auto;
    color: white;
    text-align: center;
  }

  .job-title {
    text-align: center;
    color: rgb(185,190,207); /* grayish color */
  }







  /* Profile Image */
  .about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .profile-image {
    max-width: 300px; /* The image will resize to fit its container */
    height: auto;   /* Maintains aspect ratio */
    border-radius: 8px;
    margin: auto;
    /*margin-bottom: 20px;
    margin-top: 60px;*/
  }





  /* Jumping Button */
  .jumping-button {
    margin: 20px;
    transition: transform 0.2s ease-in-out;
  }

  .jumping-button:hover {
    animation: jump 0.4s ease-in-out; /* Applying the animation on hover */
  }

  .github-button {
    font-size: 55px !important;
    color:#64ffda;
    text-decoration: none;
  }

  .social-media-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }



  /* Container to set horizontal boundaries */
  .content-wrapper {
    max-width: 1200px; /* Set the maximum width for the content */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0 20px; /* Add padding to ensure content doesn't touch the boundaries */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
  }



  /* Project Stuff */
  .project-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Space between the image and the content */
    flex-wrap: wrap;
    background-color: #112240;
    padding: 20px;
    border-radius: 8px;
    margin-left: 70px;
    margin-bottom: 30px;
    margin-right: 70px;
  }

  .project-title-date {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .project-skills {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 5px;
    row-gap: 0px;
    column-gap: 5px;
  }

  .project-skills p {
    /*color: white; /* */
    color: #64ffda; /* Tech Green */
    padding: 5px 15px;
    border-radius: 6px;
    background-color: #95ffe410; /* Techie Green Background */
    /*background-color: #64ffdb12;/* */
    text-align: center;
  }

  .project-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
    
  .project-image {
    max-width: 250px;
    max-height: auto;
    border-radius: 8px;
    flex-grow: 2; 
    justify-content: center;
  }

  .project-title {
    color: white;
    margin: 0 0 10px 0;
  }

  .project-description {
    color: rgb(185,190,207); /* grayish color */
    /*margin: 0 0 20px 0;*/
  }
    
  .aboutme-description {
    color: rgb(185,190,207); /* grayish color */
    text-align: left;
    padding-left: 40px;
  }

  .learnmore-container {
    display: flex;
    justify-content: space-between; /* Center the button horizontally */
    align-items: center; /* Center the button vertically if needed */
    gap: 20px;
  }
    
  .learn-more {
    background-color: #112240; /* blueish color */
    border: solid;
    border-color: #64ffda; /* tech green */
    color: #64ffda;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin-top: auto;
    cursor: pointer;
    border-radius: 8px;
    border-width: 1px;
    flex: 1; /* Allow buttons to grow and fill the container equally */
    /*max-width: 200px; /* Optional: Set a max-width to avoid too large buttons */
  }

  .learn-more:hover {
    box-shadow: 4px 4px;
  }
}


/* Desktops and up 
@media (min-width: 1024px) {
  
}*/