:root {
	--margin: 1.5vw;
/*	--column1: 17.5%;*/
	--column1: 30%;
/*	--column2: 25%;*/
	--column2: 0%;
/*	--column3: 25%;*/
	--column3: 37.5%;
	--column4: 32.5%;
	--announcement: 30%;
	--font: Roboto, sans-serif;
}

* {
	font-family: var(--font);
	cursor: none !important;
}

body {
	margin: 0;
	width: 100vw;
	height: calc(100vh + 1px);
	background-size: cover !important;
	background-blend-mode: darken !important;
	overflow: hidden;
}

.grid > .grid-item {
	/* border: 1px solid white; */
	background-color: var(--bg);
	border-radius: 0.7vw;
	box-shadow: var(--shadow);
}

.grid > .grid-item[data-id="0"] {
	position: fixed;
	top: var(--margin);
	left: var(--margin);
	width: calc(var(--column1) - var(--margin));
	height: calc(100% - (2 * var(--margin)));
}

.grid > .grid-item[data-id="1"] {
	position: fixed;
	top: var(--margin);
	left: calc(var(--column1) + var(--margin));
	width: calc(var(--column2) - var(--margin));
	/* height: calc(70% - var(--margin)); */
	height: calc(100% - (2 * var(--margin)));
	display: none;
}

/*
.grid > .grid-item[data-id="2"] {
	position: fixed;
	top: calc(70% + var(--margin));
	left: calc(var(--column1) + var(--margin));
	width: calc(var(--column2) - var(--margin));
	height: calc(30% - (2 * var(--margin)));
}
*/

.grid > .grid-item[data-id="2"] {
	display: none;
}


.grid > .grid-item[data-id="3"] {
	position: fixed;
	top: var(--margin);
	left: calc(var(--column1) + var(--column2) + var(--margin));
	width: calc(var(--column3) - var(--margin));
	height: calc(100% - (2 * var(--margin)));
}

.grid > .grid-item[data-id="4"] {
	position: fixed;
	top: var(--margin);
	left: calc(var(--column1) + var(--column2) + var(--column3) + var(--margin));
	width: calc(var(--column4) - (2 * var(--margin)));
	height: calc(30% - var(--margin));
}

.grid > .grid-item[data-id="5"] {
	position: fixed;
	top: calc(30% + var(--margin));
	left: calc(var(--column1) + var(--column2) + var(--column3) + var(--margin));
	width: calc(var(--column4) - (2 * var(--margin)));
	height: calc(40% - var(--margin));
}

.grid > .grid-item[data-id="6"] {
	position: fixed;
	top: calc(70% + var(--margin));
	left: calc(var(--column1) + var(--column2) + var(--column3) + var(--margin));
	width: calc(var(--column4) - (2 * var(--margin)));
	height: calc(30% - (2 * var(--margin)));
}

.announcement {
	position: absolute;
	background-color: var(--bg-solid);
	border-radius: 0.7vw;
	box-shadow: var(--shadow);
	width: var(--announcement);
}

.announcement > h3 {
	width: max-content;
	max-width: 90%;
	font-size: 1.2rem;
	font-weight: 400;
	margin: var(--margin);
}

.fade-enabled {
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.fade-out {
	opacity: 0;
}

.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vw;
	background-color: black;
	z-index: 9999;
}