/* alternate g for neue kabel */
@font-face {
    font-family: "neue-kabel";
    src: url("https://use.typekit.net/yny7vbb.css");
}

@font-feature-values "neue-kabel"{
    @styleset{
        alt-g: 12;
        alt-l: 14;
    }
}

/* alterate sofia pro all chars */
@font-face {
    font-family: "sofia-pro";
    src: url("https://use.typekit.net/yny7vbb.css");
}

@font-feature-values "sofia-pro"{
    @styleset{
        alt-chars: 1;
    }
}

*{
    border: 0;
    margin: 0;
    padding: 0;
    /* outline: 2px solid greenyellow; */
}

:root{
    --blue-400: #7365ad;
    --blue-600: #544888;
    --yellow-400: #f2c719;
    --yellow-600: #d3aa2a;
    --white-400: #e1e2e1;
    --white-600: #c1c6c6;
    --black-400: #2c2630;
    --black-600: #201c23;

    --ff-title: "neue-kabel", sans-serif;
    --ff-body: "sofia-pro", sans-serif;

    --fw-thin: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-100: 1rem;
    --fs-200: 1.25rem;
    --fs-300: 1.5rem;
    --fs-400: 1.75rem;
    --fs-500: 2rem;
    --fs-550: 2.25rem;
    --fs-600: 2.5rem;
    --fs-700: 3rem;
    --fs-1000: 5rem;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
}

/* text sizes and styles */
h2, h3{
    font-family: var(--ff-title);
    font-variant-alternates: styleset(alt-g);
}

h3 {
    font-size: var(--fs-300);
    font-weight: 700;
}

h2 {
    font-size: var(--fs-500);
    font-weight: 700;
}

p, li, ul{
    font-family: "sofia-pro", sans-serif;
    font-variant-alternates: styleset(alt-chars);
    line-height: 1;
    font-size: var(--fs-400);
    text-wrap: pretty;
}

@media screen and (max-width: 600px){
    p, li, ul{
        font-size: var(--fs-300)
    }
}

@media screen and (max-width: 400px){
    h2{
        font-size: var(--fs-400)
    }
    p, li, ul{
        font-size: var(--fs-200);
    }
}