.app {
  margin: auto;
  padding: 2rem 0;
  max-width: min(100% - 10vw, 900px);
  min-height: calc(100vh - 3rem);

  &.is-preview {
    margin: 0;
    display: grid;
    max-width: 100%;
    min-height: 100vh;
    grid-template-columns: clamp(300px, 40%, 700px) minmax(0, 1fr);

    > iframe {
      margin: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
.app-footer {
  height: 3rem;
  text-align: center;
  font: var(--font-small);
  color: var(--color-dim);
  
  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
  
  div {
    justify-items: center;
    gap: 0.5rem;
    align-items: center;
    display: inline-flex;
  }

  #darkLightModeSwitchToggleButton {
    background: none;
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    text-align: center;
    border: solid 1px var(--color-line);
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: 420;
  }
}