* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 2048px;
  transform-style: preserve-3d;
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.background,
.foreground {
  position: absolute;
}

.background {
  transform: translateZ(-2048px) scale(2);
  height: calc(100vh * 2);
}

.foreground {
  transform: translateZ(calc(2048px / 4)) scale(1);
  margin-top: calc(100vh / 2);
  height: 100vh;
}

.doh {
    font-size: 5rem;
    color: rgb(196, 42, 106);
    text-shadow: 0.1rem 0.1rem 0.1rem #333;
    transform: translateZ(calc(2048px / 10));
    margin-top: calc(100vh + 10rem + 500px);
}