:root{
    --color-primary: hsl(240, 80%, 60%);
    --color-primary-invert: hsl(0, 0%, 100%);
    --color-primary-hover: hsl(240, 80%, 55%);
    --color-primary-light: hsl(220 , 80% , 65%);
    --color-primary-dark: hsl(245 , 80% , 32%);
    --color-success: hsl(158, 80%, 45%);
    --color-warning: hsl(35, 90%, 60%);
    --color-danger: hsl(0, 70%, 55%);
    --color-text : hsl(210 , 15% , 10%);
    --color-text-muted : hsl(210 , 15% , 45%);
    --color-surface : hsl(0,0%,100%);
    --color-background : hsl(210,20%,95%);
    --color-border : hsl(210, 15%, 88%);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs : 14px;
    --font-size : 17.5px;
    --font-size-md : 19px;
    --font-size-lg : 21px;
    --font-size-xl : 28px;
    --font-size-2xl : 44px;
    --font-size-3xl : 61px;
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 64px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 32px;
    --breakpoint-xs: 350px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --button-size : 40px;
}

@font-face {
    font-family: roboto;
    src: url(../font/Roboto/Roboto-VariableFont_wdth\,wght.ttf);
}
@font-face {
    font-family: roboto_condensed;
    src: url(../font/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf);
}
@font-face {
    font-family: roboto_slab;
    src: url(../font/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf);
}
@font-face {
    font-family: manrope;
    src: url(../font/Manrope/Manrope-VariableFont_wght.ttf);
}

html , main , body {
    background: var(--color-background);
    color: #000000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 , h2 , h3 , h4 , h5 , h6 { font-family : manrope , sans-serif}

.h1 { font-size: var(--font-size-3xl); line-height: 1.05; margin: 0 0 var(--space-4) 0; }
.h2 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-3) 0; }
.h3 { font-size: var(--font-size-xl); margin: 0 0 var(--space-3) 0; }

.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline-offset: 2px; }
:focus-visible { box-shadow: 0 0 0 3px rgba(32, 64, 255, 0.12); border-radius: var(--radius-sm); }

main > section {
    margin-bottom: var(--space-7);
}
form textarea , form input {
    max-width: 450px;
    resize: vertical;
    max-height: 500px;
}