:root {
  --bg-color: rgba(28, 39, 57, 1);
  --bg-color-dark: rgba(24, 32, 46, 1);
  --bg-color-light: rgba(33, 48, 73, 1);

  --link-color: rgba(255,255,255,1);
  --link-hover-color: rgba(46, 62, 223, 1);

  --font-prime-color: rgb(255,255,255);
  --font_sec_color: rgba(46, 62, 223, 1);
  --font_dark_color: rgba(28, 39, 57, 1);
  --font_white_color: rgba(237, 237, 237, 1);

  --section-max-w: 1440px;

  --btn-rad: 40px;
  --btn-pad: 12px 24px;
  --btn-prime-color: rgba(46, 62, 223, 1);
  --btn-prime-hover-color: rgb(84, 98, 251);
  --btn-prime-active-color: rgb(83, 96, 249);
  --btn-prime-font-color: rgb(255, 255, 255);
  --btn-secondary-border: 1px solid rgba(255, 204, 0, 1);
  --btn-secondary-color: transparent;
  --btn-secondary-hover-color: rgba(255, 231, 135, 1);
  --btn-secondary-active-color: rgba(255, 231, 135, 1);
  --btn-secondary-font-color: rgba(255, 204, 0, 1);
  --btn-third-color: rgba(255, 231, 135, 1);
  --btn-third-hover-color: rgba(255, 231, 135, 1);
  --btn-third-active-color: rgba(255, 231, 135, 1);
  --btn-third-font-color: rgba(33, 48, 73, 1);

  --form-max-w: 800px;
  --form-s-max-w: 500px;
  --form-rad: 48px;
  --form-pad: 48px;
  --form-gap: 24px;
  --form-pad-small: 16px;
  --form-bg-color: rgba(27,27,34,0.85);
  --form-border: 1px solid rgba(33, 48, 73, 1);
  --form-input-rad: 16px;
  --form-input-pad: 14px 16px;
  --form-input-border: 1px solid rgba(46, 62, 223, 1);
  --form-input-active-border-color: rgba(46, 62, 223, 1);
  --form-input-error-border-color: rgba(255, 0, 4, 1);
  --form-input-bg-color: rgba(27,27,34,0.85);

  --card-bg-color:rgba(33, 48, 73, 1);
  --card-border: 1px solid rgba(46, 62, 223, 1);
  --card-border-color: rgba(46, 62, 223, 1);
  --card-pad: 16px;
  --card-rad: 8px;
}

@media screen and (max-width: 769px) {
  :root {
  --form-pad: 32px;
  --form-pad-small: 8px;
  --form-input-pad: 8px 8px;
  }
}