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

html,
body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 200vh;
 font-family: "Mori";
 color: #fffce1;
 background: #0e100f;
}

main {
 width: 100%;
 height: 200vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

#trigger-container {
 position: relative;
 display: block;
 width: 50%;
 max-width: 500px;
 border-top: dashed 2px grey;
 border-bottom: dashed 2px grey;
 padding: 4rem;
}

.info {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 width: 300px;
 background-color: #191919;
 border-radius: 10px;
 gap: 1rem;
}

.info h1 {
 font-size: 1.2rem;
 text-align: center;
}

.info svg {
 height: 20px;
}


.gsap-marker-end, .gsap-marker-scroller-end {
 font-family: "Mori"!important;
 color: #fa7777 !important;
 border-color: #fa7777 !important;
 
}

.gsap-marker-start, .gsap-marker-scroller-start {
 font-family: "Mori"!important;
 color: #abff84 !important;
 border-color: #abff84 !important;
}