@font-face {
   font-family: 'Nasalization';
   src: url('../assets/fonts/nasalization/Nasalization.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'Outfit';
   src: url('../assets/fonts/outfit/Outfit.ttf') format('opentype');
   font-weight: normal;
   font-style: normal;
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
   font-family: 'Nasalization';
   overflow-x: hidden;
   /* prevent sideways scroll */
   overflow-y: auto;
   /* allow scroll only if needed */
   background: #09040F;
   padding-top: env(safe-area-inset-top);
   padding-bottom: env(safe-area-inset-bottom);

   touch-action: manipulation;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -webkit-tap-highlight-color: transparent;
   overscroll-behavior: none;
 }

 main {
   margin-top: 108px;
   /* pushes content below header */
   min-height: calc(100dvh - 108px);
   /* d = dynamic viewport */
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   /* required for .shine-wrapper absolute positioning */
   overflow: hidden;
   /* ensures background elements don’t push page size */
 }

 .wrapper-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 0;
   pointer-events: none;
 }

 .shine-bg {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 150vw;
   /* safely oversize to fill */
   height: auto;
   transform: translate(-50%, -50%);
 }

 .flare-bg {
   position: absolute;
   top: 72%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-1deg);
   height: auto;
   width: 100%;
   pointer-events: none;
 }

 .content-wrapper {
   /* max-width: 1200px; */
   width: 100%;
   z-index: 100;
 }

 /* .content {
   background: #f5f5f5;
   padding: 32px;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 } */