: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(237, 237, 237, 1);
  --link-hover-color: rgba(255, 204, 0, 1);

  --font-prime-color: rgba(255, 204, 0, 1);
  --font_sec_color: rgba(255, 231, 135, 1);
  --font_dark_color: rgba(28, 39, 57, 1);
  --font_white_color: rgba(237, 237, 237, 1);


  --section-max-w: 1440px;

  --btn-rad: 4px;
  --btn-pad: 4px 8px;
  --btn-prime-color: rgba(255, 204, 0, 1);
  --btn-prime-hover-color: rgba(255, 187, 0, 1);
  --btn-prime-active-color: rgba(255, 187, 0, 1);
  --btn-prime-font-color: rgba(28, 39, 57, 1);
  --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: 8px;
  --form-pad: 48px;
  --form-gap: 24px;
  --form-pad-small: 16px;
  --form-bg-color: rgba(28, 39, 57, 1);
  --form-border: 1px solid rgba(33, 48, 73, 1);
  --form-input-rad: 8px;
  --form-input-pad: 14px 16px;
  --form-input-border: 1px solid rgba(47, 72, 113, 1);
  --form-input-active-border-color: rgba(255, 231, 135, 1);
  --form-input-error-border-color: rgba(255, 0, 4, 1);
  --form-input-bg-color: rgba(24, 32, 46, 1);

  --card-bg-color:rgba(33, 48, 73, 1);
  --card-border: 1px solid rgba(47, 72, 113, 1);
  --card-border-color: rgba(47, 72, 113, 1);
  --card-pad: 16px;
  --card-rad: 8px;

  --prio-color-high: rgba(255, 0, 4, 1);
  --prio-color-medium: rgba(255, 76, 0, 1);
  --prio-color-low: rgba(0, 111, 255, 1);
}

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