* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	word-break: keep-all;
}

.hometitle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

body {
	background-color: ;
	width: 100%;
	height: 100%;
}

h1,
h2,
h3 {
	font-weight: normal;
	font-size: 16px;
}

h3 {
	color: white;
}

a {
	text-decoration: none;
}

h1 a {
	color: black;
}

.rs div {
	width: 100%;
}

.bb {
	border-bottom: 1px solid white;
}

.br {
	border-right: 1px solid white;
}

.events {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	flex-direction: column;
	z-index: 2;
}

.events ul {
	writing-mode: vertical-rl;
}

.events li {
	border-right: 1px solid black;
	text-orientation: upright;
	word-spacing: 7.5px;
}

.resident {
	position: absolute;
	left: 15%;
	top: 10px;
	width: 45%;
	height: calc(100% - 20px);
}

.resident ul {
	width: 100%;
	height: 100%;
}

.resident li {
	background-color: #333333;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	top: 0;
	width: 100%;
	height: 20%;
}

.top li {
	width: calc(100% / 3);
}

.bottom {
	position: absolute;
	display: flex;
	flex-direction: row;
	bottom: 0;
	width: 100%;
	height: 20%;
	background-color: yellow;
}

.bottom li {
	width: calc(100% / 3);
}

.meeting {
	right: 3.5%;
	bottom: 10px;
	width: 25%;
	height: 30%;
	background-color: #003B96;
}

.lounge {
	top: 35%;
	right: 3.5%;
	width: 20%;
	height: 10%;
	background-color: #4E614E;
}

.meeting,
.lounge,
.library,
.store,
.gym,
.kitchen,
.refri,
.storage,
.chair1,
.chair2 {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}

.chair1 {
	top: 10px;
	left: 30%;
	width: 3.5%;
	height: 5%;
	background-color: #4A3A35;
}

.chair2 {
	top: 12.75%;
	left: 51.5%;
	width: 3.5%;
	height: 5%;
	background-color: #4E614E;
}

.store {
	top: 10px;
	right: 32.5%;
	width: 5%;
	height: 20%;
	background-color: #949494;
}

.library {
	bottom: 10px;
	right: 32.5%;
	width: 5%;
	height: 40%;
	background-color: #949494;
}

.officer {
	position: absolute;
	display: flex;
	flex-direction: column;
	bottom: 10px;
	left: 10px;
	height: 70%;
	width: 10%;
}

.officer ul {
	height: 100%;
}

.officer li {
	background-color: #D9D9D9;
	display: flex;
	justify-content: center;
	align-items: center;
	writing-mode: vertical-rl;
	width: 100%;
	height: 50%;
}

.gym {
	top: 10px;
	right: 25%;
	width: 5%;
	height: 10%;
	background-color: #F0F0E9;
	color: black;
}

.kitchen {
	top: 10px;
	left: 20%;
	width: 5%;
	height: 10%;
	background-color: #F0F0E9;
	color: black;
}

.storage {
	top: 15%;
	left: 10px;
	width: 15%;
	height: 7.5%;
	background-color: #949494;
}

.refri {
	top: 10px;
	left: 10px;
	width: 5%;
	height: 10%;
	background-color: #E8E8E8;	
	color: black;
}

li {
	list-style: none;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
  transition: opacity 500ms;
  visibility: hidden;
  z-index: 900;
  opacity: 0;
  color: black;
  background-color: black;
  word-break: keep-all;
  line-height: 1.5;
  padding: 10px;
}

.close {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
}

.popup p {
	color: white;
}

.popup p a {
	color: white;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.popup p a:hover {
	opacity: 0.5;
}

.popup:target {
  visibility: visible;
  opacity: 1;
}

.resident a {
	color: white;
}

.officer a {
	color: black;
}

/*dl {
	display: flex;
}*/

dd {
	margin-bottom: 16px;
}

.glossary h1 {
	text-align: center;
	padding: 32px;
}

dl {
	padding: 16px;
	line-height: 1.5;
}

dt {
	text-decoration: underline;
	text-underline-offset: 3px;
/*	text-decoration-style: dashed;*/
}

footer p {
	padding: 40px;
	text-align: center;
	font-size: 12px;
}

@media screen and (max-width: 1000px) {

	.glossary h1 {
		writing-mode: horizontal-tb;
		padding: 40px;
	}

	.hometitle {
		left: 35%;
	}

	.events {
		top: 22.5%;
	}

	.events ul {
		writing-mode: horizontal-tb;
	}

	.events li {
		border-right: 0px solid black;
		border-top: 1px solid black;
		word-spacing: 0px;
	}

	.chair1 {
		width: 5%;
		left: 28%;
	}

	.chair2 {
		width: 5%;
		left: 50%;
	}

	h1,
	.meeting,
	.lounge,
	.library,
	.store,
	.gym,
	.kitchen,
	.refri,
	.storage,
	.chair1,
	.chair2,
	.store {
		writing-mode: vertical-rl;
	}

	.dh,
	.cg,
	.rs {
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.meeting {
		height: 28%;
	}

	.lounge {
		top: calc(10px + 57.5%);
		right: 3.5%;
		width: 20%;
		height: 10%;
	}
}