body, html {
	margin:0;
	padding:0;
	height:100%;
	font-family:monospace;
	user-select:none;
	background: rgb(121, 125, 128);
}

a {
	text-decoration:none;
}

body {
	display:flex;
    justify-content: center; 
    align-items: center; 
}

.hidden {
	display:none !important;
}

#screen-start, #screen-end {
	width:100%;
	height:100%;
	background:rgb(81, 84, 88);
	position:fixed;
	top:0;
	left:0;
	color:#fff;
	text-align:center;
}

#screen-end {
	background:rgb(19, 20, 22);
}


#screen-start > div:nth-child(1), #screen-end-msg {
	font-size:36px;
	margin-top:30vh;
	color:#fff;
}

#screen-start > div:nth-child(2) {
	font-size:48px;
	margin-bottom:20px;
}

#loading-bar {
	width:30%;
	height:40px;
	padding:5px;
	border:2px solid #fff;
	margin:auto;
}

#loading-progress {
	height:100%;
	width:0;
	background:#fff;

	animation-name: loadingbar;
	animation-duration: 8s;
  	animation-delay: 2s;
  	animation-iteration-count:1;
	animation-timing-function: linear;
  	animation-fill-mode: forwards;
}

@keyframes loadingbar {
  from {width:0;}
  to {width:100%;}
}

#email-container {
	width:50%;
	height:60%;
	background:rgb(178, 181, 186);
	position:absolute;
}

#email-bar {
	width:100%;
	height:40px;
	background:rgb(81, 84, 88);
	position:absolute;
	top:-40px;
}

#email-bar-close {
	height:40px;
	width:40px;
	float:right;
	text-align:center;
	font-size:25px;
}

#email-bar-close.click {
	background:rgb(19, 20, 22) !important;
	color:#fff !important;
}

#email-bar-close:hover {
	cursor:not-allowed;
}

#email-bar-close.ready {
	background:#2e89e5;
	color:#fff;
}

#email-bar-close.ready:hover {
	cursor:pointer; 
}

#email-list, #email-display {
	width:100%;
	height:100%;
	position:absolute;
}

#email-list {
	overflow-y: scroll;
}

.email-item {
	background:rgb(178, 181, 186);
	height:100px;
	width:100%;
	border-bottom:2px solid rgb(81, 84, 88);
	padding:20px;
	box-sizing:border-box;
}

.email-item.clicked {
	background:rgb(19, 20, 22) !important;
	color:#fff !important;
}

.email-item.done {
	background:rgb(19, 20, 22) !important;
	color:#fff !important;
}

.email-item.done:hover {
	cursor:not-allowed !important;
}

.email-item.done::before {
	content:"⨲";
}

.email-item:hover {
	background:rgb(132, 134, 136);
	cursor:pointer;
}

.email-item::before {
	content:"ɞ";
	float:left;
	width:50px;
	height:80px;
	font-size:45px;
}

.email-item > div:nth-child(1) {
	font-size:16px;
}

.email-item > div:nth-child(2) {
	font-size:24px;
	padding-top:8px;
}

#email-display {
	box-sizing: border-box;
}

#email-display-container {
	height:calc(100% - 120px);
	padding:20px;
	overflow-y: scroll;
}

#email-display-buttons {
	height:80px;
	box-sizing:border-box;
	padding:10px;
	border-top:1px solid rgb(81, 84, 88);
}

#email-display-button-close {
	float:right;
	height:80%;
	margin-top:5px;
	margin-right:10px;
	width:120px;
	background:rgb(81, 84, 88);
	text-align:center;
	padding-top:10px;
	font-size:24px;
	box-sizing:border-box;
}

#email-display-button-close:hover {
	cursor:not-allowed;
}

#email-display-button-close.ready {
	background:#2e89e5;
	color:#fff;
}

#email-display-button-close.ready:hover {
	cursor:pointer;
}

#email-display-button-close.click {
	background:rgb(19, 20, 22) !important;
	color:#fff !important;
}

#email-display-email {
	font-size:16px;
}

#email-display-topic {
	font-size:24px;
	border-bottom:1px solid rgb(81, 84, 88);
	padding-bottom:10px;
	margin-bottom:20px;
	width:100%;
}

#email-display-body {
	font-size:18px;
	border-bottom:2px solid rgb(81, 84, 88);
	padding-bottom:20px;
	margin-bottom:20px;
}

#email-body {
	font-size:18px;
}

#email-body::before {
	content:"Reply:";
	font-size:24px;
}

#current-typing::after {
	content:"█";

 	animation-name: typingblink;
  	animation-duration: 1s;
	animation-timing-function:steps(1, end);
  	animation-iteration-count: infinite;
}

@keyframes typingblink {
  from {opacity: 1;}
  50% {opacity: 0;}
  to {opacity: 0;}
}