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

:root {
 --color-shockingly-green: #0ae448;
 --color-just-black: #0e100f;
 --color-surface-white: #fffce1;
 --color-pink: #fec5fb;
 --color-shockingly-pink: #f100cb;
 --color-orangey: #ff8709;
 --color-lilac: #9d95ff;
 --color-lt-green: #abff84;
 --color-blue: #00bae2;
 --color-grey: #191919;
 --color-surface75: #bbbaa6;
 --color-surface50: #7c7c6f;
 --color-surface25: #42433d;
}

body {
 font-family: Mori;
 font-weight: 300;
 margin: 0;
 padding: 0;
 background: #0e100f;
}

.main-tool-bar {
 height: 80px;
 background: linear-gradient(
 144.02deg,
 var(--color-blue) 4.56%,
 var(--color-pink) 72.98%
 );
 color: #0e100f;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;

 position: fixed;
 width: 100%;
 left: 0;
 top: 0;
 transition: ease 0.4s;
 &--scrolled {
 height: 40px;
 }
}

.scrollable-area {
 height: 200vh;
}