html, body {
  background-image: var(--secondary-bg);
  background-repeat: repeat;
  background-size: 8px;
  background-position: 1px 1px;
  margin: 0;
  height: 100%;
  image-rendering: pixelated;
}

body {
  box-sizing: border-box;
  padding: 4rem;
}

#main {
  height: round(100%, 8px);
  width: round(100%, 8px);
  display: grid;
  gap: 5rem;
}
@media (orientation: landscape) {
  #main {
    grid-template-columns: round(30%, 8px) round(60%, 8px);
  }
}
@media (orientation: portrait) {
  #main {
    grid-template-columns: round(100%, 8px);
  }
  #main > :first-child {
    display: none;
  }
}
#main > * {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#main > * > * {
  background-color: var(--secondary-col);
  border: 2px solid var(--primary-col);
  box-shadow: 4px 4px 0 var(--primary-col);
}

/*# sourceMappingURL=main.css.map */