:root{
    /* typography */
    --body-font: "Inter", sans-serif;
    --body-weight: 400;
    --body-lineheight: 2.7rem;

    --title-font: "Crimson Text", serif;
    --title-weight: 400;

    --html-size: 10px;
    --body-size: 1.5rem;
    --h1-font-size: 4.8rem;
    --h2-font-size: 3.2rem;
    --h3-font-size: 2.8rem;
    --h4-font-size: 2.4rem;
    --h5-font-size: 1.8rem;
    --h6-font-size: 1.5rem;
    
    --semilarge-font-size: 2.1rem;
    --small-font-size: 1.4rem;
    
    /* colors */
    --primary-hue: 172;
    --primary-saturation: 88%;
    --primary-lightness: 14%;
    --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: 40;
    --primary-alt-saturation: 60%;
    --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: 40;
    --secondary-saturation: 60%;
    --secondary-lightness: 50%;
    --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: 0;
    --text-saturation: 0%;
    --text-lightness: 25%;
    --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: 172;
    --title-saturation: 88%;
    --title-lightness: 14%;
    --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: var(--primary-hue);
    --body-saturation: var(--primary-saturation);
    --body-lightness: var(--primary-lightness);
    --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), var(--btn-opacity));

    --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), var(--btn-opacity));

    --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: 1.6rem;
    --btn-lineheight: 2.4rem;
    --btn-font-weight: 700;
    --btn-radius: 2.3rem;
    --btn-min-width: unset;
    --btn-border-width: 1px;
    --btn-padding-t: calc( .8rem - var(--btn-border-width) );
    --btn-padding-r: calc( 3rem - var(--btn-border-width) );
    --btn-padding-b: calc( .6rem - var(--btn-border-width) );
    --btn-padding-l: calc( 3rem - var(--btn-border-width) );

    /* margins */
    --mb-1: 2rem;
    --mb-2: 4rem;
    --mb-heading: 8rem;

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

    /* grid */
    --grid-margin: -2rem;
    --grid-padding: 2rem;
    --grid-width: calc( 116rem + var(--grid-padding) * 2 );
    --grid-width-wide: calc( 192rem + var(--grid-padding) * 2 );
}

.wp-block-button .wp-block-button__link{width: auto; height: auto}


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: 12rem;
    }
    .scroll-header{
        --header-height: 8rem;
    }

    #ps2id-dummy-offset{height: 12rem}
}
@media (max-width: 1199px){
    #ps2id-dummy-offset{height: calc( var(--header-height) + 2rem )}
}
@media (max-width: 1023px){
    :root{
        --h1-font-size: 3.2rem;
        --h2-font-size: 2.6rem;
        --h3-font-size: 2.4rem;
        --h4-font-size: 2.1rem;
    }
}