@font-face {
   font-family: "SeuratProDB";
   src: url('/fonts/FOT-Seurat Pro DB.otf');
   font-display: swap;
 }

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

 h2 {
  color: #79cfff;
  text-shadow:
    -2px -2px 0px rgb(128 111 90 / 41%),
    -2px -1px 0px rgb(128 111 90 / 90%),
    -2px 0px 0px rgb(128 111 90 / 99%),
    -2px 1px 0px rgb(128 111 90 / 89%),
    -2px 2px 0px rgb(128 111 90 / 42%),
    -1px -2px 0px rgb(128 111 90 / 89%),
    -1px -1px 0px rgb(128 111 90),
    -1px 0px 0px rgb(128 111 90),
    -1px 1px 0px rgb(128 111 90),
    -1px 2px 0px rgb(128 111 90 / 91%),
    0px -2px 0px rgb(128 111 90),
    0px -1px 0px rgb(128 111 90),
    0px 0px 0px rgb(128 111 90),
    0px 1px 0px rgb(128 111 90),
    0px 2px 0px rgb(128 111 90 / 99%),
    1px -2px 0px rgb(128 111 90 / 87%),
    1px -1px 0px rgb(128 111 90),
    1px 0px 0px rgb(128 111 90),
    1px 1px 0px rgb(128 111 90),
    1px 2px 0px rgb(128 111 90 / 83%),
    2px -2px 0px rgb(128 111 90 / 35%),
    2px -1px 0px rgb(128 111 90 / 87%),
    2px 0px 0px rgb(128 111 90 / 98%),
    2px 1px 0px rgb(128 111 90 / 89%),
    2px 2px 0px rgb(128 111 90 / 41%);
 }

 body {
   font-family: "SeuratProDB", Arial, sans-serif;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #333;
   background-image:
     linear-gradient(#424242 1px, transparent 1px),
     linear-gradient(90deg, #424242 1px, transparent 1px);
   background-size: 40px 40px;
   animation: scrollGrid 90s linear infinite;
 }

 @keyframes scrollGrid {
   from {
     background-position: 0 0;
   }

   to {
     background-position: 1080px -1080px;
   }
 }

 .signup-container {
   width: 100%;
   max-width: 500px;
   background-size: 100% auto;
   /* background-color: #bc9f79; */
   min-height: 100vh;
   display: flex;
   align-items: flex-end;
   border-radius: 40px;
   border: 12px solid #111;
   box-shadow: 0 0 0 2px #333, 0 20px 50px rgba(0, 0, 0, 0.5);
   /* padding: 20px; */
   position: relative;
   overflow-y: auto;
 }

 .signup-card {
   width: 100%;
   background: #bc9f79;
   border-radius: 15px;
   padding: 2rem 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 1;
   margin-top: auto;
 }

 .welcome-text {
   color: rgb(0, 60, 0);
   font-size: 18px;
   background: #ffffffc7;
   border-radius: 15px;
   border: 8px solid #50df0ae3;
   font-size: 18px;
   margin-bottom: 1rem;
   text-align: center;
   padding: 1.5rem;
   line-height: 1.75rem;
 }

 .welcome-text i {
   color: #79cfff;
   font-style: normal;
 }

 .form-group {
   margin-bottom: 1rem;
 }

 .signup-card>div {
   color: #231c15;
   line-height: 26px;
 }

 a {
   color: #bc9f79;
 }

 ul {
   margin-bottom: 1rem;
   background: #fff3cd92;
   padding: 1rem 1rem 0.25rem 2rem;
   border-radius: 0 16px 16px 0;
   border-left: 4px solid #806f5a;
 }

 li {
   margin-bottom: 0.5rem;
 }

 @media (max-width: 450px) {
   .mobile-frame.horizontal {
     min-height: 100vh;
   }

   .signup-container {
     border: 0;
     border-radius: 0;
   }
 }