#windowclose {
	display: block;
	cursor: pointer;
}

#topBar {
	height: 30px;
}

#popUpWindow {
	display: none;
	position: fixed;
	left: 20%;
	top: 30vh;
	z-index: 9;
	width: 60%;
	padding: 5px;
	border: solid 1px black;
	border-radius: 10px;
	box-shadow: 2px 2px 5px grey;
}

#popUpWindow.visible {
	display: block;
	animation: fade-slide-in 0.3s ease-out forwards;
}

.scrollable {
	height: 300px;
	overflow: hidden;
	overflow-y: scroll;
}

#backdrop {
	position: fixed;
	z-index: 8;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	display: none;
}

#backdrop.visible {
    display: block;
    pointer-events: all;
}


@keyframes fade-slide-in {
	from {
		transform: translateY(-5rem);
	}
	to {
		transform: translateY(0);
    }
}