@font-face {
  font-family: RobotoMono;
  src: url("/fonts/roboto-mono/RobotoMono-VariableFont_wght.woff2")
    format("woff2");
}

@font-face {
  font-family: WorkSans;
  src: url("/fonts/work-sans/WorkSans-VariableFont_wght.woff2") format("woff2");
}

:root {
  --grey: #9f9f9f;
  --white: #ebe9fe;
  --red: rgba(196, 76, 76, 0.8);
  --green: rgba(0, 175, 11, 0.8);
}


body {
  color: var(--white);
  font-family: WorkSans;
  background: radial-gradient(
    circle at 50% 100%,
    rgba(0, 0, 0, 1) 75%,
    rgba(173, 25, 253, 1) 150%
  );
  color: var(--white);
  font-family: WorkSans;
  scroll-behavior: smooth;
}

.h1,.h2, .h3, .h4, .h5, .h6 {
  color: var(--white);
  font-weight: bold;
  font-family: RobotoMono;
  margin: auto;
}

.main, .mainContainer{
  position: relative;
}

.main .row, .mainContainer .row {
  height: 100vh;
}

.margin-60{
  margin-top: 60px;
  margin-bottom: 60px;
}

.cardCustom, .cardCustomLink{
  border: #262626 1px solid;
  border-radius: 25px;
  overflow: hidden;
  /* box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); */
}


.label {
  color: var(--grey);
  font-size: 14px;
}

.title {
  color: var(--white);
  font-size: 62px;
  font-weight: bold;
  font-family: RobotoMono;
}

.description {
  color: var(--white);
  font-size: 14px;
}

/* .form-container {
  display: flex;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 10px;
  overflow: hidden; /* to keep rounded corner background within */
} */

.form-container.error {
  border: 3px solid var(--red);
}

#message.error {
  color: var(--red);
}
#message.success {
  color: var(--green);
}

.email-input {
  color: #fff;
  font-size: 14px;
  padding: 12px 20px;
  outline: none;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  width: 100%;
}

.email-input::placeholder {
  color: #ccc; /* Adjust placeholder color as needed */
}

.join-button .spinner-border {
  width: 1rem;
  height: 1rem;
}

.join-button {
  background: linear-gradient(184.21deg, #a200ff 3.41%, #aa6dcc 96.59%);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s; /* Smooth color transition */
  margin-left: 5px;
}

.join-button:hover, .fancy-button:hover, .cardCustomLink:hover {
  cursor: pointer;
  opacity: 0.8;
}

.image-galleries {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-gap: 20px;
  margin-top: 1em;
}

.grid-image {
  width: 100%;
  position: relative;
}
.grid-image.top {
  margin-top: -10%;
}

.footer {
  width: auto;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
}

.selector-label {
  margin-bottom: 10px;
  font-size: 14px;
  text-align: left !important;
}

.toggle-group {
  display: flex;
  gap: 10px;
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid grey;
  opacity: 0.6;
}
.toggle-option label, .toggle-option.active label{
  cursor: pointer;
  color: white;
}

.toggle-option.active {
  border: 2px solid #bb4dff;
  color: white;
  opacity: 1;
}


.toggle-option input[type='radio'] {
  content: "";
  width: 1.4em;
  height: 1.4em;
  transition: all 250ms ease;
  accent-color: #bb4dff; 
}

.fancy-button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  padding: 3px 24px;
  font-size: 14px;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(90deg, #E9C2FF,#A200FF, #8C5DA7);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.arrow {
  font-size: 1.5rem;
}

@media only screen and (max-width: 768px) {
  .main .row {
    height: 100%;
  }
  .mainContainer .row {
    height: 100vh;
  }
  .content {
    margin-top: 2em;
  }
  .label {
    font-size: 12px;
  }

  .title {
    font-size: 38px;
  }

  .description {
    font-size: 12px;
  }
  .selector-label{
    font-size: 12px;
  }
  .email-input {
    font-size: 12px;
  }
  .join-button {
    font-size: 12px;
    padding: 10px 18px;
  }
  .fancy-button {
    width: 100%;
    font-size: 12px;
    padding: 6px 16px;
  }
  .arrow {
    font-size: 1rem;
  }
  .form-container {
    padding: 5px;
  }
  .footer {
    width: 100%;
    text-align: center;
    position: relative;
    color: var(--white);
    margin-top: 2em;
  }

  .image-galleries {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 0;
    margin-top: 1em;
  }
  .grid-image {
    padding: 0.5em;
  }
  .join-button{
    width: 100%;
    
  }
}