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

.coverart{
  width: 40%
}

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

h1{
  color: #31112C;
  opacity: 1;
}

h1 {
  color: #31112C;
  -webkit-text-fill-color: #31112C; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #31112C;
}

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

h3, h4{
  color: #31112C;
}

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

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

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

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

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


.list{
  margin: 2em 4em 0 4em;
  padding: 1em 3em;
  position: relative;
  z-index: 0;
  background-color: #7D0633;
  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;

  }
  .coverart{
    width: 100%
  }


    }