/*
Theme Name: Get Praut
Theme URI: https://getpraut.nl/
Description: Get Praut - Thema
Author: Get Praut
Author URI: https://getpraut.nl/
Version: 1.0
*/

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption.alignnone{margin:0}
.wp-caption.alignleft{margin:0 15px 15px 0}
.wp-caption.alignright{margin:0 0 15px 15px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:100%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

/* Custom CSS
-------------------------------------------------------------- */

:root{
    /*kleuren*/
	--black-100: #1f1f1f;
    --blue-100: #2f3e4e;
    --white-100: #F7F8F6;
    --goud-100: #7A6C53;
    --goud-200: #8A7A5E;
	
	/*tekst*/
	/*font-kleuren wit*/
	--font-clr-white-100: hsl(0deg 0% 100% / 1);
	--font-clr-white-90: hsl(0deg 0% 100% / 0.9);
	--font-clr-white-80: hsl(0deg 0% 100% / 0.8);
	--font-clr-white-70: hsl(0deg 0% 100% / 0.7);
	--font-clr-white-60: hsl(0deg 0% 100% / 0.6);
	--font-clr-white-50: hsl(0deg 0% 100% / 0.5);
	--font-clr-white-40: hsl(0deg 0% 100% / 0.4);
	--font-clr-white-30: hsl(0deg 0% 100% / 0.3);
	--font-clr-white-20: hsl(0deg 0% 100% / 0.2);
	
	/*font-kleuren zwart*/
	--font-clr-black-100: hsl(0deg 0% 0% / 1);
	--font-clr-black-90: hsl(0deg 0% 0% / 0.9);
	--font-clr-black-80: hsl(0deg 0% 0% / 0.8);
	--font-clr-black-70: hsl(0deg 0% 0% / 0.7);
	--font-clr-black-60: hsl(0deg 0% 0% / 0.6);
	--font-clr-black-50: hsl(0deg 0% 0% / 0.5);
	--font-clr-black-40: hsl(0deg 0% 0% / 0.4);
	--font-clr-black-30: hsl(0deg 0% 0% / 0.3);
	--font-clr-black-20: hsl(0deg 0% 0% / 0.2);
	
	/*font-families*/
	--inter: "inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --space-grotesk: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	/*font grotes*/
	font-size:17px;
	
	--font-size-xxxl: 3em;
	--font-size-xxl: 42px;
	--font-size-xl: 28px;
	--font-size-lg: 20px;
	--font-size-md: 1rem;
	--font-size-sm: 0.8em;
	
	/*spacing*/
	--spacing-xxxl: 6.778rem;
	--spacing-xxl: 4.236rem;
	--spacing-xl: 2.618rem;
	--spacing-lg: 1.618rem;
	--spacing-md: 1rem;
	--spacing-sm: 0.618rem;
	--spacing-xs: 0.382rem;
}

h1, h2, h3{ font-family: "Space Grotesk", sans-serif;}

h1{
    font-size: var(--font-size-xxl);
    font-weight: 600;
    color: var(--black-100);
    line-height: 1.2;
}

h2{
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--black-100);
    line-height: 1.3;
}

h3{
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--blue-100);
    line-height: 1.4;
}

p{
    font-family: var(--inter);
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--black-100);
}

a:link {
    font-family: var(--inter);
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--goud-100);
}

a:hover{
    text-decoration: underline;
}

a:visited{
    color: #7a5f53;
}