style.css

html,
body {
  padding: 0;
  margin: 0;
  scroll-snap-type: y mandatory;
  font-family: sans-serif;
  background: linear-gradient(0deg, #B5FFFC 0%, #FFDEE9 100%);
  font-size: 38px;
  color: rgba(43, 54, 48, 0.95);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
li {
  margin: 10px 0;
}

li span {
  display: inline-block;
  padding: 5px;
  box-shadow: none;
}

section {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background-size: cover;
  width: 100vw;
}

.container {
  padding: 2rem;
  max-width: 640px;
}

.splash {
  background-color: #FFDEE9;
  background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
  color: #a45403a3;
  text-align: center;
  justify-content: stretch;
}

#kursen-innehåll {
  font-size: 31px;
}

.splash h1 {
  font-weight: 600;
}

.splash .container {
  flex-grow: 1;
  max-width: unset;
  text-align: center;
  font-size: 7vw;
}

.hero {
  background: #606c38;
  background: linear-gradient(135deg, #606c38 0%, #283618 100%);
  color: #ffafcc;
  font-size: 10vw;
}
.hero .container {
  max-width: unset;
  padding: 0;
}

#webbutveckling-html, #webbutveckling-css {
  font-size: 20vw;
}

.two-columns img {
  flex-grow: 1;
  max-width: 40vw;
}

#webbutveckling-flow img {
  height: 75vh;
}
.animate {
  transition: all .5s ease-out 250ms;
}

/* image animation */
img.animate {
  opacity: 1;
}
img.hidden {
  opacity: 0;
}

/* container animation */
.container.animate {
  opacity: 1;
  transform: none;
}
.container.hidden {
  opacity: 0;
  transform: translateX(-50px);
}

/* hero animation */
.hero .container.animate {
  opacity: 1;
  transform: scale(1);
}
.hero .container.hidden {
  opacity: 0;
  transform: scale(.2);
}

/* list item animation */
li span.animate {
  background-color: transparent;
  color: unset;
  border-radius: 5px;
}
li span.hidden {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  background-color: #3a5a40;
  color: #3a5a40;
}