@font-face {
 font-display: block;
 font-family: Mori;
 font-style: normal;
 font-weight: 900;
 src: url(https://assets.codepen.io/16327/PPMori-SemiBold.woff) format("woff");
}

html,
body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100vh;
}

body {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 font-family: "Mori";
 /* background: #0e100f; */
 background: radial-gradient(
 129% 99% at 112% 85%,
 rgb(223, 220, 255) 20%,
 rgb(166, 158, 255) 90%
 ),
 url("https://assets.codepen.io/16327/noise-e82662fe.png");
 background-blend-mode: color-dodge;
}

.headline {
 text-align: center;
 color: rgb(14, 16, 15);
 font-size: clamp(2rem, 6rem, 4.5vw);
 will-change: transform;
 font-kerning: none;
 -webkit-text-rendering: optimizeSpeed;
 text-rendering: optimizeSpeed;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 opacity: 0;
}

.headline * {
 will-change: transform;
}

.char {
 outline: 1px dotted var(--dark);
}

button {
 border-color: var(--dark);
 background-color: transparent;
 color: var(--dark);
 margin-top: 1.5rem;
}