@font-face {
	font-family: 'helvHead';
	src: 	url('fonts/helvHead.woff') format('woff'),
		url('fonts/helvHead.ttf') format('truetype');
}
@font-face {
	font-family: 'helvText';
	src:	url('fonts/helvText.woff') format('woff'),
		url('fonts/helvText.ttf') format('truetype');
}
a:link,
a:visited {
	color: #ffffff;
	text-decoration: none;
}
a:hover {
	color: #ffffff;
	text-decoration: underline;
}
body {
    margin: 0;
    background: white;
	display: flex;
	align-items: center;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(90deg, #ffffff 50%, #000000 50%);
    background-size: 200% 100%;
    background-position: 50% 0;
    transition: background-position 0.4s ease;
    z-index: -1;
}
body:has(#leftbox:hover)::before {
    background-position: 40% 0;
}
body:has(#rightbox:hover)::before {
    background-position: 60% 0;
}
#page {
	color: white;
	mix-blend-mode: difference;
}
#content {
	display: flex;
	height: 100vh;
	width: 100vw;
	align-items: center;
}
#leftbox {
	width: 20%;
	height: 20%;
	margin: auto;
	border: 1px solid white;
	display:flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
#leftbox:hover p {
	text-decoration: underline;
}
#rightbox {
	width: 20%;
	height: 20%;
	margin: auto;
	border: 1px solid white;
	display:flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
#rightbox:hover p {
	text-decoration: underline;
}
#title {
	position: fixed;
	top: 10px;
	left: 50%;
    transform: translateX(-50%);
	margin: 0 auto;
}
h1 {
	font-family: helvHead;
}
p {
	font-family: helvText;
	line-height: 15px;
	margin:auto;
	text-align:left;
	/* text-indent: 2em; */
}