@font-face {
    font-family: 'SF Distant Galaxy';
    src: local('SF Distant Galaxy'), url(fonts/SF\ Distant\ Galaxy.ttf), format('ttf');
  }
#model {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.8s ease; /* Smooth movement */
}

#model.move-right {
  transform: translate(-30%, -50%); /* Move model to the right side */
}
 
  #about-window {
    font-family: 'Poppins', sans-serif;
    color: #333333; /* Text color */
    background-color: #f5fffc85;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.6s ease, left 0.6s ease;
    height: 60%;
    width: 40%;
    overflow-y: auto;
    display: grid;
  
}
.about-paragraph{
  display: block; /* Stack them vertically */
  max-width: 80%;
  max-height: 50%;
  font-size: 1.4vw; /* Responsive font size */
   margin-bottom: 20px; /* Add bottom margin for spacing to next element */
}

.resume,
.linkedin,
.email,
.about
 {
  margin-top: 20px;
    font-weight: bold;
    display: block; /* Stack them vertically */
    margin-bottom: 10px; /* Add space between items */
    font-size: 1.2vw;
   
}
.resume,
.linkedin,
.email,
.about-paragraph
 {
  grid-template-columns: repeat(1, 1fr);
  gap:10px;
   
}
.linkedin:hover,
.email:hover,
.resume:hover {
    cursor: pointer;
    text-decoration: underline;
}

#about-window.show {
  left: 30%; /* Final position */
  transform: translate(-50%, -50%); /* Center horizontally */
}

#about-window.hide {
  left: 30%; /* Final position */
  transform: translate(-50%, -50%); /* Center horizontally */
}
  
  .name,
button {
  transform: translateY(-2);
  opacity: 1;
  transition: transform 0.5s, opacity 0.5s; /* Smooth transition when applied */
}
 
.subtext:hover {
  text-decoration: underline;
  cursor: pointer; /* Optional: changes cursor to pointer */
}

#close-about {
 
  background-color: #333333; /* Red background */
  color: white; /* White text */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Add padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 1em; /* Font size */
  cursor: pointer; /* Change cursor to pointer */
  transition: background-color 0.3s; /* Smooth transition for background color */
  position: fixed; /* Fixes the button to the viewport */
  bottom: 20px; /* Distance from the bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for the width of the button */
  z-index: 3; /* Ensure it appears above other elements */
}





#close-about:hover {
  background-color: #ff1a1a; /* Darker red on hover */
}