:root {
  --white: #FFFFFF;
  --gray: #A3A3A3;
  --gray-font: #7A7A7A;
  --black: #0A0A0B;
  --black3: #242529;
  --blue: #388AFA;
  --gray2: #3A3A3A;
  --gray3: #373A43;
  --gray4: #838383;
  --green: #3FF271;
  --red: #FF4747;

  --f-large: 64px;
  --f-medium: 32px;
  --f-main: 24px;
}

* {
  font-family: 'Manrope', sans-serif;
  color: var(--white);
}

*.secondary {
  color: var(--gray-font);
}

span[role="alert"] {
  color: var(--red);
}

.form-input.error {
  border: 1px solid var(--red);
}

.center {
  text-align: center;
}

.upper {
  text-transform: uppercase;
}

h1 {
  margin: 0;
}

body {
  background: var(--black);
}

.row,
.row-between,
.column {
  display: flex;
}

.row.center {
  justify-content: center;
  width: 100%;
}

.column-center-y,
.column {
  flex-direction: column;
}

.column-center-y {
  align-items: center;
}

.row-between {
  justify-content: space-between;
  width: fit-content;
}
.error {

}
.form-input {
  font-weight: 400;
  font-size: 20px;
  padding: 16px 18px;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid var(--gray);
  backdrop-filter: blur(5.5px);
  outline: none;
}

.form-default {
  max-width: 402px;
}

.f-center{
  align-items: center;
  justify-content: center;
}

.button {
  text-align: center;
  padding: 20px;
  width: fit-content;
  font-weight: 600;
  font-size: 24px;
  border-radius: 6px;
  cursor: pointer;
}

.button.button-primary, .button-form {
  background-color: var(--white);
  color: var(--black) !important;
}

.button-accent {
  background-color: var(--blue);
  color: var(--white);
}

.button-form {
  padding: 14px 0;
  width: 100%;
}

a.link-secondary {
  color: var(--gray);
}

.main-gradient {
  background: radial-gradient(81.78% 61.56% at 92.97% 53.43%, rgba(38, 80, 228, 0.3) 51.36%, rgba(10, 10, 11, 0.3) 100%);
}

.light-text {
  font-size: var(--f-main);
  font-weight: 400;
  line-height: 36px;
}

.sub-heading {
  font-size: clamp(var(--f-main), 3vw, var(--f-medium));
  font-weight: 700;
}

.heading {
  font-size: clamp(var(--f-medium), 5vw, var(--f-large));
  font-weight: 700;
  line-height: clamp(var(--f-medium), 5vw, 84px);
}

.container {
  max-width: 1920px;
  width: 100%;
  padding: 0 136px;
}

@media screen and (max-width: 1919px) {
  .container {
    padding: 0 40px;
  }
}