body {
  scroll="no";
  overflow: hidden;
  background-color: #1a3240;
  /* background-color: #19424E; */
  border-radius: 3px;
  font-family: sans-serif;
}
input, button {
    border: none;
    color: #eae090;
}
.datatypes {
    display: flex;
    flex-direction: column;
    padding: 1em;
    width: 86vw;
    height: 90vh;
    text-align: right;
    position: absolute;
    top: 10vh;
    color: #6a9294;
}
.datatypes div {
    padding: .2em;
}

.datatypes div:hover {
    color: #ddd;
    font-size: 1.05em;
}
.vis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.ld {
    position: absolute;
    top: 65vh;
    left: 0;
    width: 100vw;
    height: 33vh;
    z-index: 25;
    color: #a99;
    overflow-y: scroll;
}

.ld > div {
    padding: .5em;
    padding-bottom: 0em;
}
.wsearch {
    position: absolute;
    top: 2vh;
    left: 66vw;
    width: 30vw;
    height: 3vh;
    z-index: 25;
}
.wsearch > input {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1a3240cc, #acac);
}
.wsearch > input:hover {
    transition: ease-in-out .3s;
    width: 105%;
    height: 102%;
}
.menu {
    position: absolute;
    z-index: 50;
    top: 2vh;
    left: 2vh;
    width: 5vw;
    height: 5vw;
    background: #cccc;
    scroll: auto;
    border-radius: 0 0 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.open {
    border-radius: 1em 0 0 0;
    width: 70vw;
    height: 75vh;
}
.closed:hover {
    width:6vw;
    height: 6vw;
}
.open div {
    width: 100%;
    text-align: center;
}
.grd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    overflow-y: auto;
    position: absolute;
    top: 30vh;
    height: 70vh;
}
.grd > div {
    min-height: 10vh;
}