style.css

html, body{
  background-color: #1c1c1c;
  color: #e6e7e8;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: 'IBM Plex Serif', serif;
}
body{
  background-image: url(https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

nav, footer{
  box-sizing: border-box;
  background-color: #1c1c1c;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8%;
  color: #e6e7e8;
}
h1{
  font-family: 'IBM Plex Mono', monospace;
  color: #D5A001;  
}
ul{
  display: flex;
}
li{
  list-style-type: none;
}
a{
  color: #e6e7e8;
  text-decoration: none;
  margin-left: 1rem;

}
a:hover{
  color: #D5A001;
  text-decoration: underline;
  
}

main{
  background-color: rgba(30,47,21,.5);
  height: 92%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e6e7e8;
}
main div{
  margin: 2rem;
  height: 70%;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(28,28,28,.7);
  border: 1px solid #1c1c1c;
  border-radius: 10px;
  padding: 1rem;
  font-size: 1.2rem;
}
.btn{
  margin: .5rem;
  padding: .5rem;
  height: 2rem;
  border: 1px solid #1c1c1c;
  background-color: #1c1c1c;
  border-radius: 5px;
  color: #D5A001;
  font-size: 1rem;
}
.btn:hover{
  background-color: #D5A001;
  color: #1c1c1c;
  border: 1px solid #1c1c1c;
}
.btn:active{
  background-color: #4E3B01;
  color: #1c1c1c;
}

@media only screen and (max-width: 500px){
  h1, ul{
    margin: 0;
    padding: 0;
  }
  nav{
    box-sizing: border-box;
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }
  main{
    height: 90%;
  }
  main div{
    height: 90%;
    width: 80%;
    font-size: 1rem;
  }

}