@charset "utf-8";

@font-face {
	font-family: 'Cinzel';
	src: url("../fonts/CinzelDecorative-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Cinzel Bold';
	src: url("../fonts/CinzelDecorative-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Isocpeur';
	src: url("../fonts/isocpeur.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Century Gothic';
	src: url("../fonts/centurygothic.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-display: fallback;
}
:root {
	--grid-background: rgba(51,51,51,0.25);
	--small-grid-background: rgba(255,255,255,0.0);
	--cell-background: rgba(172,172,172,1);
	--cell-background-selected: rgba(240,80,91);
	--cell-background-restricted: rgba(50,50,50,1);
	--cell-opacity-active: 0.3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--grid-background: rgba(221,221,221,0.3);
		--cell-background: rgba(51,51,51,1);		
	}
}


html {
	box-sizing: border-box;
	font-family: 'Isocpeur';
}

*,
*:before,
*:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

#map {
	width: 100vw;
	height: 100vh;
}

/********** Description Box ******/
#description-box {
	position: absolute;
	width: 250px;
	background-color: rgba(140, 240, 220, 0.7);
	color: rgba(80, 80, 80, 1);
	border-radius: 2px;
	box-shadow: 0 0 5px 2px rgba(80, 80, 80, 1);
	top: 125px;
	left: 45px;
	z-index: 10;
	font-family: 'Cinzel';
}
#description-box-header {
	cursor: move;
	text-align: center;
	padding: 10px;
	background-color: rgb(242, 255, 0);
	height: 60px;
	font-family: 'Cinzel Bold';
	transition: all 0.2s ease-in-out;
}
#description-box-header:hover,
#description-box-header:focus-within,
#description-box-header:active {
	transform: scale(1.05);
	border: solid 1px rgba(143, 115, 109, 1);
	box-shadow: -50px 50px 150px 5px rgba(0, 0, 255, 0.8);
}
.collapsible {
	cursor: pointer;
	width: 100%;
	height: 35px;
	border: none;
	margin-top: 10px;
	font-family: 'Isocpeur';
	font-size: 12px;
	transition: all 0.1s ease-in-out;
}
.collapsible:hover,
.collapsible:focus-within,
.collapsible:active {
	transform: scale(1.05);
	background-color: #ccc;
	border: solid 1px rgba(143, 115, 109, 1);
	box-shadow: 0 100px 150px 5px rgba(255, 0, 0, 0.8);
}
.content {
	display: none;
	padding: 10px 18px;
	overflow: hidden;
	background-color: #f1f1f1;
	font-size: 13px;
	color: rgba(20, 20, 20, 1);
}
#erase {
	cursor: pointer;
	display: block;
	margin: 10px auto;
	padding: 5px 15px;
	font-family: 'Isocpeur';
	background-color: beige;
	border-radius: 3px;
	transition: all 0.1s ease-in-out;
}
#erase:hover,
#erase:focus-within,
#erase:active  {
	font-size: 14px;
	padding: 8px 18px;
	background-color: rgba(255, 240, 110, 1);
}

/***** Grid Design **********/
.grid {
	display: grid;
	width: 100%;
	height: 100%;
	background-color: var(--grid-background);
	
}

.grid .cell {
	background-color: var(--cell-background);
}

.grid .cell:active,
.grid .cell:hover,
.grid .cell:focus-within {
	opacity: 0.3;
}

.grid .cell.active {
	opacity: var(--cell-opacity-active);
}

.grid .cell.selected {
	background: var(--cell-background-selected);
}

.grid .cell.restricted {
	opacity: 1;
	background: var(--cell-background-restricted);
}

.grid .new-label.wall {
	background: rgba(50,50,50,1);
}
.grid .new-label.wood-workshop {
	background: rgba(199,186,169);
}
.grid .new-label.metal-workshop {
	background: rgb(170, 185, 204);
}
.grid .new-label.metalshop-lathes {
	background: rgb(130, 185, 204);
}
.grid .new-label.office {
	background: rgb(166, 203, 181);
}
.grid .new-label.hazmat {
	background: rgb(200,100,130);
}
.grid .new-label.aisle {
	background: rgb(191,191,191);
}
.grid .new-label.bathroom {
	background: rgb(191,100,191);
}
.grid .new-label.sewing-and-paper-workshop {
	background: rgb(249,200,180);
}
.grid .new-label.janitor-closet {
	background: rgb(249,100,240);
}
.grid .new-label.tech-workshop {
	background: rgb(159, 232, 216);
}
.grid .new-label.mystic-gym {
	background: rgb(239, 200, 255);
}
.grid .new-label.kidzone {
	background: rgb(250, 252, 176);
}
.grid .new-label.communal-space {
	background: rgb(191,191,191);
}
.grid .new-label.wood-assembly {
	background: rgb(221, 209, 175);
}
.grid .new-label.front-desk {
	background: rgb(255, 90, 126);
}
.grid .new-label.work-tables {
	background: rgb(233, 192, 153);
}
.grid .new-label.aisle .label-span {
	display: none;
}

.label {
	display: none;
	width: 100px;
	height: 40px;
	background-color: rgba(253,252,0,1);
	color: rgba(80,80,80,1);
	margin:20px;
	padding:0 20px;
	border-radius: 3px;
	border: solid 1px red;
	position: absolute;
	top: 10px;
}

.label.active-display {
	display: inline-block;
}
.label-span {
	align-self: center;
	margin: 0 auto;
}

#map-labels {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}
.new-label {
	display: grid;
	visibility: visible;
}

.symbol-container {
	position: absolute;
	content: "X";
	top: 100px;
	left: 100px;
	width: 10px;
	height: 10px;
	background-color: blue;
	transition: 0.3s ease-in-out all;
}

.symbol-container:hover,
.symbol-container:focus,
.symbol-container:active {
	background-color: blueviolet;
}