.mainContainer {
  background: linear-gradient(90deg, #202020 0%, #121212 100%);
  width: 100%;
  height: 100%;
  margin: auto;
  color: #fffd;
  padding: max(16px, 2vh);

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 40px 48em auto 1fr;
  grid-template-areas:
    'sett even play info'
    'sett even mess info';
  gap: max(16px, 2vh);
}

/* 2/3 window, hide info */
@media (max-width: 1450px) and (min-height: 700px) {
  .mainContainer {
    height: 100%;
    grid-template-rows: auto 1fr;
    grid-template-columns: 40px 48em auto;
    /* grid-template-areas:
      'even play sett'
      'even mess sett'; */
  }

  .info {
    visibility: hidden;
  }
}

/* 1/3 window, show control only */
@media (max-width: 850px) and (min-height: 500px) {
  .mainContainer {
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    column-gap: 0;
    grid-template-areas:
      'play'
      'mess';
  }

  .editor,
  .info,
  .settings {
    visibility: hidden;
  }
}

/* 1/3 corner window, playback only */
@media (max-width: 900px) and (max-height: 500px) {
  .mainContainer {
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    grid-template-areas: 'play';
    max-height: 325px;
  }

  .editor,
  .messages,
  .info,
  .settings {
    visibility: hidden;
  }
}

h1 {
  font-size: max(1.5em, 16px);
  color: rgba(255, 255, 255, 0.63);
  padding-bottom: 0.25em;
}

.mainContainer > div {
  border-radius: 0.5em;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.13);
  padding: 0.8em 1.5em;

  display: flex;
  flex-direction: column;
}

.editor {
  grid-area: even;
}

.info {
  grid-area: info;
}

.messages {
  grid-area: mess;
}

.playback {
  grid-area: play;
}

.messages,
.playback {
  min-width: 31em;
}

.mainContainer > .settings {
  grid-area: sett;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: fit-content;

  display: flex;
  flex-direction: column;
  gap: 1em;
}

.content {
  padding-top: 0.5em;
}

.cornerButtonContainer {
  position: relative;
  top: -4.5em;
  display: flex;
  justify-content: flex-end;
}

.buttonContainer {
  padding-bottom: 2em;
  display: flex;
  justify-content: flex-end;
}