.navbar {
    align-items: center;
    background-color: #edf7fdf2;
    display: flex;
    height: 80px;
    position: fixed;
    top: 0;
    z-index: 7;
    animation: navbar-load 1s ease 150ms backwards;    
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    justify-content: space-between;
  }
  
  
  .logo {
    height: 44px;
    width: 192px;  
  }
  
  .navbar-links {
    position: relative;
    align-items: flex-start;
    display: flex;
    justify-content: space-between;    
    width: 20vw;
    min-width: 200px;
    max-width: 300px;
    margin-left: 15%;
  }
  
  .navbar-links div {
    letter-spacing: 0; 
    opacity: 0.7;
    white-space: nowrap;
    font-weight: 400;             
  }
  
  
  .social-logos {
    display: flex;
    justify-content: space-between;
    width: 140px;    
  }
  
  .twitter-navbar {
    height: 26px;
  }
  
  .github-navbar {
    position: relative;
    height: 29px;    
    top: -2px;
  }
  
  .substack-navbar {
    position: relative;
    height: 26px;
  }
  

  .hover-underline-animation::after {
    content: ''; /* An empty content property, which is fine for this purpose */
    position: relative;
    display: block; /* Change to block to ensure dimensions work */
    bottom: -3px;
    height: 2px; /* Set the height to create the underline */
    left: -10%;
    /* width: 0;  */
    transform: scaleX(0); /* Start with a width of 0 */
    background-color: #555555; /* Background color for the underline */
    opacity: 0.7;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out; /* Transition the width property */    
  }

.hover-underline-animation:hover::after {
  border-radius: 10px;
  width: 120%; /* Expand the width to 100% on hover */
  transform: scaleX(1);
  transform-origin: bottom left;
  }