html {
  background-image: url("/public/img/index/sky.webp");
  background-size: auto 100%;
}
body {
  >div {
    main {
      width: 75%; margin: 0 auto -7rem; padding: 1rem;
      box-sizing: border-box; position: relative;
      background-color: var(--black);
      display: flex; flex-direction: column; gap: 1rem;
    }
    >div {
      margin: -3rem 0 -1rem; padding-top: 12rem; z-index: -1;
      position: relative;
      background-image: url("/public/img/grass.webp");
      &::after {
        content: ''; position: absolute; top: -1rem;
        background-image: url("/public/img/ocs/grass-wave.webp");
        background-size: contain;
        width: 100%; height: 1rem;
      }
      >div {
        background-image: url("/public/img/dirt.webp");
        padding: 2rem calc(12.5% + 1rem);
      }
    }
  }
  footer {
    background-image: url("/public/img/ocs/darkgrass.webp");
    &::before {background-image: url("/public/img/ocs/darkgrass-wave.webp");}
  }
}