body{
    width:100%;
    height:100%;
}
@keyframes enter2 {
  0% {transform: translate(100%)}
  100% {transform: translate(0%)}
}
@keyframes enter{
  0% {transform: translate(-100%)}
  100% {transform: translate(0)}
}
@keyframes up{
  0% {transform: translate(0%, 0%)}
  100% {transform: translate:(0%, -100%)}
}
  .dialogue{
  width:70%;
  height:40%;
  top:55%;
  left:14.25%;
  position:absolute;
  background-image:url(chat1.png);
  background-size:100% 100%;
  
}
.dialoguebox{
  width:78%;
  background-color:black;
  top:22.5%;
  left:11%;
  height:56%;
  position:absolute;
  display:block;
}
.panel{
  height:90%;
  width:12%;
  top:5%;
  background-color:black;
  display:none;
  animation: enter;
  animation-duration:2s;
  animation-iteration-count:1;
  position:absolute;
  left:0%;
}
.panel2{
  height:90%;
  top:5%;
  width:12%;
  background-color:black;
  display:none;
  animation: enter2;
  animation-duration:2s;
  animation-iteration-count:1;
  position:absolute;
  right:-1%;
}
h1, h2, h3, h4, h5, h6, p, b {
  font-family:monospace;
}
.topbar{
  color:white;
height:4%;
width:100%;
left:0%;
top:0%;
position:fixed;
background-color:black;
}
  .map-content{
    margin: 2.5% auto;
    background-color:black;
    border-radius:15px;
    width:95%;
    height:95%
  }
  .map {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.2);
}

.map-container {
  background-color: #fefefe;
  margin: 20% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  border-radius:15px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#clock{
    color:white;
    font-family:monospace;
    display:flex;
    background-color:black;
    margin-right:2%;
    width:10%;
    font-size:22px;
    float:right;
  }