:root,
::before,
::after
{
	/* colors */
	--red-rgb: 169, 65, 53; /* #A94135 */
	--lightBeige-rgb: 240, 219, 195; /* #F0DBC3 */
	--darkBeige-rgb: 228, 205, 176; /* #E4CDB0*/
	--black-rgb: 0, 0, 0; /* #000000 */
	--darkGray-rgb: 64, 64, 64; /* #404040 */
	--gray-rgb: 128, 128, 128; /* #808080 */
	--lightGray-rgb: 192, 192, 192; /* #C0C0C0 */
	--white-rgb: 255, 255, 255; /* #FFFFFF */

	/* hex colors */
	--red: rgb(var(--red-rgb));
	--lightBeige: rgb(var(--lightBeige-rgb));
	--darkBeige: rgb(var(--darkBeige-rgb));
	--black: rgb(var(--black-rgb));
	--darkGray: rgb(var(--darkGray-rgb));
	--gray: rgb(var(--gray-rgb));
	--lightGray: rgb(var(--lightGray-rgb));
	--white: rgb(var(--white-rgb));

	/* fonts */
	--mainFont: Asul;
	--titleFont: MedievalSharp;

	/* font weights */
	--lightFont: 400;
	--heavyFont: 700;

	/* main */
	--contentWidth: 1200px;
	--fontFamily: var(--mainFont);
	--fontSize: 15px;
	--fontWeight: var(--lightFont);
	--lineHeight: 1.7em;
	--textColor: var(--black);
	--backgroundColor: var(--lightBeige);

	/* show/hide */
	--showHide-transitionDuration: 0.5s;
	--showHide-transition: var(--showHide-transitionDuration) ease-in-out;

	/* paragraph */
	--paragraph-padding: 1em;

	/* links */
	--link-textColor: var(--red);
	--link-textDecoration: underline;

	/* buttons */
	--button-backgroundColor: var(--red);
	--button-textColor: var(--white);
	--button-padding: 15px 32px;
	--button-fontSize: 1em;
	--button-fontWeight: var(--lightFont);

	--button-disabled-filter: contrast(30%);
	--button-disabled-textColor: var(--button-textColor);
	--button-disabled-backgroundColor: var(--button-backgroundColor);

	--button-hover-flter: brightness(110%);
	--button-hover-textColor: var(--button-textColor);
	--button-hover-backgroundColor: var(--button-backgroundColor);

	/* photo carousel */
	--carousel-backgroundOpacity: 0.85;
	--carousel-maxPhotoSize: 90%;
	--carouselButton-fontSize: 1em;
	--carouselButton-size: 2em;
	--carouselButton-inset: 1em;
	--carouselButton-textColor: var(--white);
	/*--carouselButton-backgroundColor: var(--gray);*/
	--carouselButton-hoverTextColor: var(--black);
	--carouselButton-hoverBackgroundColor: var(--white);
	--carouselCapton-fontSize: 1.5em;
	--carouselCapton-textColor: var(--white);
	--carouselCapton-inset: 0.5em;

	/* fillimage*/
	--fillImage-marginV: 1em;
	--fillImage-marginH: 5%;

	/* gallery photo */
	--photoGallery-imageWidth: 90%;
	--photoGallery-maxHeight: 300px;
	--photoGallery-margin: 10px;

	--photoGallery-shadowSize: 5px;
	--photoGallery-shadowBlurSize: var(--photoGallery-shadowSize);
	--photoGallery-shadowColor: var(--gray);
	--photoGallery-shadowColorHover: var(--red);

	--photoGallery-labelTextColorRGB: var(--white-rgb);
	--photoGallery-labelTextColor: rgb(var(--photoGallery-labelTextColorRGB));
	--photoGallery-labelBackgroundRGB: var(--red-rgb);
	--photoGallery-labelBackgroundColor: rgba(var(--photoGallery-labelBackgroundRGB), 0.7);
	--photoGallery-labelBackgroundFilter: blur(2px);
	--photoGallery-labelOffsetBottom: 40px;
	--photoGallery-labelOffsetRight: 10px;
	--photoGallery-labelPaddingHorizontal: 20px;
	--photoGallery-labelPaddingVertical: 0px;
	--photoGallery-labelRibbonIndent: 10px;

	/* button to top */
	--topButton-backgroundColor: var(--button-backgroundColor);
	--topButton-textColor: var(--button-textColor);
	--topButton-padding: 15px;
	--topButton-fontSize: 2em;
	--topButton-fontWeight: var(--button-fontWeight);
	--topButton-borderRadius: 0;
	--topButton-offsetBottom: 20px;
	--topButton-offsetRight: 20px;
	--topButton-maxOpacity: 0.5;

	/* headings */
	--h1-fontSize: 4em;
	--h1-fontWeight: var(--heavyFont);
	--h1-lineHeight: 1.2em;
	--h1-textColor: var(--red);

	--h2-fontSize: 1.5em;
	--h2-fontWeight: var(--heavyFont);
	--h2-lineHeight: 1.0em;
	--h2-textColor: var(--red);

	/* quotes */
	--quote-fontSize: 30px;
	--quote-fontWeight: var(--lightFont);
	--quote-lineHeight: 1.7em;
	--quote-textColor: var(--white);
	--quote-marginLeft: 50px;

	--quote-barWidth: 10px;
	--quote-barLeft: -30px;
	--quote-barColor: var(--red);

	/* menu */
	--menu-linkColor: var(--white);
	--menu-textColor: var(--white);
	--menu-linkDecoration: none;

	/* text shadow */
	--text-shadowSize: 1px;
	--text-shadowBlurSize: 2px;
	--text-shadowColor: var(--black);

	/* inset */
	--inset-textColor: var(--white);
	--tear-top: url("../elementen/top_white.webp");
	--tear-bottom: url("../elementen/bottom_white.webp");
	--tear-height: 95px;
	--tear-margin: 50px;

	/* page menu */
	--pageMenu-height: 64px;
	--pageMenu-paddingTop: 20px;
	--pageMenu-paddingBottom: 20px;
	--pageMenu-textColor: var(--white);
	--pageMenu-backgroundColor-rgb: var(--black-rgb);
	--pageMenu-backgroundColor: rgb(var(--pageMenu-backgroundColor-rgb));
	--pageMenu-backgroundOpacity: 0.75;
	--pageMenu-fadeHeight: 20px;
	--pageMenu-linkFontSize: 1em;
	--pageMenu-linkPadding: 0.5em;
	--pageMenu-linkHoverColor: var(--red);

	/* site title */
	--siteTitle-fontFamily: var(--titleFont);
	--siteTitle-fontSize: 2em;
	--siteTitle-marginLeft: 10px;
	--siteTitle-lineHeight: var(--pageMenu-height);

	/* page menu shrink on scroll */
	--pageMenu-stickyAnimationTime: 0.5s;
	--pageMenu-stickyHeight: 30px;
	--pageMenu-stickyPaddingTop: 5px;
	--pageMenu-stickyPaddingBottom: 5px;
	--siteTitle-stickyFontSize: 1.5em;
	--pageMenu-stickyLinkFontSize: 1em;

	/* page cover */
	--cover-height: 600px;

	/* footer */
	--footer-columnCount: 3;
	--footer-backgroundColor: var(--black);
	--footer-textColor: var(--white);
	--footer-paddingBottom: 2em;

	/* social media icons */
	--socialIcon-size: 2em;
	--socialIcon-margin: 1em;

	/* partner logo's */
	--partner-width: 0.8;
	--partner-filter: grayscale(0.75);
	--partner-filterHover: none;

	/* copyright notice */
	--copyright-fontWeight: var(--lightFont);
	--copyright-fontSize: 0.75em;
	--copyright-paddingTop: 2em;

	/* flip icons */
	--flip-shadowSize: 5px;
	--flip-shadowBlurSize: var(--flip-shadowSize);
	--flip-shadowColor: var(--gray);

	--flipIcon-width: calc(var(--contentWidth) * 0.23);
	--flipIcon-marginBottom: 10px;

	--flipCover-textColor: var(--red);
	--flipCover-backgroundColor: var(--darkBeige);
	--flipCover-fontSize: 1em;

	--flipCoverImage-width: 80%;

	--flipReveal-textColor: var(--white);
	--flipReveal-backgroundColor: var(--red);
	--flipReveal-fontSize: 1em;
	--flipReveal-padding: 0.5em;

	/* contact form */
	--contactForm-fontFamily: Arial;
	--contactForm-errorTextColor: var(--red);
	--contactForm-paddingTop: 2em;

	/* z index */
	--topButton-zIndex: 100;
	--pageMenu-zIndex: 101;
	--carouselBackground-zIndex: 102;
	--carouselPhoto-zIndex: 103;
	--carouselButtons-zIndex: 104;

	/* internal use, don't touch! */
	--mobileDisplay: 0;
}