html,body{
  width:100%;
  height:950px;
}
body{
  background:#0E0E12;
  font-family: Times New Roman;
  color:#fff;
}
#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;
}
#container{
  margin-top: 20px;
  height:500px;
  width:95%;
  background: #1C1C24;
  border-radius: 10px;
  border: 2px solid #4ECCA3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  place-self:center;
}
#container p{
  margin: 20px;
  font-size:20px;
}
#container h1{
  margin:30px;
  font-size: 50px;
  margin-bottom: 50px;
}
#container a{
  text-decoration: none;
  color:#4ECCA3;
  font-size:45px;
}
#container:hover{
  border: 2px solid #00FFC6;
}
#container a:hover{
  color:#00FFC6;
}
#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 #container {
  background-color: #fff;
  border: 2px solid orange;
}
.light #container a{
  color:orange;
}
.dark {
  background-color: #0E0E12;
  color: #fff;
}
@media screen and (max-width:600px){
  body{
    height:700px;
  }
  #navbar {
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    width:10%;
    height:40px;
    place-self:left;
  }
  #container{
    height:600px;
  }
  #container h1{
    font-size:30px;
    margin-bottom: -10px;
  }
  #container a{
    font-size:25px;
  }
}