/****************************************************
 * Global Constants
 ***************************************************/
:root {
    --primary: #e36973;
    --secondary: #86e5e7;
    --tertiary: #fcd6a5;
    --accent: #a8edb0;
    --text: #323c49;
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

html, body {
	font: 400 12px 'Muli', sans-serif !important;
    background-image: url('bg.jpg');
    background-attachment: scroll;
    background-repeat: repeat;
	background-color: #ffffff;
	line-height: 30px !important;
    text-align: justify;
	color: var(--text) !important;
	letter-spacing: 1px;
	margin: 0px;
}

a:link, a:active, a:visited {
	background-color: rgba(255,255,255,0.2);
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	text-decoration: none;
	font-weight: 600;
	color: var(--primary);
}
a:hover { color: var(--secondary); }

b { color: var(--primary); }
i { color: var(--secondary); }
u { font-weight: 600; color: var(--tertiary); }
em { color: var(--accent); }
strong { color: #5c5f65; }
strike, del { color: rgba(255,255,255,0.5); }



/* Blockquote
---------------------------------------------------------------------------*/
blockquote  {
	font: italic 400 18px 'Playfair Display', serif;
	background-color: color-mix(in srgb, var(--secondary) 10%, transparent);
	padding: 1% 2% 1% 5%;
	border-radius: 10px;
	position: relative;
	line-height: 30px;
	margin: 2% auto;
	max-width: 85%;
	color: var(--text);
	z-index: 15;
	width: 80%;
}
blockquote:after {
	font: 600 80px 'Playfair Display', serif;
	top: 0; bottom: 0; left: -26px;
	background-color: color-mix(in srgb, var(--primary) 100%, transparent);
	margin: auto 0 auto -10px;
	padding: 3px 3px 3px 3px;
	border-radius: 80px;
	position: absolute;
	line-height: 100%;
	content: '\201C';
	color: #ffffff;
	padding: 15px;
	height: 60px;
	z-index: 25;
}

blockquote p {
	position: relative;
	z-index: 10;
}


/* Header
---------------------------------------------------------------------------*/
header {
    background-image: url('header.png');
    background-repeat: no-repeat;
    height: 1050px;
    width: 1920px;
    top: 0;
}


/* Main
---------------------------------------------------------------------------*/


/* Footer
---------------------------------------------------------------------------*/
footer {
    background-image: url('footer.png');
    background-position: top center;
    background-repeat: no-repeat;
}