html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #F1E9E2;
	font-family: Arial;
}

#map {
	position: absolute;
	top: 66px;
	bottom: 0;
	left: 0;
	width: 100%;
}

#top {
	width: 100%;
	height: 64px;
	border-top: 2px solid #CFB991;
	background-color: #000;
	color: white;
	display: flex;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 20px;
	position: fixed;
	align-items: center;
	flex-flow: row nowrap;
	flex: 1 1 auto;
	top: 0;
	left: 0;
	z-index: 9999;
	box-shadow: -5px 2.5px 2.5px #00000077;
}

.custom-marker {
	width: 25px;
	height: 25px;
	background-size: cover;
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 8px #000000BB;
	transition: background-image 0.25s, box-shadow 0.25s, opacity 0.25s;
}

.heartMarker {
	position: absolute;
	top: -11px;
	right: -11px;
	font-size: 30px;
}

.infoBox {
	width: 29%;
	text-align: center;
	padding: 5px 1.5px;
	font-size: 7.75pt;
	border: 2px solid white;
	border-radius: 4px;
	text-shadow: -2px 1px 1px #000000;
}

.favorite {
	margin-top: 10px;
	width: 100%;
	border-radius: 4px;
	border: 2px solid #DA1C1C;
	color: white;
	background-color: #472A2A;
	padding: 5px 0;
	text-shadow: -2px 1px 1px #000000;
	transition: 0.1s;
	font-weight: bold;
	outline: 0;
}

.favorite:hover {
	background-color: #842424;
}

.favorite:active, .favedButt {
	background-color: #DA1C1C;
	text-shadow: 0 0 0 #00000000;
}

.BAD {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%201%201%22%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.5%22%20fill%3D%22%233D4045%22%2F%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.425%22%20fill%3D%22%23757575%22%2F%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.25%22%20fill%3D%22%233D4045%22%2F%3E%3C%2Fsvg%3E") !important;
	box-shadow: 0 0 4px #00000055 !important;
	opacity: 0.33;
}

.purdue-logo {
	background: url(https://www.purdue.edu/purdue/images/PU-H.svg) no-repeat;
	background-size: contain;
	display: block;
	height: 35%;
	width: 100%;
	max-width: 125px;
	margin: auto 15px auto 15px;
	overflow: hidden;
	text-indent: -9999px;
}

.menuBtn {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: transparent;
	outline: none;
	border: none;
	cursor: pointer;
}

.btnBar {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 18px;
	height: 2px;
	background-color: #fff;
	transform: translate(-50%, -50%);
	transition: background 0s 0.1s;
}

.btnBar::before, .btnBar::after {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	content: "";
	transition-delay: 0.1s, 0s;
	transition-duration: 0.1s, 0.1s;
}

.btnBar::before {
	top: -5px;
	transition-property: top, transform;
}

.btnBar::after {
	bottom: -5px;
	transition-property: bottom, transform;
}

.menuBtnT .btnBar {
	background: none;
}

.menuBtnT .btnBar::before, .menuBtnT .btnBar::after {
	transition-delay: 0s, 0.1s;
}

.menuBtnT .btnBar::before {
	top: 0;
	transform: rotate(45deg);
}

.menuBtnT .btnBar::after {
	bottom: 0;
	transform: rotate(-45deg);
}

.leftMenu {
	height: calc(100% - 74px);
	width: 0;
	position: fixed;
	z-index: 1;
	top: 66px;
	left: 0;
	display: flex;
	flex-direction: column;
	background-color: #555960;
	overflow-x: hidden;
	padding-top: 8px;
	transition: 0.2s;
	color: white;
	white-space: nowrap;
	box-shadow: 2.5px 0 2.5px #00000077;
}

.leftMenu a {
	text-decoration: none;
}

.leftMenuFooter {
	width: 100%;
	margin-top: auto;
	background-color: black;
	border-top: 2px solid #CFB991;
	color: #CCC;
}

.leftMenu button {
	background-color: inherit;
	border: 0;
	border-radius: 0;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 12pt;
	transition: 0.15s;
	color: white;
	display: flex;
	align-items: center;
}

.leftMenu button svg {
	fill: currentcolor;
	display: inline-block;
	width: 28px;
	height: 28px;
	padding-right: 24px;
}

.leftMenu button:hover {
	background-color: #3D4045;
	color: #CFB991;
}

.leftMenu button:active {
	background-color: #726E60;
}

.credTitle {
	color: #EEE;
	text-align: center;
	font-size: 12pt;
	text-decoration: underline;
	margin: 7px auto;
}

.credList {
	margin-bottom: 1em;
	font-size: 9pt;
	list-style-type: square;
}

.maplibregl-popup-content {
	background-color: #000;
	border-radius: 0;
	box-shadow: 2.5px 2.5px 2.5px #00000077;
	color: white;
	border-top: 2px solid #CFB991;
	padding: 15px 7.5px;
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip {border-bottom-color:#DFB991}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {border-top-color:#000}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {border-right-color:#000}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {border-left-color:#000}
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {border-bottom-color:#DFB991}
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {border-bottom-color:#DFB991}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {border-top-color:#000}
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {border-top-color:#000}

.maplibregl-popup-close-button {
	color: white;
	font-size: 15pt;
	margin: 0;
	padding: 1px 6px;
}

.optionsContainer {
	width: 100%;
	z-index: 2;
	top: 0;
	left: 0;
	background-color: #6F727B;
	overflow-y: hidden;
	transition: 0.2s;
	white-space: nowrap;
	text-align: center;
}

#prefsBox {
	height: 0;
	border-bottom: 1px solid #555960;
}

#favesBox {
	height: 0;
	border-bottom: 1px solid #555960;
}

#studyBox {
	height: 0;
	border-bottom: 1px solid #555960;
}

.optionsContainer input[type="range"] {
	-webkit-appearance: none;
	background-color: #FFF;
	width: 85%;
	height: 25px;
	border-radius: 6.25px;
	box-shadow: inset 0 0 0 2px #3D4045;
	margin: 0 auto;
	cursor: pointer;
	overflow: hidden;
	--thumb-background: #CFB991;
	--slider-trail: -112.5px 0 0 100px #CFB99188;
}

.optionsContainer input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: var(--thumb-background);
	width: 25px;
	height: 25px;
	border-radius: 6.25px;
	border: 3.5px solid #555960;
	box-shadow: var(--slider-trail);
}

.prefsButts {
	width: 85%;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 10px auto;
}

.prefsButts button {
	border-radius: 5px;
	padding: 5px 8px;
	font-size: 10pt;
	font-weight: bold;
	display: block;
	text-align: center;
	color: white;
	text-shadow: -1px 0.5px 1px #000000;
}

.prefsButts #prefsApply {
	border: 2px solid #2D9B2B;
	background-color: #4F6358;
}

.prefsButts #prefsReset {
	border: 2px solid #D40000;
	background-color: #684C52;
}

.prefsButts #prefsApply:hover {
	background-color: #417A45;
	color: white;
}

.prefsButts #prefsReset:hover {
	background-color: #952C30;
	color: white;
}

.prefsButts #prefsApply:active {
	background-color: #2D9B2B;
	text-shadow: -1px 0.5px 1px #00000000;
}

.prefsButts #prefsReset:active {
	background-color: #D40000;
	text-shadow: -1px 0.5px 1px #00000000;
}

.prefsInd {
	font-size: 10pt;
	padding-bottom: 2px;
	border-bottom: 2px dashed #CFB991;
	display: flex;
	justify-content: center;
	gap: 0.69em;
	width: 85%;
	height: 16px;
	margin: 5px auto;
}

.maplibregl-user-location-accuracy-circle {
	pointer-events: none;
}

.maplibregl-ctrl-group {
	background: #000;
}

.maplibregl-ctrl-group:not(:empty) {
	box-shadow: 0 0 2.5px 1.5px #00000077;
	border: 2px solid #CFB991;
}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
	background: #CFB991;
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}

#showFaves {
	border-radius: 5px;
	padding: 5px 8px;
	font-size: 10pt;
	font-weight: bold;
	display: block;
	text-align: center;
	color: white;
	text-shadow: -1px 0.5px 1px #000000;
	border: 2px solid #D31C1C;
	background-color: #462A2A;
	width: 212.5px;
	margin: 10px auto;
}

#showFaves:hover {
	background-color: #802424;
	color: white;
}

#showFaves:active {
	background-color: #D31C1C;
	text-shadow: -1px 0.5px 1px #00000000;
}