@font-face {
    font-family: Headline;
    src: url("fonts/josefin-sans-bold.ttf");
    font-weight: 700;

}
@font-face {
    font-family: Fira Sans;
    src: url("fonts/fira-sans.woff2") format('woff2');
    font-weight: 400;

}
@font-face {
    font-family: Fira Sans;
    src: url("fonts/fira-sans-bold.woff2") format('woff2');
    font-weight: 700;

}

:root {
    
    --secondary-background-color: hsla(270, 50%, 9.4% ,1);

    --grey-100: hsla(24, 12%, 98%, 1);
    --grey-200: hsla(24, 10%, 78%, 1);
    --grey-300: hsla(24, 8%, 58%, 1);
    --grey-400: hsla(24, 6%, 38%, 1);
    --grey-500: hsla(24, 4%, 18%, 1);
    --grey-550: hsla(24, 4%, 12%, 1);
    --grey-600: hsla(24, 2%, 8%, 1);
    --grey-700: hsla(24, 1%, 2%, 1);

    --dt-standard-padding: 1rem;
    
    --panel-color1: #FEADCD;
    --panel-color2: #FFEC9E;
    --panel-color3: #7AE7B9;
    --panel-color4: #5BD2F0;
    --panel-color5: #9BE7FF;
    --panel-color6: #B9ACF2;
    
    --blue: #BCC0DC;
    --light-blue: hsla(233, 34%, 91%, 1);

    
}



/* Scroll snapping , todo make this work*/
main {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

article {
    scroll-snap-align: start;
}


h1,h2,h3 {
    font-style: bold;
    font-weight: 700;
    font-family: 'Headline', sans-serif;
}




body {
    font-family: 'Fira Sans', sans-serif; 
    font-style: normal;
    font-weight: 400;
    font-size: clamp(8px, 1.1rem, 64px); /* note, since font size dont depend on screen size this is a bit redundant */
    background-color: var(--grey-600);
    color: var(--grey-100);
    margin: 0;
    padding: 0;
    height: 100vh;
    line-height: 1.6;
    font-kerning: normal;
    overflow-wrap: break-word;
}

.dt-nav {
    position: sticky;
    top: 0;
    height: 40px;
    box-sizing: border-box;
    padding: var(--dt-standard-padding);
    background-color: var(--grey-200);
    color: var(--grey-700);
    width: 100%;
}





/* Links */

a:link {
  color: var(--grey-200);
}


a:visited {
  color: var(--grey-400);
}


a:hover {
  color: var(--grey-200);
}


a:active {
  color: var(--grey-200);
}


@media screen and (max-width: 740px) {
    h1 {
        font-size: calc(100% - 1rem);
        letter-spacing: normal;
    }
    h2 {
        font-size: calc(100% - 0.8rem);
        letter-spacing: normal;
    }
  }


/*@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--grey-600);
        color: var(--grey-200);
    }
    
    h1,h2,h3 {color: var(--grey-200);}
   
}

@media (prefers-color-scheme: light) {
    body {
        background-color: var(--grey-200);
        color: var(--grey-600;
    }
    
    h1,h2,h3 {color: var(--grey-600);}
}*/