:root { --font-size: 1rem; }
body { margin: 0; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url('background.svg'); background-repeat: no-repeat; background-size: cover; }
::selection { background: transparent; color: #fff; }
::-moz-selection { background: transparent; color: #fff; }
a { color: #374956; text-decoration: underline; }
a:hover { color: #7b24e8; text-decoration: none; }
.bothcolumns { display: flex; height: 100%; width: 100%; }
.col { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.col.left { background-color: #7b24e8; background-image: url('background.gif'); background-repeat: repeat; box-shadow: 8px 0 45px #ccc; }
.col.left h2 { color: #fff; }
.col.right h2 { font-family: monospace; }
.col.right .padding { padding: 60px; max-width: 580px; }
@media only screen and (max-width: 900px)
{
	body { align-items: normal; }
	.bothcolumns { display: block; height: auto; }
	.col { flex: none; height: auto; }
	.col.left h2 { margin: 20px; }
	.col.right .padding { padding: 50px 30px 25px 30px; }
}
@media (prefers-color-scheme: dark)
{
	body { background-image: none; }
	a { color: #c8d1d8; }
	.col.left { box-shadow: none; }
}