body.grid-body {
    margin: 0px;
    padding: 0px;
    background-image: url(/static/images/PurpleWave-Dark.png);
    font-family: "Roboto", sans-serif;
}

span.grid-wrapper {
    display: grid;
    grid-row: 1fr;
    grid-column: 1fr;
    height: 100%;
    width: 100%;
    grid-template-areas:
        "one one one one one one one one one one one one one one"
        ". . . . . . . . . . . . . ."
        ". . two two two . . . . . . . . ."
        ". . two two two . . . . . . . . ."
        ". . two two two . . . . . . . . ."
        ". . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . .";
}
span.grid-one {
    grid-area: one;
  }
span.grid-two {
    grid-area: two;
  }


div.top-bar {
    background-color: #604aa4;
    color: #efb0f1;
    font-size: 1.5em;
    padding: 10px;
    text-align: center;
    grid-area: one;
    max-height: 10vh;
}

img.logo {
    max-height: 50vh;
    max-width: 30vw;
    margin: 0 auto;
    display: block;
}

.invisible-btn {
  display: fit-content;
  border: none;
  background-color: transparent;
  color: none;
  border-radius: 2.5vw;
  cursor: pointer;
  font: inherit;
  max-height: fit-content;
}