:root{
    --clr-dark: #292929;
    --clr-grey: #2e2c2c1b;
    --clr-light: #fecea8;
    --clr-header: #99b898;

    --dark: #191a1b;
    --text:#ffffff;
    --utilites: #a8b5a2;

    /* size */
    --size-xxs: 0.5rem;
    --size-xs: 0.75rem;
    --size-sm: 0.875rem;
    --size-md: 1rem;
    --size-lg: 1.125rem;
    --size-xl: 1.25rem;
    --size-2xl: 1.5rem;
    --size-3xl: 1.875rem;
    --size-4xl: 2.25rem;
    --size-5xl: 3rem;
    --size-6xl: 3.75rem;
    --size-7xl: 4.5rem;
}
*{
    margin: 0;
    line-height: calc(1em + 0.9rem);
}

html{
    scroll-behavior: smooth;
}

body{
   font-family: "Roboto Mono", monospace;
   background-color: var(--dark);
   color: var(--text);
   font-weight: 350;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

img,
svg,
video,
canvas,
picture{
    display: block;
}

button{
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

ul{
    list-style: none;
}

blockquote{
    display: flex;
    border-left: 2px solid var(--clr-light);
    padding-left: 1rem;
    margin: 1rem 0;
}

@keyframes fadeIn{
    from{ opacity: 0; transform: translateY(8px); }
    to  { opacity: 1; transform: translateY(0); }
}