@media screen and (orientation: portrait) {
  .grid-container {
    -ms-grid-columns: 10vw 65vw 10vw;
        grid-template-columns: 10vw 65vw 10vw;
    -ms-grid-rows: auto 65vw auto auto;
        grid-template-rows: auto 65vw auto auto;
  }
}

@media screen and (orientation: landscape) {
  .grid-container {
    -ms-grid-columns: auto 65vh auto;
        grid-template-columns: auto 65vh auto;
    -ms-grid-rows: 10vh 65vh 10vh auto;
        grid-template-rows: 10vh 65vh 10vh auto;
  }
}

body {
  background-color: #f5f7e8 !important;
}

.hide {
  display: none;
}

.grid-container {
  display: -ms-grid;
  display: grid;
  min-height: 100vh;
  padding-bottom: 5rem;
}

#p5-canvas-container {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
}

#p5-interface {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 3;
  grid-row: 3;
}

canvas {
  position: relative;
  border-style: solid;
  border-width: 0.1rem;
}
/*# sourceMappingURL=style.css.map */