:root {

    /* sizes */
    --headerHeight: 39px; /* 39px is hypothesis toolbar height, older: 3rem */
    --wrapperWidth: 660px;
    --asideWidth: 300px;

    /* colors */
    --colorFirst: #FFFFFF;
    --colorSecond: #EEEEEE;
    --colorThird: #DDDDDD;
    --colorFourth: #CCCCCC;
    
    --colorLight: #999999;
    --colorMedium: #666666;
    --colorDark: #333333;

    /*fontsizes */
    --fontsizeXSmall: 0.80rem;
    --fontsizeSmall: 0.90rem;
    --fontsizeMedium: 1rem;
    --fontsizeLarge: 1.7rem;
    --fontsizeXLarge: 2.0rem;
    --fontsizeXXLarge: 3.4rem;

    /*fontsizes */
    --fsReference: 1.18rem;
    --fsXSmall: calc(var(--fsReference)*0.7);
    --fsSmall: calc(var(--fsReference)*0.8);
    --fsMedium: calc(var(--fsReference)*1);
    --fsLarge: calc(var(--fsReference)*1.25);
    --fsXLarge: calc(var(--fsReference)*1.50);
    --fsXXLarge: calc(var(--fsReference)*1.75);
    /*lineheights*/
    --lhReference: 1.64rem;
    --lhXSmall: calc(var(--lhReference)*0.7);
    --lhSmall: calc(var(--lhReference)*0.8);
    --lhMedium: calc(var(--lhReference)*1);
    --lhLarge: calc(var(--lhReference)*1.06);
    --lhXLarge: calc(var(--lhReference)*1.20);
    --lhXXLarge: calc(var(--lhReference)*1.55);

}