@font-face {
    font-family: 'Silom';
    src: url('fonts/Silom.woff2') format('woff2'),
        url('fonts/Silom.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
	--main-color: #565294;
	--main-font: 'Silom';
	--alternate-font: 'Montserrat', sans-serif;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	font-family: var(--main-font);
}

.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	--s: 82px; /* control the size */
	--c1: #b2b2b2;
	--c2: #ffffff;
	--c3: #d9d9d9;

	--_g: var(--c3) 0 120deg,#0000 0;
	background:
		conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
		conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
		conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
		conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
		linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
		                      var(--c1) 0 calc(500%/6),var(--c2) 0);
	background-size: calc(1.732*var(--s)) var(--s);
	opacity: 0.075;
}


.main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.logo {
	position: relative;
}

.logo img.logo-main {
	position: relative;
}

.logo  img.logo-shadow {
	position: absolute;
	top: 0px;
	left: 0px;
}

h1 {
	margin-bottom: 0;
	color: var(--main-color);
	font-family: var(--main-font);
}

h2 {
	max-width: 420px;
	text-align: center;
	font-family: var(--alternate-font);
}