html{
  font-size:10px;
}
body {
  background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
  color:#636363;
}
#nav-bar {
  top: 0;
  left: 0;
  padding: 5px;
  color: grey;
  background: linear-gradient(35deg, #ccffff, #ffcccc);
}
ul {
  display: inline;
}
.nav-link {
  color: gray;
  text-decoration: none;
}
.nav-link:hover {
  animation-name: text-color;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

@keyframes text-color {
  100% {
    color: red;
  }
}
h1{
text-align:center;
  font-size:4rem;
}
.main{
  text-align:center;
}
footer{
  background: linear-gradient(35deg, #ffcccc, #ccffff);
  bottom:0;
}
@media{
  body{
    max-width:100%;
    height:auto;
  }
}
#title{
            background-color: #E8E8E8;
            max-width: 100vm;
            margin: 50px auto;
            padding: 30px 20px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);}