body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.618;
}

.app {
  display: flex;
  flex-flow: column nowrap;
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 100vh;
  width: min(calc(100vw - 2rem), 1000px);
  margin: auto;
}

.notebook {
  background: hsl(0, 4%, 20%);
  box-shadow: 2px 2px 2px 0 hsl(0, 0%, 13%), 2px 2px 5px 3px hsl(0, 0%, 40%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 550px;
  margin-top: 3rem;
  padding: 0.8rem 1.3rem 1.2rem 1.3rem;
  position: relative;
}

@media screen and (max-width: 1024px) {
  .notebook {
    padding: 0.8rem 1.3rem 1.2rem 0.1rem;
  }
}

.notebook--cover {
  padding: 1rem;
}

a {
  color: hsl(212, 46%, 34%);
}