/* style */
@import url(constants.css);
@import url(fonts.css);
@import url(normalize.css);

/* elements */
@import url(elements/button.css);
@import url(elements/link.css);
@import url(elements/list.css);

/* general */
@import url(general/button.css);
@import url(general/icon.css);
@import url(general/link.css);
@import url(general/visibillity.css);

/* components */
@import url(components/footer.css);
@import url(components/header.css);
@import url(components/info.css);
@import url(components/main.css);
@import url(components/stars.css);

/* cosmos */
@import url(components/cosmos/cosmos.css);
@import url(components/cosmos/orbit.css);
@import url(components/cosmos/planet.css);

/* legend */
@import url(components/legend/legend.css);
@import url(components/legend/accordion.css);
@import url(components/legend/definition-list.css);


body {
    font-family: 'Ubuntu';
    color: var(--color-white);
    background-color: var(--color-black);
    /* bodytext  */
    font-size: 23px;
    line-height: 1.3;
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 18px;
    }
}


/* Responsive (big-screen (default), desktop, tablet, mobile)

big-screen 1920px - 1440px: @media screen and (max-width: 1920px)
desktop 1440px - 1024px: @media screen and (max-width: 1440px)
tablet 1024px - 768px: @media screen and (max-width: 1024px) 
mobile 768px - 320px: @media screen and (max-width: 768px) 

*/