/* CSS Document */

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import "header.css";
@import "footer.css";
@import "slider.css";
@import "form.css";
@import "checkbox.css";

:root {
	--global-width: 90%;
	--global-max-width: 1500px;

	--font-family: "Raleway", sans-serif;
	--companycolor: #A6459A;
	--companycolor-second: #B959AD;
}

html { box-sizing: border-box; }
*, *::after, *::before { box-sizing: inherit; }
html, body { scroll-behavior: smooth; height: 100%; margin: 0; }

/**/

body {
	

	margin: 0;
	padding: 0;

	background: white;

	font-family: var(--font-family);
	font-size: 1em;
	line-height: 1.2em;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
	text-align: left;
	color: grey;

	background-image: url(../img/layout/bg.webp);
	background-attachment: fixed;
}

/* tools and behaviors */

img { border: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--companycolor-second); text-decoration: none; text-shadow: 0 0 2px var(--companycolor); }
a:active, a:focus { outline: 0; }

a, a:hover, img, input { transition: .5s; }

/**/

h1 {
	display: flex;
	justify-content: start;

	margin: 0;

	font-size: 220%;
	line-height: 120%;
	text-transform: uppercase;
	color: var(--companycolor);
}

h1 img {
	margin-right: 10px;

	width: 25px;

	filter: brightness(0) saturate(100%) invert(37%) sepia(9%) saturate(4526%) hue-rotate(259deg) brightness(95%) contrast(88%);
}


/* layout */

main {
	position: relative;

	width: 100%;
	height: 100vh;
}

main #randomImage {
	width: 100%;
	height: 100%;

	object-fit: cover;

	filter: blur(5px) opacity(0.3);
}

main .logo {
	z-index: 1;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;

	margin: auto;

	width: 60%; max-width: 400px;
	height: auto;

	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/**/

section {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
}

article {
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 50%;
	min-height: 100vh;
}

section > article:last-child {
	background-image: url(../img/layout/bg-image.webp);
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

article > div {
	margin-left: 160px;
	padding-top: 50px;
	padding-right: 50px;
	padding-bottom: 50px;

	max-width: 500px;
}

article > img {
	display: block;
	
	width: 100%;
	min-height: 100vh;

	object-fit: cover;

	mask-image: url(../img/layout/mask.webp);
	mask-size: 100% 100%;
	mask-position: 50% 50%;
	mask-repeat: no-repeat;
}

@media only screen and (max-width: 768px) {
	body { font-size: 1em; }

	section, article { display: block; }
	article { width: 100%; min-height: auto; box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.3); }
	article > div { margin-left: 85px; max-width: 100%; }
	article > img { min-height: 350px; mask-image: none; }
}