html {
  height: 100%;
  width: 100%;
}

nav {
  margin: auto;
  max-width: 500px;
  text-align: center;
}

.nav-link{
  background-color: #5856A8;
  color: #FFFFFF;
  border-radius: 0.25rem;
  padding: min(0.5rem, 4%);
  text-align: center;
  text-decoration: none;
  margin: 3px 0;
  border: 1px solid #5E0F5E;
  display: inline-block
  }

.nav-link:hover{
  background-color: darkgrey;
  color: grey;
}

body{
  background-color: #1e2124;
}

h1{
  text-align: center;
  color: white;
  font-family: Trebuchet MS;
  font-size: 3rem;
}

h2{
  color: white;
}

p{
  color: white;
  font-size: 1.3rem;
  font-family: Georgia;
}

h3{
  color: white;
  font-family: Verdana;
}


ul{
  color: white;
  font-size: 1.5rem;
}

ol{
  color: white;
}

img{
  border-radius: 0.5rem; 
  margin: 1rem; 
  width: 10%;
  height: 10%;
}

@media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .nav-link {
    display: block
  }

  img{
    width: 70%;
    height: 70%;
  }
}