stylelinks.css

@font-face {
  font-family: "Font";
  src: url("./JetBrains.ttf");
}

body {
  display: flex;
  color: #dcc6a0;
  background: #75604c; /* Keep original background color */
  font-family: Font;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden; /* Hide scrollbar during animations */
}

/* Overall container for layout */
.container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  max-width: 1200px;
  margin: 2em auto;
  padding: 2em;
  background: rgba(117, 96, 76, 0.8); /* Keep original background color */
  border-radius: 10px;
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.7); /* More intense shadow */
  opacity: 0; /* Initially hidden */
  animation: fadeIn 2s ease-out forwards; /* Faster fade-in */
}

/* Wrapper to position buttons below image */
.image-wrapper {
  display: flex;
  flex-direction: column; /* Stack image and buttons vertically */
  align-items: center; /* Center horizontally */
  margin-right: 3em;
  margin-top: 13em; 
}

/* Image container styling */
.image-container {
  perspective: 1000px; 
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Faster transitions */
}

.profile-image {
  height: 500px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow */
  opacity: 0; 
  animation: slideIn 1.5s ease-out forwards; /* Faster slide-in */
}

.image-container:hover {  /* Apply hover to the container */
  transform: translateY(-10px); /* Match lift with other elements */
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.8); /* More intense shadow */
}

nav {
  width: 100%; /* Occupy available space next to image */
}

h1 {
  font-size: 2.2em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5em;
  /* Glow Effect for Title */
  animation: glow 1s infinite alternate; /* Faster glow animation */
  text-shadow: 0 0 15px #dcc6a0; /* Larger initial glow */
}

/* Glow Effect for Title */
.glow-title { 
  animation: glow 1s infinite alternate; /* Faster glow animation */
}

@keyframes glow {
  from {
    text-shadow: 0 0 15px #dcc6a0; /* Larger glow */
  }
  to {
    text-shadow: 0 0 30px #dcc6a0; /* Larger glow */
  }
}

h2 {
  font-size: 1.2em;
  font-weight: 600;
  color: #997e65; /* Keep original color */
  text-align: center;
  margin-bottom: 2em;
  animation: fadeIn 1.2s ease-out forwards; /* Faster fade-in */
}

/* Grid for navigation sections */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
  grid-gap: 2em;
  opacity: 0; /* Initially hidden */
  animation: fadeInUp 1.8s ease-out forwards; /* Faster fade-in */
}

.nav-section {
  background: rgba(0, 0, 0, 0.1); /* Subtle section background */
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); /* Stronger initial shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Faster transitions */
}

.nav-section:hover {
  transform: translateY(-10px); /* Increased lift */
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.8); /* More intense shadow */
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  line-height: 1.4em;
  opacity: 0;
  animation: slideIn 0.8s ease-out forwards; /* Faster slide-in */
  transition: color 0.2s ease; /* Faster color transition */
}

li:nth-child(1) { animation-delay: 0.1s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.3s; }
li:nth-child(4) { animation-delay: 0.4s; }
li:nth-child(5) { animation-delay: 0.5s; }
li:nth-child(6) { animation-delay: 0.6s; }
li:nth-child(7) { animation-delay: 0.7s; }

li:first-child {
  display: block; 
  color: #978484; /* Keep original color */
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 1em; 
  opacity: 0;
  animation: fadeIn 1s ease-out forwards; /* Faster fade-in */
}

/* Remove default underline from all links */
a {
   text-decoration: none;
   color: #421919; /* Keep original color */
  font-size: 1.1em;
  transition: color 0.2s ease, transform 0.2s ease; 
  display: inline-block; 
  padding: 2px 0; 
}

/* Apply underline only on hover for links that are not buttons */
a:not(.curved-border):hover {
  color: #000000; /* Keep original color */
  font-style: italic;
  transform: translateY(-3px); /* Increased lift */
}

/* Animated Underline - triggered on hover */
a:not(.curved-border)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px; 
  background-color: #000000; /* Keep original color */
  transform-origin: left;
  transform: scaleX(0); /* Initially hide the line */
  transition: transform 0.3s ease; /* Smooth transition */
}

a:not(.curved-border):hover::before {
  transform: scaleX(1); /* Scale to full width on hover */
}

/* Buttons container */
.buttons {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  margin-top: 1em; /* Space above buttons */
  text-align: center; /* Center the buttons */
}

.curved-border {
  border-radius: 2em;
  padding: .3em 1em; /* Smaller padding */
  background-color: transparent;
  color: #dcc6a0;
  text-decoration: none;
  border: 1px solid rgb(146, 82, 82);
  white-space: nowrap;
  font-size: 0.9em; /* Smaller font size */
  margin-bottom: 0.5em; /* Spacing between buttons */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5); /* Stronger initial shadow */
  opacity: 0; /* Initially hidden */
  animation: fadeIn 1.2s ease-out forwards; /* Faster fade-in */
  transition: transform 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease; /* Smoother transitions */
}

.curved-border span { /* Target the text within the button */
  margin-right: 0.5em; /* Spacing between text and arrow */
}

.curved-border:hover {
  transform: translateY(-5px) scale(1.05); /* Less dramatic pop-out */
  box-shadow: 0px 20px 45px rgba(0, 0, 0, 0.8); /* Larger, more intense shadow */
  text-shadow: 0 0 10px #dcc6a0, 0 0 20px #dcc6a0; /* Strong glow effect */
}

/* Animations */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideIn {
  0% { transform: translateX(-30px); opacity: 0; } /* Increased initial translate */
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); } /* Increased initial translate */
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes buttonPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }  /* Increased scale */
}