/* Fonts */
@font-face {
	font-family: 'IBMPlexMonoRegular';
	src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
		url('/fonts/IBMPlexMono-Regular.woff') format('woff'),
		url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'IBMPlexMonoThin';
	src: url('/fonts/IBMPlexMono-Thin.woff2') format('woff2'),
		url('/fonts/IBMPlexMono-Thin.woff') format('woff'),
		url('/fonts/IBMPlexMono-Thin.ttf') format('truetype');
	font-weight: thin;
	font-style: normal;
}

/* Custom variables */
:root {
	color-scheme: light dark;
	--light-bg: #FFFFFF;
	--light-color: #FFFFFF;
	--dark-bg: #000000;
	--dark-color: #000000;
	--accent: #FF00F0;
	--accent-op: #FF00F03F;
	--accent-op: #FF00F03F;
	--width-left: 12rem;
}

@media (prefers-color-scheme: light) {
	body a {
		background-color: var(--light-bg);
		color: var(--dark-color);
	}
}

@media (prefers-color-scheme: dark) {
	body a {
		background-color: var(--dark-bg);
		color: var(--light-color);
	}
}

@media (prefers-color-scheme: light) {
	.exp {
		background-color: var(--light-bg);
		color: var(--dark-color);
	}
}

@media (prefers-color-scheme: dark) {
	.exp {
		background-color: var(--dark-bg);
		color: var(--light-color);
	}
}

video {
	width: 100%;
}

/* Video controls */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video::-moz-fullscreen-button {
    display: none !important;
}

body {
	font-family: 'IBMPlexMonoRegular', sans-serif;
	margin: 0;
}

h1 {
	margin-top: 0;
	text-transform: uppercase;
}

p {
	text-align: justify;
}

.sign {
	font-size: 10rem;
	margin: 0;
	padding: 0;
	opacity: 100%;
}

.container {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.sidebar {
	height: 100%;
	width: var(--width-left);
	padding: 0;
	margin: 0;
	vertical-align: top;
	position: relative;
}

ul {
	list-style-type: none;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 20px 0px 0px 0px;
}

.sidebar li {
	font-size: 1rem;
	transition: 0.5s;
}

.sidebar li:hover {
	color: var(--accent);
}

.contacts {
	width: 100%;
	margin-bottom: 0;
	position: absolute;
	bottom: 4vh;
	text-transform: uppercase;
}

a {
	text-decoration: none;
	font-size: 1rem;
}

a:hover {
	transition: 0.5s;
	color: var(--accent);
}

.contacts p {
	margin: 0;
	text-align: center;
}

.pane {
	height: 100%;
	flex-grow: 1;
	width: auto;
	width: var(--width-right);
	padding: 0; 
	margin: auto;
	font-size: 1rem;
	position: relative;
	overflow: hidden;
}

.footer {
	width: 100%;
	text-align: right;
}

.exp {
	width: 100%;
	height: 10vh;
	position: absolute;
	z-index: 2;
	background: var(--accent-op);
}

.header-item {
	/*background: linear-gradient(rgba(0,0,0,255), rgba(0,0,0,0));*/
	top: 0;
}

.footer-item {
	/*background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,255));*/
	bottom:0;
}

.footer-item .sign {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}

.list {
	height: 80vh;
	width: 100%;
	font-size: 1rem;
	z-index: 1;
  	overflow-y: scroll;
	padding: 10vh;
	padding-left: 0;
}

.item {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-bottom: 3rem;
}

.right-align {
	flex-direction: row-reverse;
}

.left-col {
	width: 50%;
}


.right-col {
	width: 50%;
}

.right-align > .left-col h1 {
	text-align: right;
}