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

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background-color: #000;
     color: white;
     min-height: 100%;
     overflow: hidden;
     font-size: 18px;
 }

 * {
     box-sizing: border-box;
 }


 h1 {
     position: absolute;
     top: 10vh;
     font-size: clamp(3rem, 6vw, 6rem);
     text-align: center;
     font-weight: 500;
     letter-spacing: -0.02em;
     margin: 0 0 8rem 0;

     line-height: .9;
 }

 h1 span {
     /* background: linear-gradient(to bottom, #fff 0%, #aaa 100%); */
     background: linear-gradient(to bottom, #fff 40%,
             #c39bc0 70%,
             #ffc192 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     /* margin-bottom: 2rem; */
     opacity: .85;
 }

 /* .shineBorder {
  
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: inherit;
 background: linear-gradient(45deg, #ff6ec4, #7873f5, #4ade80, #facc15, #f87171, #a78bfa);
 background-size: 400% 400%;
 animation: shine 20s linear infinite;
 }

 */
 #main {
     display: flex;
     padding: max(.25rem, 2vw);
     /* padding-bottom: 8rem; */
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     position: relative;
     width: 100%;
     height: 100svh;
     z-index: 2;
     pointer-events: none;

     /* Allow clicks to pass through to the universe */
 }

 #universe {
     /* display: none; */
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: auto;
     /* filter: blur(.33px) contrast(1.05); */

     /* filter: sepia(.2) */
     /* filter: contrast(1.1) hue-rotate(.3rad) saturate(1.15) brightness(1.2); */
 }

 canvas {
     display: block;
 }

 .small {
     font-size: .8rem;
     opacity: 0.6;
 }

 .order {
     max-width: 800px;
     width: 100%;
     padding: clamp(.5rem, 4vw,3rem);
     padding-top:0;
     background: rgba(255, 255, 255, .1);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     text-align: center;
     pointer-events: auto;
 }

 .order h2 {
     display: none;
     font-size: 2.2rem;
     font-weight: 300;
     letter-spacing: -0.02em;
     margin: 0;
     background: linear-gradient(to bottom, #fff 0%, #aaa 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     /* margin-bottom: 2rem; */
 }


 #universe-message {

     font-size: 1.84rem;
     color: rgba(255, 255, 255, 0.8);
     margin: 5vh 0;
     line-height: 1.4;
     font-weight: 100;
     font-weight: 300;

     position: relative;
     min-width: 100%;
     /* visibility: hidden; */
     /* animation: fadeInOut 5s ease-out 2s infinite; */
 }

 @keyframes fadeInOut {

     0%,
     100% {
         visibility: visible;
         opacity: 0;
         filter: blur(10px);
         /* transform: scale(1.2) */
     }

     10%,
     90% {
         visibility: visible;
         opacity: 1;
         filter: blur(0);
         /* transform: scale(1); */
     }
 }

 #universe-message::before,
 #universe-message::after {
     content: '“';
     position: absolute;
     left: 0rem;
     top: 3rem;
     font-size: 10rem;
     color: rgba(255, 255, 255, 0.1);
     font-family: serif;
     line-height: 0;
     pointer-events: none;
 }

 #universe-message::after {
     content: '”';
     left: inherit;
     right: 0rem;
     top: 4rem;
 }

 form {
     text-align: left;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 input[type="text"] {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 14px 18px;
     color: white;
     font-size: 1rem;
     transition: all 0.2s ease;
     outline: none;
 }

 input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     display: inline-block;
     width: 20px;
     height: 20px;
     padding: 0;
     border-radius: 4px;
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.3);
     cursor: pointer;
     position: relative;
     flex: 0 0 auto;
 }

 input[type="checkbox"]:checked {
     background-color: #ff6ec4;
     border-color: #ff6ec4;
 }

 input[type="checkbox"]:checked::after {
     content: '✓';
     position: absolute;
     color: white;
     font-size: 14px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 input:focus {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
 }

 input::placeholder {
     color: rgba(255, 255, 255, 0.4);
 }

 .btn,
 button {
     position: relative;
     background-color: white;
     background-image: linear-gradient(180deg, #FFF, #e8e8e8);
     color: #0008;
     border: none;
     border-radius: 1rem;
     padding: 14px;
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .3s ease;

 }

 .btn,
 button:hover {
     transform: translateY(-1px);
     /* box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); */
     /* background: linear-gradient(180deg, #FFF, #FFF); */
     filter: brightness(1.2);
 }

 .btn,
 button:active {
     transform: translateY(0);
 }

 @property --rotate {
     syntax: '<angle>';
     initial-value: 0deg;
     inherits: false;
 }

 .shineBorder {
     /* padding: var(--border-size); */
     position: relative;
     /* z-index: 10; */
     /* background: transparent; */
     border-radius: 1rem;
     border: 2px solid white;
     /* --rotate: 60deg; */
 }

 .shineBorder::after,
 .shineBorder::before {
     content: '';
     position: absolute;
     inset: -3px;
     z-index: -2;
     border-radius: inherit;
     /* background: linear-gradient(45deg, #fff, #000, #ff6ec4, #7873f5, #4ade80, #facc15, #f87171, #a78bfa); */
     background-image: linear-gradient(var(--rotate), #000F, #000F, #ff6ec4,
             #ff6ec4,
             #000F, #7873f5,
             #000F, #f87171,
             #000F, #a78bfa, #000F, #000F);
     background-size: 300% 300%;
     animation: shine 20s ease-in-out infinite;
     /* filter: blur(1px); */
     mix-blend-mode: lighten;

 }

 .shineBorder::after {
     inset: -10px;
     filter: blur(20px);
     z-index: 2;

 }

 @keyframes shine {
     0% {
         background-position: 0% 50%;
         --rotate: 0deg;
     }

     50% {
         background-position: 100% 50%;
         --rotate: 170deg;
     }

     100% {
         background-position: 0% 50%;
         --rotate: 0deg;

     }
 }

 .mt-1 {
     margin-top: 1rem;
 }

 .mt-2 {
     margin-top: 2rem;
 }

 .mt-3 {
     margin-top: 3rem;
 }

 .row {
     display: flex;
     gap: 1rem;
     /* flex-wrap: wrap; */
     align-items: center;
 }

 .row>* {
     /* flex: 1 0 auto; */
 }