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

:root {
  --body-bg: hsl(0, 0%, 13%);
}

html {
  color-scheme: dark light;
}

body {
  background: var(--body-bg);
  color: white;
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}

.wrapper {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.site-title {
  font-size: 3rem;
  text-align: center;
}

section {
  padding-block: 5rem;
}

section h2 {
  font-size: 2.25rem;
}

/* Diagonal / skewed background */
.diagonal {
  --skew-angle: -3deg;
  --background:
    linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
  position: relative;
  isolation: isolate;
}
.diagonal::after {
  content: '';
  background: var(--background);
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewY(var(--skew-angle));
}

/* Spikes */
.spikes {
  --spike-color: var(--body-bg);
  --spike-width: 40px;
  --spike-height: 20px;
  position: relative;
  background: linear-gradient(to right, #fdc830, #f37335);
  color: black;
}
.spikes::before,
.spikes::after {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--spike-height);
  background: var(--spike-color);
  /* SVG Image generated with https://yqnn.github.io/svg-path-editor/ */
  -webkit-mask-image: url('./assets/spike.svg');
  mask-image: url('./assets/spike.svg');
  -webkit-mask-size: var(--spike-width) var(--spike-height);
  mask-size: var(--spike-width) var(--spike-height);
}
.spikes::before {
  top: 0;
}
.spikes::after {
  bottom: 0;
  transform: rotate(.5turn);
}

/* Waves */
.waves {
  /* Mask created with https://css-generators.com/wavy-shapes/ */
  --mask:
    radial-gradient(39.05px at 50% 55.00px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
    radial-gradient(39.05px at 50% -30px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
    radial-gradient(39.05px at 50% calc(100% - 55.00px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
    radial-gradient(39.05px at 50% calc(100% + 30.00px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
  background: linear-gradient(to right, #00f260, #0575e6);
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

/* Polygonal, using clip-path */
.polygonal {
  --clip-height: 7vw;
  background: linear-gradient(to right, #440a5b, #4b263d);
  clip-path: polygon(
    0 0, 
    100% var(--clip-height), 
    100% calc(100% - var(--clip-height)), 
    0 100%
  );
  margin-block: calc(-1 * var(--clip-height));
}

.polygonal .wrapper {
  display: grid;
  grid-template-areas:
    "h2 img"
    "p img";
}
.polygonal .wrapper h2 {
  grid-area: h2;
}
.polygonal .wrapper p {
  grid-area: p;
}
.polygonal .wrapper img {
  grid-area: img;
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 15% 100%);
}

/* Arrow down, using clip-path */
.arrow {
  --arrow-height: 40px;
  --arrow-width: 120px;
  position: relative;
  isolation: isolate;
  z-index: 0;
  background: radial-gradient(#f0def4, #f1bca2);
  color: var(--body-bg);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--arrow-height)),
    calc(50% + var(--arrow-width) / 2) calc(100% - var(--arrow-height)),
    50% 100%,
    calc(50% - var(--arrow-width) / 2) calc(100% - var(--arrow-height)),
    0 calc(100% - var(--arrow-height))
  );
  margin-bottom: calc(-1 * var(--arrow-height));
}
.arrow .wrapper {
  margin-bottom: var(--arrow-height);
}

/* Notepad */
.notepad {
  --hole-color: var(--body-bg);
  --hole-height: 40px;
  --hole-width: 30px;
  position: relative;
  background: #f9f3db;
  background-size: 100% 1.875rem;
  background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#ddd .05em, transparent .05em);
  color: black;
}
.notepad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--hole-width);
  height: 100%;
  background: var(--hole-color);
  /* SVG Image generated with https://yqnn.github.io/svg-path-editor/ */
  -webkit-mask-image: url('./assets/hole-punch-horizontal.svg');
  mask-image: url('./assets/hole-punch-horizontal.svg');
  -webkit-mask-size: var(--hole-width) var(--hole-height);
  mask-size: var(--hole-width) var(--hole-height);
  background-repeat: repeat-y;
}