html,body{
  width:100%;
  height:950px;
}
body{
  background:#0E0E12;
  color:#fff;
  font-family: Times New Roman;
}
#navbar {
  background-color: #1C1C24;
  display: flex;
  height:40px;
  width:10%;
  place-self:left;
  justify-content: center;
  border: 2px solid #4ECCA3;
}
#navbar a {
  color: #E6EDF3;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}
#navbar:hover{
  border: 2px solid #00FFC6;
}
#navbar a:hover {
  color: #4ECCA3;
}
table{
  background: #1C1C24;
  place-self:center;
  height:800px;
  width:90%;
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #4ECCA3;
}
#changeDisplay{
  position:relative;
  bottom:50px;
  left:300px;
  background:#0E0E12;
  border: none;
}
.light {
  background-color: #fff;
  color: #000;
}

.light #navbar {
  background-color: #f5f5f5;
  border: 2px solid orange;
}
.light #navbar button{
  background-color: #f5f5f5;
}
.light #navbar a {
  color: #000;
}
.light #changeDisplay{
   background:#fff;
}
.light table {
  background-color: #fff;
  border: 2px solid orange;
  color:#000;
}
.dark {
  background-color: #0E0E12;
  color: #fff;
}
@media screen and (max-width:600px){
  body{
    max-height:650px;
  }
  #navbar {
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    width:10%;
    height:40px;
    place-self:left;
  }
  table{
    height:400px;
  }
}