@media (prefers-color-scheme: dark) {
	body {
	background: #2e3137;
	}

	#logo, .slot {
	filter: grayscale(40%) invert(20%) contrast(200%);
	}
}

#topslit {
	background: linear-gradient(0deg, rgba(46,49,55,0) 0%, rgba(46,49,55,0.6616713579963236) 28%, rgba(46,49,55,1) 43%, rgba(46,49,55,1) 100%) !important;
}

#bottomslit {
	background: linear-gradient(180deg, rgba(46,49,55,0) 0%, rgba(46,49,55,0.6616713579963236) 28%, rgba(46,49,55,1) 43%, rgba(46,49,55,1) 100%) !important;
}

body {
	margin: 0;
	padding: 0;
}

#topslit {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	height: min(33%, calc(9 * 6em));
	width: 100%;
/*      background: rgb(46,49,55);*/
	background: linear-gradient(0deg, rgba(250,250,250,0) 0%, rgba(250,250,250,0.6616713579963236) 28%, rgba(250,250,250,1) 43%, rgba(250,250,250,1) 100%);
}

 #bottomslit {
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	height: min(33%, calc(9 * 6em));
	width: 100%;
/*      background: rgb(46,49,55);*/
	background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,0.6616713579963236) 28%, rgba(250,250,250,1) 43%, rgba(250,250,250,1) 100%);
}

.slot:not(.motd) {
	animation-name: curtain;
	animation-delay: 10s;
	animation-duration: 2.7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 1;
}

#container {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: calc(50% - 3ch);
	height: 100vh;
	width: 6ch;
	font-size: 6em;
}

.slot {
	height: 2.7ch; 
}

#logo, #col1, #col3, .slot {
	width: 2ch;
	text-align: center;
}

#logo {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 1.2em;
}

#col1 .colwrapper, #col3 .colwrapper {
	animation-duration: 8s;
	animation-iteration-count: 1;
	animation-delay: 1.6s;
	animation-timing-function: cubic-bezier(0.455, 0.030, 0.785, 1.185);
	animation-fill-mode: forwards;
	transition: opacity 2s linear;
	opacity: 0;
	
}

.colwrapper {
/*	position: absolute;*/
}

#col1 .colwrapper {
	animation-name: scrolla;
	transform: translateY(calc(-65 * 2.7ch));
}

#col3 .colwrapper {
	animation-name: scrollb;
	transform: translateY(calc(65 * 2.7ch));
}


@keyframes scrolla {
	0% {
		opacity: 0;
		transform: translateY(calc(-65 * 2.7ch));
	}

	25% {
		opacity: 1;
		transform: translateY(calc(-65 * 2.7ch));
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scrollb {
	0% {
		opacity: 0;
		transform: translateY(calc(65 * 2.7ch));
	}

	25% {
		opacity: 1;
		transform: translateY(calc(65 * 2.7ch));
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes curtain {
	to {
		opacity: 0;
	}
}