/* Custom Styles */
.quicksand {
    font-family: 'Quicksand', sans-serif;
    color: #fff;
  }

.eb-garamond {
    font-family: "EB Garamond", serif;
    color: #fff;
  }

.nav-item:hover a {
    opacity: 80%;
    transition: opacity .25s;
}

[class*="rounded-pill"] {
  background-color: teal;
}

li [class*="pill-alt"] {
  background-color: white;
}

.profile-pic {
  width: 100%;
  border: 1px solid white; /* Add a 1px black border */
  border-radius: 50%; /* Make it circular */
  float: left; /* Float the image to the left */
  margin-right: 20px; /* Add some space between the image and text */
  margin-bottom: 10px; /* Add some space below the image */
}

#toTop {
  display: flex; /* Hidden by default */
  position: absolute; /* Fixed/sticky position */
  transform: translateY(-250%) translateX(20%);
  z-index: 99; /* Make sure it does not overlap */
  border: 1px solid white; /* Add a 1px border */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  border-radius: 50%; /* Make it circular */
  font-size: 18px; /* Increase font size */
  width: 50px; /* Set width */
  height: 50px; /* Set height */
  line-height: 50px; /* Center the arrow vertically */
  text-align: center; /* Center the arrow horizontally */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  opacity: 0.75;
}

#toTop:hover {
  background-color: black !important; /* Add a dark-grey background on hover */
  transition: background-color 0.15s;
  opacity: 1;
}

.hl {
  position: relative; /* Required for positioning the pseudo-element */
  display: inline; /* Ensure it works inline with text */
}

.hl::after {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position relative to the parent */
  left: 0; /* Align to the left */
  bottom: 0; /* Position at the bottom of the text */
  width: 100%; /* Span the full width of the text */
  height: 10px; /* Height of the pill highlight */
  z-index: -1;
  background: teal; /* Color of the highlight */
  border-radius: 5px; /* Pill shape */
}

.icon {
  height: 1.25rem;
  filter: invert(1);
  text-decoration: none;
}