body, h1, p {
  margin: 0;
  padding-top: 25px;
  box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: #8a8a8a;
  color: #2f2f2f;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers children horizontally */
  padding-left: 250px; /* Offset for sidebar width */
  text-align: center; /* Centers text inside the container */
}

h1, p {
  width: 100%; /* Ensures text alignment takes effect */
  margin: 5px auto;
}

/* Style for the image */
.logo-img {
  width: 100%; /* Adjust based on your layout, could be a fixed width like 300px */
  max-width: 400px; /* Optional: limits the size if the image is large */
  display: block; /* Makes the image block level, helps with centering */
  margin: 10px auto; /* Centers the image horizontally and adds vertical spacing */
  box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Horizontal offset, vertical offset, blur radius, color */
  border-radius: 10px; /* Optional: rounds the corners of the image */
}

.bio-img {
  width: 100%; /* Adjust based on your layout, could be a fixed width like 300px */
  max-width: 800px; /* Optional: limits the size if the image is large */
  display: block; /* Makes the image block level, helps with centering */
  margin: 10px auto; /* Centers the image horizontally and adds vertical spacing */
  box-shadow: 0 8px 16px rgba(0,0,0,0.5); /* Horizontal offset, vertical offset, blur radius, color */
  border-radius: 10px; /* Optional: rounds the corners of the image */
}

/* Style the sidebar */
.sidebar {
  height: 100vh; /* Full height of the viewport */
  width: 100px; /* Sidebar width */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  left: 0;
  top: 0;
  background-color: #656565; /* Sidebar background color */
  padding-top: 20px; /* Top padding */
  z-index: 2; /* Ensure the sidebar is on top of other content */
}

/* Sidebar links */
.sidebar a {
  padding: 5px 7px;
  text-decoration: none;
  font-size: 18px;
  color: rgb(21, 21, 21);
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  background-color: #00000025; /* Add a hover effect */
}

/* Dropdown button */
.dropbtn {
  background-color: #2e2e2e00; /* Dropdown button color */
  color: rgb(255, 166, 0);
  padding: 10px;
  border: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed; /* Fixed position to stay in place when scrolling */
  background-color: #1e1e1e50;
  min-width: 250px; /* Match the width of the sidebar */
  box-shadow: 0px 8px 16px 0px rgba(20, 20, 20, 0.3);
  left: 20px;
  padding: 12px 16px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(255, 115, 0);
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

/* Add rotation animations */
.rotate-forward {
  animation: rotateForward 0.5s ease-in-out forwards;
}

.rotate-back {
  animation: rotateBack 0.5s ease-in-out forwards;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.fade-out {
  animation: fadeOut 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes rotateForward {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(135deg);
  }
}

@keyframes rotateBack {
  from {
      transform: rotate(135deg);
  }
  to {
      transform: rotate(0deg);
  }
}

/* Fade-in effect for dropdown */
.fade-in {
  opacity: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ffa20057;}

/* Show the dropdown menu on click */
.show {display: block;}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ffa20057;}