@font-face {
	font-family : "Arial Narrow";
	src : 	local("Arial Narrow"), local("ArialNarrow-Regular"), local("arialn"),
			url("arial-narrow.ttf") format("truetype");
	font-style : normal;
	font-weight : 400;
}

.arial-narrow {
	font-family : "Arial Narrow";
}

html {
	width : 100vw;
	height : 100vh;
}

body {
	display : flex;
	flex-direction : column;
	width : 100vw;
	height : 100vh;
	font-family : "Arial Narrow";
	padding : 0;
	margin : 0;
}

body:before {
	content : "";
	position : absolute;
	left : calc(50% - 1px);
	height : 100%;
	border-left : 2px solid #ff9851;
	z-index : 2;
}


.title {
	display : none;
}

.logo {
	position : absolute;
	height : 120px;
	left : 50%;
	top : 40px;
	background-color : white;
	border-radius : 100%;
	transform : translateX(-50%);
	box-shadow : 0 0 4px #ff9851;
	z-index : 3;
}


.main {
	position : relative;
	display : flex;
	flex-wrap : wrap;
	flex : 2;
}

.left,
.right {
	flex : 2;
	position : relative;
	display : flex;
	flex-direction : column;
	justify-content: space-between;
	gap : 5px;
	max-width : 100vw;
	font-size : 2.6em;
	font-weight : bold;
	text-align : center;
	text-transform : uppercase;
	text-decoration : none;
	padding : 40px;
	box-sizing : border-box;
	transition : font-size 0.35s;
}

.left:hover,
.right:hover {
	font-size : 3em;
}

.left {
	align-items: center;
	color : #333;
}

.right {
	align-items: center;
	color : white;
	text-shadow : 0 0 4px black;
}

.left:before,
.right:before {
	content : "";
	position : absolute;
	inset : 0;
	background : no-repeat scroll center center / cover;
	filter : grayscale(0.7);
	z-index : -1;
	transition : filter 0.5s;
}

.left:before {
	background-image : url("/logibrick.png");
}

.right:before {
	background-image : url("/infobrick.jpg");
}

.left:hover:before,
.right:hover:before {
	filter : grayscale(0);
}

.left a:visited,
.right a:visited {
	text-decoration : none;
}


.service-logo {
	height : 54px;
	background-color : white;
	padding : 15px;
	border-radius : 5px;
	box-shadow : 0 0 2px #ccc;
}


.footer {
	position : absolute;
	left : 50%;
	bottom : 4px;
	font-size : 13px;
	text-align : center;
	background-color : white;
	padding : 5px;
	border-radius : 5px;
	box-shadow : 0 0 2px #ccc;
	transform : translateX(-50%);
	z-index : 2;
}

@media (max-width:900px) {
	body:before {
		display : none;
	}
	
	.logo {
		top : 10px;
		left : 10px;
		height : 50px;
		transform : unset;
	}
	
	.main {
		flex-direction : column;
	}
}