@font-face {
    font-family: "inter";
    src: url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
    font-weight: 400;
}




@font-face {
    font-family: "work-sans";
    src: url("../fonts/WorkSans-VariableFont_wght.woff2") format("woff2");
    font-weight:900;
}

:root {
    /* Colors */
    --cl-primary-900: hsl(0, 100%, 50%);
    --cl-primary-500: hsl(0, 100%, 70%);
    --cl-primary-200: hsl(0, 100%, 90%);
 
    --cl-accent-900: hsl(328, 100%, 22%);
    --cl-accent-500: hsl(328, 100%, 60%);
    --cl-accent-200: hsl(328, 100%, 80%);

    --cl-neutral-900: hsl(0, 0%, 10%);
    --cl-neutral-200: hsl(0, 0%, 90%);
    --cl-neutral-100: hsl(0, 0%, 100%);

    /* Fonts */
    --font-basic: "inter", "system-ui", sans-serif;
    --font-basic-700: "inter", "system-ui", sans-serif;
    --font-accent: "work-sans", "system-ui", sans-serif;

    /* max-width */
    --maxWidth: 80rem;

    /* animation to keywords */
    interpolate-size: allow-keywords;
}

.fc-primary-900 {
    color: var(--cl-primary-900);
}

.fc-primary-500 {
    color: var(--cl-primary-500);
}

.fc-primary-200 {
    color: var(--cl-primary-200);
}
.fc-accent-900{
    color: var(--cl-accent-900)
}

.fc-accent-500 {
    color: var(--cl-accent-500);
}

.fc-accent-200 {
    color: var(--cl-accent-200);
}

.fc-neutral-100 {
    color: var(--cl-neutral-100);
}

.ff-accent {
    font-family: var(--font-accent);
}

/* TypeScale 1.2 */

.fs-xxxl,h1{
    font-size: 2.986rem;
    line-height: 1;
    font-family: var(--font-accent);
    margin-top:2rem;
    margin-bottom:1rem;
    
   
}

.fs-xxl, h2 {
    font-size: 2.488rem;
    line-height: 1.1;
    font-family: var(--font-accent);
   margin-top:1.75rem;
    margin-bottom:0.875rem;
    
}

.fs-xl, h3 {
    font-size: 2.074rem;
    line-height: 1.2;
    font-family: var(--font-accent);
    margin-top:1.5rem;
    margin-bottom:0.75rem;
}

.fs-l, h4 {
    font-size: 1.728rem;
    line-height: 1.3;
    font-family: var(--font-accent);
    margin-top:1.25rem;
    margin-bottom: 0.5rem;
}

.fs-m, h5 {
    font-size: 1.44rem;
    line-height: 1.4;
    font-family: var(--font-accent);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.fs-p, p{
    font-size:1rem;
    line-height: 1.6 rem;
    font-family: var(--font-basic);
    margin-top: 0;
    margin-bottom: 1rem
}
.fs-s, small {
    font-size: 0.833rem;
    font-family: var(--font-basic);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    
}

.bg-primary-900 {
    background-color: var(--cl-primary-900);
}

.bg-primary-500 {
    background-color: var(--cl-primary-500);
}

.bg-primary-200 {
    background-color: var(--cl-primary-200);
}

.bg-accent-900 {
    background-color: var(--cl-accent-900);
}

.bg-accent-500 {
    background-color: var(--cl-accent-500);
}

.bg-accent-200 {
    background-color: var(--cl-accent-200);
}

.bg-neutral-900 {
    background-color: var(--cl-neutral-900);
}

.bg-neutral-200 {
    background-color: var(--cl-neutral-200);
}

.bg-neutral-100 {
    background-color: var(--cl-neutral-100);
}

.padding-100 {
    padding-block: 1rem;
}

.padding-200 {
    padding-block: 2rem;
}

.padding-300 {
    padding-block: 4rem;
}

body {
    color: var(--cl-neutral-900);
    margin: 0;
    font-family: var(--font-basic);
    line-height: 1.6;
    font-optical-sizing: auto;
}

strong,
b {
    font-family: var(--font-basic-700);
}

.wrapper {
    max-inline-size: var(--maxWidth); /* logische Variante */
    max-width: var(--maxWidth);
    margin-inline: auto; /* links und rechts */
    padding-inline: 1rem;
    box-sizing: border-box;
}

.cta-button {
    text-decoration: none;
    color: var(--cl-neutral-100);
    background-color: var(--cl-primary-900);
    font-family: var(--font-accent);
   
    display: inline-flex;
    padding: 8px 16px;
    inline-size: fit-content;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    gap: 1rem
}

img,
video,
svg {
    display: block;
    max-inline-size: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

html {
    scroll-behavior: smooth;
}

.flex {
    display: flex;
    gap: 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
}


    

@media screen and (width > 60rem) {
    /* type Scale 1.309 */
    .fs-xxxl, h1 {
        font-size: 5rem;
        font-weight: 900;
        font-family: var(--font-accent);
        
    }
    .fs-xxl, h2 {
        font-size: 3.813rem;
        font-weight: 900;
        font-family: var(--font-accent);
        
    }
    .fs-xl, h3 {
        font-size: 2.938rem;
        font-weight: 900;
        font-family: var(--font-accent);
    }
    .fs-l, h4 {
        font-size: 2.25rem;
        font-weight: 900;
    }
    .fs-m, h5 {
        font-size: 1.688rem;
        font-weight: 900;
        font-family: var(--font-accent);
    }
    .fs-p{
        font-size: 1rem;
    }
    .fs-s {
        font-size: 0.75rem;
    }
}