html, body{
  /* Change the background colour */
  background-color: #efefef;
  /* Change the font colour */
  color: #222;
}

body{
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  background-color: rgba(244,234,199,1);
  background-image: url("images/bg.jpg");
  background-repeat: repeat;
  background-size: 40em;
}

h1{
  color: #111;
  opacity: 0.9;
}

h1 {
  color: #111;
  -webkit-text-fill-color: rgba(255, 255, 255, 0); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0,0,0,1);
}

h2{
  /* Change the author name colour */
    color: #222;
}

/* h3, h4{
  color: #222;
} */

a, a:visited{
    color: #222;
}

a:hover {
  /* Change the link colour when you hover */
  color: #222;
  text-decoration: underline;
}
.fab, .fas{
  /* Change the circle colour */
  background-color: #111;
}

a > .fab, a > .fas{
  /* Change the circle image colour */
  color: #fbf3dc;
}

.fab:hover, .fas:hover{
  /* Change the circle colour when you hover*/
  background-color: #111;
}

a:hover > .fab, a:hover > .fas{
  /* Change the circle image colour when you hover */
  color: #fbf3dc;
}


.list{
  margin: 2em 4em 0 4em;
  padding: 1em 3em;
  position: relative;
  z-index: 0;
  background-color: #fbf3dc;
  animation: fadein 0s;
}

.bio a, .bio:visited{
  text-decoration: underline;
}



@media only screen and (max-device-width: 480px) {
  .list{
    padding: 1em 1em;
    margin: 0 1.5em;

  }


    }