html, body {
    margin: 20px;
    font-family: 'Helvetica';
    background: #200101;
    color: #b8abab;
    font-size: 15px;
    line-height: 2;
}

.nav {
    order: 2;
    width: 100%;
    margin: 0;
    background-color: none;
    position: sticky;
    display:grid;
}

.nav li {
    display: inline-block;
}

nav {
    grid-template-columns: 33% 33% 33%;
}

.welcome {
    grid-column: 1;
    margin: auto;
}

.list {
    grid-column: 3;
}

a:link, :visited {
    color:#727280;
    background-color: none;
    text-decoration: none;
}

a:hover {
    color:#bbbae2;
    background-color: none;
    text-decoration: none;
}

main {
    margin: 30px;
    padding: 5px;
    display: grid;
    text-align: left;
    grid-template-columns: 25% 75%
}

.bellj {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.rite {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.bellj:hover) ~ .rite {
    opacity: 1;
    transition: opacity 0.3s;
  } 

.aco {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.acoS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.aco:hover) ~ .acoS {
    opacity: 1;
    transition: opacity 0.3s;
  }

.mem {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.memS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.mem:hover) ~ .memS {
    opacity: 1;
    transition: opacity 0.3s;
  }

.ani {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.aniS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.ani:hover) ~ .aniS {
    opacity: 1;
    transition: opacity 0.3s;
  }
  
 .ann {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.annS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.ann:hover) ~ .annS {
    opacity: 1;
    transition: opacity 0.2s;
  }

.nau {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.nauS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.nau:hover) ~ .nauS {
    opacity: 1;
    transition: opacity 0.2s;
  }
  
.lie {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.lieS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.lie:hover) ~ .lieS {
    opacity: 1;
    transition: opacity 0.2s;
  }

.gat {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.gatS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.gat:hover) ~ .gatS {
    opacity: 1;
    transition: opacity 0.2s;
  }

.far {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.farS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.far:hover) ~ .farS {
    opacity: 1;
    transition: opacity 0.2s;
  }

.cat {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.catS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.cat:hover) ~ .catS {
    opacity: 1;
    transition: opacity 0.2s;
  }
  
.cri {
    color:#bbbae2;
    cursor: pointer;
    list-style: none;
    grid-column: 1;
  } 

.criS {
    opacity: 0;
    padding: 10px;
    grid-row: 1;
    grid-column: 2;
    transition: opacity 0.3s;
  }

  div:has(.cri:hover) ~ .criS {
    opacity: 1;
    transition: opacity 0.2s;
  }

.back {
    margin: auto;
    justify-content: center;
}