.hidden{
  width:0px;
  height:0px;
  display:none;
}
.visible{
  width:100%;
  height:100%;
  display:block;
}
.nav{
  transform-style:preserve-3d;
  background:white;
  margin:0px;
  padding:0px;
  position:relative;
  border-bottom:solid 1px black;
}/*
.nav::before{
  content:"";
  position:absolute;
  inset:-2px;
  transform:translate3d(2px, 8px, -1px);
  background:conic-gradient(from 1080deg, #AB0520,  #0C234B);
  filter:blur(10px);
}*/

.container{
  display:flex;
  justify-content:center;
  align-items:stretch;
  align-content:stretch;
  gap:5px;
  height:80vh;
}

.navigate{
  flex:1;
  background:#322b4c;
  border-radius:10px;
  display:block;
}

.navigate > a{
  background:#322b4c;
  border-radius:10px;
  display:block;
  color:white;
  text-decoration:none;
  text-align:center;
  height:100%
}
.content{
  flex:18;
  height:80vh;
}
.header{
  height:5vh;
}

body{
  height:95vh;
}
.grid{
  height:80vh;
}

details > div{
  display:block;
  overflow-y:scroll;
  height:70vh;

}