.location {
    float: right;}
    .May {float: right;}
    body { font-family:"Roboto Serif"; margin: 0; padding: 0; background: #e4dfdf; color: #333; }
    header { background: #050505; color: rgb(255, 255, 255); padding: 10px; text-align: center; }
    nav { background: #0c0c0c; text-align: center; padding: 10px; }
    nav a { color: rgb(255, 255, 255); margin: 0 15px; text-decoration: none; font-weight: bold; }
    section { max-width: 800px; margin: 20px auto; padding: 20px; background: rgb(255, 255, 255); border-radius: 5px; }
    h2 { border-bottom: 2px solid #000000; padding-bottom: 5px; text-align: center; }
    ul { padding-left: 20px; }
    .job-title { font-weight: bold; margin-top: 10px; }
    .location-date { font-style: italic; font-size: 0.9em; }
    h1 {font-family:"Hammersmith One", sans-serif; font-size: 40px}
    
    .edudetail {
    display: block;      
    margin-top: 6px;
    text-decoration: underline;     
  }
.grid1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
nav a {
  color: rgb(255, 255, 255);
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  position: relative; /* Add this for the animation */
  transition: color 0.2s ease;
}

nav a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background: #2078ff;
  transition: width 0.3s;
  position: absolute;
  bottom: -4px;
  left: 0;
}

nav a:hover::after {
  width: 100%;
}