body {
    font-family: "Roboto Serif";
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #f8f8f8;
}



.resume-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;   
}

h3 {
    color: #0056b3;

    padding-bottom: 5px;
    margin-top: 25px;
}


a {
    color: blue;
}

a {

  padding-bottom: 10px;
}

 a:hover {
      color:rgb(217, 50, 50);
 }

hr {
  height: 3px; 
  background-color: rgb(15, 151, 15); 
  border: none; 
}

a {
    text-decoration: none;
}

.expandable {
    --xy-padding: 14px;
    --border-radius: 6px;
    max-width: 800 px;
    margin: 1em 0;
      font-family: "Roboto Serif";
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #f8f8f8;
    --transition-ms: 0.3s;
}

.expandable__icon {
    transition: transform var(0.3s);
}

.expandable--open .expandable__content-wrapper {
grid-template-rows: 1fr;
}

.expandable--open .expandable__icon {
    transform: rotate(-90deg);

}


.expandable__title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--xy-padding);
    user-select: none;
    background-color: #0056b3;
    font-family: "Roboto Serif";
    font-weight: bold;
    color: white;
    cursor: pointer;
}




.expandable__content {
    padding: 0 var(--xy-padding);
    font-family: "Roboto Serif";
    line-height: 1.6;
    font-size: 1em;
    border: 1px solid #0056b3;
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
}


.expandable__content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}