:root {

	--law-color: #920728;

	--it-color: #0238ab;

	--text-color: #ffffff;

	--bg-color: #161616;

}



@font-face {

	font-family: "Hussar";

	src: url("https://lukas-dyntar.cz/fonts/HussarEkologiczne1.woff2") format("woff2");

}



html,

body {

	margin: 0;

	padding: 0;

	width: 100%;

	height: 100vh;

	overflow: hidden;

	font-family: 'Montserrat', sans-serif;

	background-color: var(--bg-color);

}



.container {

	height: 100%;

	width: 100%;

	display: flex;

	position: relative;

}



.split {

	width: 50%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1);

	cursor: pointer;

	position: relative;

}



.split::before {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0);

	transition: background-color 0.5s ease;

	z-index: 1;

	pointer-events: none;

}



.law {

	background-color: var(--law-color);

}



.it {

	background-color: var(--it-color);

}



.container:not(.middle-hover):hover .split {

	width: 45%;

}



.container:not(.middle-hover):hover .split:hover {

	width: 55%;

}



.field-info {

	text-align: center;

	color: var(--text-color);

	opacity: 0.6;

	transition: opacity 0.5s ease;

	position: relative;

	z-index: 2;

}



.container:not(.middle-hover):hover .field-info {

	opacity: 0.4;

}

.container:not(.middle-hover):hover .split::before {

	background-color: rgba(0, 0, 0, 0.25);

}



.container:not(.middle-hover) .split:hover .field-info {

	opacity: 1;

}

.container:not(.middle-hover) .split:hover::before {

	background-color: rgba(0, 0, 0, 0);

}





h2 {

	font-family: "Hussar", sans-serif;

	font-size: calc(3vw + 20px);

	margin: 0;

	font-weight: 100;

}



h3 {

	font-size: calc(1vw + 10px);

	margin: 0;

	font-weight: 400;

	opacity: 0.8;

}



.section-details {

	position: absolute;

	bottom: 40px;

	opacity: 0;

	background: rgba(0, 0, 0, 0.2);

	padding: 15px 20px;

	border-radius: 8px;

	z-index: 2;

	transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s ease;

	color: var(--text-color);

}



.law .section-details {

	left: 40px;

	text-align: left;

	transform: translateX(-110%);

}



.it .section-details {

	right: 40px;

	text-align: right;

	transform: translateX(110%);

}



.split:hover .section-details {

	opacity: 1;

	transform: translateX(0);

}





.section-details h4 {

	font-size: calc(0.8vw + 9px);

	font-weight: 700;

	margin-bottom: 10px;

}



.section-details ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.section-details li {

	font-size: calc(0.7vw + 8px);

	line-height: 1.6;

	opacity: 0.9;

}



.middle {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 10;

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

	color: var(--text-color);

	width: fit-content;

}



.photo-container {

	width: 150px;

	height: 150px;

	border-radius: 50%;

	border: 4px solid var(--text-color);

	overflow: hidden;

	margin-bottom: 20px;

	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.photo-container img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.middle h1 {

	font-size: calc(2.5vw + 20px);

	font-weight: 700;

	margin: 0;

	line-height: 1.2;

	transition: text-shadow 0.3s ease;

}



.middle h1:hover {

	text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);

}



.bio {

	font-size: calc(1vw + 10px);

	font-weight: 400;

	margin-top: 10px;

	max-width: 40ch;

	opacity: 0.9;

}



.socials {

	margin-top: 30px;

	display: flex;

	gap: 25px;

}



.socials a {

	color: var(--text-color);

	width: 32px;

	height: 32px;

	transition: transform 0.3s ease, filter 0.3s ease;

}



.socials a:hover {

	transform: scale(1.15);

	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));

}



.socials svg {

	width: 100%;

	height: 100%;

	fill: currentColor;

}



@media (max-width: 768px) {

	.container:hover .split,

	.container:hover .split:hover {

		width: 50%;

		height: 100%;

	}



	.photo-container {

		width: 90px;

		height: 90px;

		margin-bottom: 15px;

		border-width: 3px;

	}



	.middle h1 {

		font-size: 26px;

	}



	.bio {

		font-size: 14px;

		margin-top: 8px;

		max-width: 30ch;

	}



	.socials {

		margin-top: 20px;

		gap: 20px;

	}



	.socials a {

		width: 28px;

		height: 28px;

	}



	h2 {

		font-size: 24px;

	}



	.law h2 {

		margin-top: -30vh;

	}



	.it h2 {

		margin-top: 60vh;

	}



	h3 {

		font-size: 14px;

	}



	.section-details {

		display: none;

	}

}