:root {
  --checker-size: 60px;
  --content-max-width: 900px;
  --content-padding: 2rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #fff;
  background-image:
    linear-gradient(45deg,
      #000 25%,
      transparent 25%, transparent 75%,
      #000 75%, #000
    ),
    linear-gradient(45deg,
      #000 25%, transparent 25%, transparent 75%, #000 75%, #000
    );
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, calc(var(--checker-size) / 2) calc(var(--checker-size) / 2);

  font-family: system-ui, sans-serif;
}

main {
  background: #fff;
  max-width: var(--content-max-width);
  width: 90%;
  padding: var(--content-padding);
  margin: 2rem auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

main img,
main video {
  max-width: 100%;
  height: auto;
  display: block;
}