@font-face {
    font-family: 'Muli';
    src: local('Muli Light'), local('Muli-Light'),
        url('../fonts/Muli-Light.woff2') format('woff2'),
        url('../fonts/Muli-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli Light Italic'), local('Muli-LightItalic'),
        url('../fonts/Muli-LightItalic.woff2') format('woff2'),
        url('../fonts/Muli-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli Regular'), local('Muli-Regular'),
        url('../fonts/Muli-Regular.woff2') format('woff2'),
        url('../fonts/Muli-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli Italic'), local('Muli-Italic'),
        url('../fonts/Muli-Italic.woff2') format('woff2'),
        url('../fonts/Muli-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli SemiBold'), local('Muli-SemiBold'),
        url('../fonts/Muli-SemiBold.woff2') format('woff2'),
        url('../fonts/Muli-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli SemiBold Italic'), local('Muli-SemiBoldItalic'),
        url('../fonts/Muli-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Muli-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli Bold'), local('Muli-Bold'),
        url('../fonts/Muli-Bold.woff2') format('woff2'),
        url('../fonts/Muli-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli Bold Italic'), local('Muli-BoldItalic'),
        url('../fonts/Muli-BoldItalic.woff2') format('woff2'),
        url('../fonts/Muli-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli ExtraBold'), local('Muli-ExtraBold'),
        url('../fonts/Muli-ExtraBold.woff2') format('woff2'),
        url('../fonts/Muli-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: local('Muli ExtraBold Italic'), local('Muli-ExtraBoldItalic'),
        url('../fonts/Muli-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Muli-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

:root{
    /* typography */
    --body-font: 'Muli', sans-serif;
    --body-weight: 400;
    --body-lineheight: 2rem;

    --title-font: 'Muli', sans-serif;
    --title-weight: 700;

    --html-size: 16px;
    --body-size: 1.25rem;
    --h1-font-size: 1.9rem;
    --h2-font-size: 1.8rem;
    --h3-font-size: 1.7rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.3125rem;
    --h6-font-size: 1.125rem;

	/* vana stiil
	--html-size: 16px;
    --body-size: 1.25rem;
    --h1-font-size: 2.625rem;
    --h2-font-size: 2.25rem;
    --h3-font-size: 2.25rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.3125rem;
    --h6-font-size: 1.125rem; 
	*/
	
    --giant-font-size: 6.25rem;
    --semilarge-font-size: 1.875rem;
    --small-font-size: 1rem;
    
    /* colors */
    --primary-hue: 192;
    --primary-saturation: 8%;
    --primary-lightness: 24%;
    --primary-opacity: 1;
    --primary-color-code: var(--primary-hue), var(--primary-saturation), var(--primary-lightness);
    --primary-color: hsla(var(--primary-color-code), var(--primary-opacity));

    --primary-alt-hue: 192;
    --primary-alt-saturation: 8%;
    --primary-alt-lightness: 50%;
    --primary-alt-opacity: 1;
    --primary-color-alt: hsla(var(--primary-alt-hue), var(--primary-alt-saturation), var(--primary-alt-lightness), var(--primary-alt-opacity));

    --secondary-hue: 182;
    --secondary-saturation: 80%;
    --secondary-lightness: 24%;
    --secondary-opacity: 1;
    --secondary-color-code: var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness);
    --secondary-color: hsla(var(--secondary-color-code), var(--secondary-opacity));
    --secondary-color-alt: hsla(var(--secondary-hue), var(--secondary-saturation), 100%, var(--secondary-opacity));

    --text-hue: 192;
    --text-saturation: 8%;
    --text-lightness: 24%;
    --text-opacity: 1;
    --text-color: hsla(var(--text-hue), var(--text-saturation), var(--text-lightness), var(--text-opacity));
    --text-color-light: hsla(var(--text-hue), var(--text-saturation), 50%, var(--text-opacity));

    --title-hue: 192;
    --title-saturation: 8%;
    --title-lightness: 24%;
    --title-opacity: 1;
    --title-color: hsla(var(--title-hue), var(--title-saturation), var(--title-lightness), var(--title-opacity));

    --input-color: var(--text-color);
    --placeholder-color: var(--text-color);
    --input-border: hsl(0, 0%, 75%);

    --body-hue: 0;
    --body-saturation: 0%;
    --body-lightness: 97%;
    --body-opacity: 1;
    --body-color: hsla(var(--body-hue), var(--body-saturation), var(--body-lightness), var(--body-opacity));

    --dark-lightness: 10%;
    --dark-color: hsla(0, 0%, var(--dark-lightness), 1);

    --white-lightness: 100%;
    --white-color: hsla(0, 0%, var(--white-lightness), 1);

    --shadow-opacity: .16;
    --shadow-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), var(--shadow-opacity));
    
    --light-gray-hue: 192;
    --light-gray-saturation: 14%;
    --light-gray-lightness: 93%;
    --light-gray-opacity: 1;
    --light-gray: hsla(var(--light-gray-hue), var(--light-gray-saturation), var(--light-gray-lightness), var(--light-gray-opacity));

    --btn-opacity: 1;
    --btn-primary-bg: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), var(--btn-opacity));
    --btn-primary-color: hsla(var(--primary-hue), var(--primary-saturation), 100%, 1);
    --btn-primary-outline-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);

    --btn-secondary-bg: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), var(--btn-opacity));
    --btn-secondary-color: hsla(var(--secondary-hue), var(--secondary-saturation), 100%, 1);
    --btn-secondary-outline-color: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);

    --btn-gray-bg: var(--light-gray);
    --btn-gray-color: var(--btn-primary-bg);
    --btn-gray-outline-color: var(--btn-primary-bg);

    /* buttons */
    --btn-font-size: 1rem;
    --btn-lineheight: 1.5rem;
    --btn-font-weight: 700;
    --btn-radius: 0;
    --btn-min-width: unset;
    --btn-border-width: 2px;
    --btn-padding-t: calc( 1.1875rem - var(--btn-border-width) );
    --btn-padding-r: calc( 1.5rem - var(--btn-border-width) );
    --btn-padding-b: calc( 1.3125rem - var(--btn-border-width) );
    --btn-padding-l: calc( 1.5rem - var(--btn-border-width) );

    /* margins */
    --mb-1: 1.25rem;
    --mb-2: 2rem;
    --mb-heading: 3.125rem;

    /* heights */
    --header-height: 5rem;

    /* grid */
    --grid-margin: -.5rem;
    --grid-padding: .5rem;
    --grid-width: calc( 98.625rem + var(--grid-padding) * 2 );
    --grid-width-wide: calc( 107.5rem + var(--grid-padding) * 2 );

    --grid-width-editor: calc( var(--grid-width) - var(--grid-padding) * 2 )
}

body.dark-theme{
    --primary-color-alt: hsl(var(--primary-alt-hue), var(--primary-alt-saturation), 75%);
    --secondary-color-alt: hsl(var(--secondary-hue), var(--secondary-saturation), 75%);
    --title-color: hsl(0, 0%, 95%);
    --text-color: hsl(0, 0%, 95%);
    --input-color: hsl(var(--primary-hue), var(--primary-saturation), 16%);

    --body-lightness: 12%;
    --body-color: hsla(var(--body-hue), var(--body-saturation), var(--body-lightness), var(--body-opacity));
    
    --dark-lightness: 95%;
    --dark-color: hsla(0, 0%, var(--dark-lightness), 1);

    --white-lightness: 25%;
    --white-color: hsla(0, 0%, var(--white-lightness), 1);

    --input-border: hsl(0, 0%, 95%);

    --shadow-color: hsla(var(--primary-hue), var(--primary-saturation), 75%, var(--shadow-opacity))
}

.has-theme-primary-color{color: var(--primary-color)}
.has-theme-secondary-color{color: var(--secondary-color)}

@media (min-width: 1200px){
    :root{
        --header-height: 8.125rem;
    }
}
@media (max-width: 1800px){
    :root{
        --html-size: 14px;
        --body-size: 1.2857142857142858rem;

        --header-height: 9.285714285714286rem;
    }
}
@media (max-width: 1199px){
    :root{
        --html-size: 12px;
        --body-size: 1.3333333333333333rem;

        --header-height: 6.666666666666667rem;
    }
}
@media (min-width: 1200px) and (max-width: 1365px){
    :root{
        --html-size: 11px;
        --body-size: 1.3333333333333333rem;
        --header-height: 89px;

        --grid-width: calc( 99.45454545454545rem + var(--grid-padding) * 2 );
    }
}
@media (max-width: 991px){
    :root{
        --html-size: 10px;
        --body-size: 1.4rem;
        --body-lineheight: 2.2rem;

        --h1-font-size: 3rem;

        --small-font-size: 1.4rem;

        --grid-margin: -1.6rem;
        --grid-padding: 1.6rem;

        --header-height: 8rem;

        --semilarge-font-size: unset;
    }
}

@media (min-width: 1200px){
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 2.0/1), only screen and (min-device-pixel-ratio: 2.0), only screen and (min-resolution: 227dpi), only screen and (min-resolution: 2.0dppx){ 
        :root{
            --html-size: 12px;
            --body-size: 1.3333333333333333rem;
    
            --header-height: 10.833333333333334rem;
        }
    }
}

@media (min-width: 1024px){
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 2.0/1), only screen and (min-device-pixel-ratio: 2.0), only screen and (min-resolution: 227dpi), only screen and (min-resolution: 2.0dppx){
        :root{
            --html-size: 10px;
            --body-size: 1.3rem;
            --body-lineheight: 2rem;

            --header-height: 8.9rem;

            --h1-font-size: 3.7rem;
            --small-font-size: 1rem;

            --grid-margin: -.8rem;
            --grid-padding: .8rem;
            --grid-width: calc( 110rem + var(--grid-padding) * 2 );
            --grid-width-wide: calc( 107.5rem + var(--grid-padding) * 2 );

            --grid-width-editor: calc( var(--grid-width) - var(--grid-padding) * 2 );

            --mb-heading: 5.1rem;
            
            --btn-lineheight: 1.3rem;
            --btn-padding-t: calc( 1.6rem - var(--btn-border-width) );
            --btn-padding-r: calc( 1.7rem - var(--btn-border-width) );
            --btn-padding-b: calc( 1.6rem - var(--btn-border-width) );
            --btn-padding-l: calc( 1.7rem - var(--btn-border-width) );
        }
    }
}