presentation.css

body {
  width: 100vw;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100%);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: calc(20px + 5vmin);
  cursor: crosshair;
  color: white;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --bgcolor: hsla(0, 73%, 55%, 0.5);
  --bgstart: 1%;
  --bgend: 99%;
  background: linear-gradient(to top, var(--bgcolor) var(--bgstart), transparent var(--bgstart), transparent var(--bgend), var(--bgcolor) var(--bgend));
}

section > div {
  width: 90vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

body::after {
  content: "";
  display: block;
  position: absolute;
  background-image: url('data:image/png;base64,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');
  background-size: cover;
  top: 2vmin;
  left: 2vmin;
  height: 7vmin;
  width: 7vmin;
  mix-blend-mode: exclusion;
}

h1 {
  font-size: 300%;
}

h2 {
  color: hsl(0, 73%, 55%);
  font-size: 200%;
}

p {
  font-size: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

ul, ol {
  text-align: left;
}

ul li {
  list-style: url("assets/arrow.svg");
}

hr {
  width: 100%;
  height: 0.1rem;
  background: yellow;
  border: none;
  margin: 2rem 0;
}

a, a:visited {
  color: #24cec2;
}

a:hover {
  color: #aaf8f1;
}

p:hover, li:hover {
  filter: drop-shadow(0 0 0.2rem red);
}

.alt {
  color: #ff0;
}

.borders {
  border: 0.1rem solid #ff0;
}

.v {
  padding-bottom: 1rem;
}

.v .p {
  height: 2rem;
  width: 2rem;
}