styles.css

body {
  font-family: "Open Sans", sans-serif;
  color: #0E0903;
}

.negro {
    color: #0E0903;
}
.fondo-negro {
    background-color: #0E0903;
}

.rojo {
    color: #FF1053;
}
.fondo-rojo {
    background-color: #FF1053;
}

.borde-rojo {
    border: 2px solid #FF1053;
}

.celeste {
    color: #7AE7C7;
}
.fondo-celeste {
    background-color: #7AE7C7;
}

.violeta {
    color: #700353;
}
.fondo-violeta {
    background-color: #700353;
}

.amarillo {
    color: #F2FF49;
}
.fondo-amarillo {
    background-color: #F2FF49;
}

.naranja {
    color: #FFBB00;
}
.fondo-naranja {
    background-color: #ff7b00;
}

.verde {
    color: #00FF8C;
}
.fondo-verde {
    background-color: #00FF8C;
}

.azul {
    color: #0011ff;
}
.fondo-azul {
    background-color: #0011ff;
}

.rosa {
    color: #F79AD3;
}
.fondo-rosa {
    background-color: #F79AD3;
}

.underline {
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.underline::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    background-color: #2f7efc;
    transform-origin: bottom center;
    transform: scaleY(0.1);
    transition: all 0.1s ease-in-out;
}

.underline:hover::before {
    transform: scaleY(1);
    background-color: #2f7efc80;
}

.content {
    display: none;
}

#content1 {
    display: block;
}

.nav-link {
    color: #0E0903;
    font-weight: bold;
}

.panel {
    background: rgba( 255, 255, 255, 0.1 );    
    backdrop-filter: blur( 2px );
    -webkit-backdrop-filter: blur( 2px );
    border-radius: 10px;
    
}

h2.item {    
    transition: .25s ease;   
}
h2.item:hover {
    margin: 1.1rem;
    transition: .25s ease;   
}