:root {
  /*             */
  /* BREAKPOINTS */
  /*             */
  --bp-xs: 576px;
  --bp-s: 768px;
  --bp-m: 992px;
  --bp-l: 1200px;
  --bp-xl: 1400px;

  /*        */
  /* COLORS */
  /*        */
  --white-500: rgb(255, 255, 255);
  --black-300: rgb(33, 37, 41);
  --black-500: rgb(0, 0, 0);

  --red-500: rgb(249, 80, 93);

  --gray-500: #c5c5c5;

  --blue-500: #1c183c;
  --blue-600: #181530;
  --blue-900: #0e0c1f;

  --green-500: #68e0cc;

  --purple-100: #d3d2ff;
  --purple-300: #4f4788;
  --purple-500: #4f43bc;
  --purple-800: #3c3762;

  /*             */
  /* FONT FAMILY */
  /*             */
  font-family: "Red Hat Text", sans-serif;

  /*           */
  /* FONT SIZE */
  /*           */
  --fs-xs: 0.75rem; /* 12px */
  --fs-s: 0.875rem; /* 14px */
  --fs-m: 1rem; /* 16px */
  --fs-l: 1.125rem; /* 18px */
  --fs-xl: 0.875rem; /* 20px */
  --fs-2xl: 1rem; /* 24px */
  --fs-3xl: 1.25rem; /* 36px */
  --fs-4xl: 1.875rem; /* 48px */
  --fs-5xl: 2rem; /* 64px */
  --fs-6xl: 5.25rem; /* 84px */
  --fs-7xl: 6rem; /* 96px */

  /*             */
  /* FONT WEIGHT */
  /*             */
  --fw-l: 300;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;

  /*               */
  /* BORDER RADIUS */
  /*               */
  --br-s: 15px;
  --br-m: 20px;
  --br-l: 30px;
  --br-xl: 50px;
  --br-2xl: 76px;
  --br-full: 50%;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Red Hat Text", sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  color: var(--white-500);
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: var(--blue-900);
}

main {
  min-height: 60vh;
  padding-top: 3rem;
  background-color: #0e0c1f;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
}

svg {
  max-width: 100%;
  display: block;
}

.neon-svg {
  filter: drop-shadow(0px 0px 4px var(--purple-500));
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

a,
a:hover {
  text-decoration: none !important;
}

iframe {
  display: block;
}

button {
  border: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.heading1 {
  font-weight: var(--fw-b);
  font-size: var(--fs-5xl);
  margin-bottom: 2rem;
}

.heading2 {
  margin-bottom: 1.5rem;
  color: var(--green-500);
  font-weight: var(--fw-b);
  font-size: var(--fs-4xl);
}

.text-gradient {
  background: -webkit-linear-gradient(
    left,
    var(--green-500),
    var(--purple-500)
  );
  max-width: fit-content;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-underline {
  text-decoration: underline;
}

.heading2-gradient {
  font-weight: var(--fw-m);
  font-size: var(--fs-4xl);
  margin-bottom: 3rem;
  background: -webkit-linear-gradient(
    left,
    var(--green-500),
    var(--purple-500)
  );
  max-width: fit-content;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading2 > span {
  font-weight: var(--fw-b);
}

.subtext {
  color: var(--gray-300);
  font-weight: var(--fw-r);
  font-size: var(--fs-s);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  margin-left: 0.5rem !important;
}

.section-padding-h-l {
  padding-block: 4rem;
}
.section-padding-h-m {
  padding-block: 3rem;
}

p {
  font-weight: var(--fw-l);
  color: var(--gray-500);
}

input {
  height: 45px;
  background-color: transparent;
  border: 0.5px solid var(--white-500);
  border-radius: var(--br-s);
}

/*             */
/* FORM BUTTON */
/*             */
.form-btn {
  padding: 0.5rem 1.5rem;
  color: var(--white-500);
  font-weight: var(--fw-m);
  border-radius: var(--br-l);
  transition: all 0.25s ease-in-out;
  background-color: var(--purple-500);
}

.form-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*             */
/* MAIN BUTTON */
/*             */
.main-btn {
  position: relative;
  width: fit-content;
  isolation: isolate;
  padding: 1rem 1.5rem;
  color: var(--white-500);
  border-radius: var(--br-l);
  font-weight: var(--fw-m);
  transition: all 0.25s ease-in-out;
  background-color: var(--blue-900);
  border: 2px solid var(--purple-500);
  filter: drop-shadow(0px 0px 5px var(--purple-500));
}

.main-btn::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: var(--br-l);
  filter: drop-shadow(0px 0px 5px var(--purple-500));
  z-index: -1;
}

.main-btn:hover {
  color: var(--green-500);
  border: 2px solid var(--green-500);
  filter: drop-shadow(0px 0px 5px var(--green-500));
}

@media (min-width: 992px) {
  :root {
    /*           */
    /* FONT SIZE */
    /*           */
    --fs-xs: 0.75rem; /* 12px */
    --fs-s: 0.875rem; /* 14px */
    --fs-m: 0.875rem; /* 16px */
    --fs-l: 0.875rem; /* 18px */
    --fs-xl: 0.9rem; /* 20px */
    --fs-2xl: 1rem; /* 24px */
    --fs-3xl: 1.25rem; /* 36px */
    --fs-4xl: 2.5rem; /* 48px */
    --fs-5xl: 3rem; /* 64px */
    --fs-6xl: 5.25rem; /* 84px */
    --fs-7xl: 6rem; /* 96px */
  }

  .heading1 {
    font-weight: var(--fw-b);
    font-size: var(--fs-5xl);
    margin-bottom: 2rem;
  }

  .heading2 {
    margin-bottom: 1.5rem;
    color: var(--green-500);
    font-weight: var(--fw-b);
    font-size: var(--fs-4xl);
  }

  .section-padding-h-l {
    padding-block: 5rem;
  }
  .section-padding-h-m {
    padding-block: 3rem;
  }
}

@media (min-width: 1200px) {
  :root {
    /*           */
    /* FONT SIZE */
    /*           */
    --fs-xs: 0.75rem; /* 12px */
    --fs-s: 0.875rem; /* 14px */
    --fs-m: 1rem; /* 16px */
    --fs-l: 1.125rem; /* 18px */
    --fs-xl: 1.25rem; /* 20px */
    --fs-2xl: 1.5rem; /* 24px */
    --fs-3xl: 2.25rem; /* 36px */
    --fs-4xl: 3rem; /* 48px */
    --fs-5xl: 4rem; /* 64px */
    --fs-6xl: 5.25rem; /* 84px */
    --fs-7xl: 6rem; /* 96px */
  }

  .heading1 {
    font-weight: var(--fw-b);
    font-size: var(--fs-5xl);
    margin-bottom: 4rem;
  }

  .heading2 {
    margin-bottom: 1.5rem;
    color: var(--green-500);
    font-weight: var(--fw-b);
    font-size: var(--fs-4xl);
  }

  .section-padding-h-l {
    padding-block: 6rem;
  }
  .section-padding-h-m {
    padding-block: 3rem;
  }
}