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

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

 p { 
  color:white;
 }

 /* DROPDOWN STYLING */
.signup-text {
  color: #1e1e1e;
  /* paint-order: stroke fill;
  text-stroke: 6px #353533;
  -webkit-text-stroke: 6px #353533; */
  margin-left: 1rem;
  margin-top: 20rem;
  font-size: 18px;
}

.signup-text i {
  color: #8f7cff
}

.stat-value {
  width: 100%;
}

.styled-dropdown-group {
  margin-top: 1rem;
}

.styled-dropdown-label {
  color: #FFD700;
  -webkit-text-stroke: 5px #806f5a;
  text-stroke: 5px #806f5a;
  paint-order: stroke fill;
  font-family: "SeuratProDB", Arial, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.styled-dropdown {
  background-color: #806f5a;
  color: white;
  border: 2px solid #FFD700;
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
  font-family: "SeuratProDB", Arial, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFD700%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

.styled-dropdown:focus {
  outline: none;
  box-shadow: 0 0 0 2px #a08c72;
}

.styled-dropdown option {
  background-color: #806f5a;
  color: white;
  padding: 8px;
}

.btn-shadow {
  box-shadow:     inset 0 0 0 2px #fff,
    inset 4px 4px 8px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px rgba(0, 0, 0, 0.33);
}

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

.form-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFD700;
  font-size: 20px;
  text-transform: uppercase;
  padding: 0 1rem;
  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%);
  z-index: 1;
}

.form-input,
.form-select {
  width: 100%;
  padding: 1rem 0.75rem 0.75rem;
  background: #806f5a;
  border: 2px solid #806f5a;
  border-radius: 8px;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  margin-top: -1.5rem;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  background: #85755c;
}

.form-select {
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFD700%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 2.5rem;
}

.form-select option {
  background: #806f5a;
  color: white;
}

.submit-btn {
  border: 3px solid #333;
  background: #fff;
  color: #333;
  border-radius: 10px;
  padding: 4px 8px;
  font-family: "SeuratProDB", Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #fff,
    inset 4px 4px 8px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px rgba(0, 0, 0, 0.33);
}

.submit-btn:hover {
  /* background: #0d47a1; */
}

.form-links {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.form-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.form-links a:hover {
  text-decoration: underline;
}

.separator {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0.5rem;
}

 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-color: #333333; /* fallback while image loads / if it has transparency */
  background-image: url('/images/backgrounds/diamond.png');
  background-repeat: repeat;
  background-size: 90px 90px; /* must match the tile distance in the animation below */
  animation: scroll-grid 24s linear infinite;
}

@keyframes scroll-grid {
  from { background-position: 0 0; }
  to   { background-position: 90px -90px; } /* same 64px used in background-size */
}


 .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;
 }

 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;
 }

 .mb-3 {
  margin-bottom: .75rem;
}

 .important {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1rem;
  margin: 1.5rem 0;
  color: black !important;
  border-radius: 0 16px 16px 0;
}

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

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