body {
  background-color: #d8a7b1;
  color: black;
  font-family: 'Arial';
  text-align: center;
  font-size:14px;
}
main, aside {
  border:2px #81646a;
  background-color:#efdbdf;
  margin-left:5px;
  margin-right:5px;
  width:100%;
  padding:5px;
}
header{
  max-width:100%;
  margin-bottom:10px;
}
.flex {
  display: flex;
  justify-content:center;
}
header {
  height:50px;
}
main {
  width:100%;
}

h3 {
border-top: 2px dotted #81646a;
}

blockquote {
  text-align: left;
  font-family: "Cantarell", sans-serif;
  font-size: 12pt;
  background-color:#ffe9e9;
  padding:10px;
  border: 1px solid #d8a7b1;
}

.notes {
text-align: left;
  font-family: "Consolas";
  font-size: 12pt;
  background-color:#ffe9e9;
  padding:10px;
  border: 1px solid #d8a7b1;
}

mark {
  background-color:#ffb3d9;
}

/*
WIP
trying to figure out how to dynamically resize images within their container, like how .flex already be doing that
"If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:"
object-fit does stuff too but i went with the below for now??
*/
.img-fit {
  max-width:100%;
  height:auto;  
}

.blog-post {
border-style:solid;
border-width:3px;
border-radius:5px;
border-color:#d8a7b1;
padding-left:20px;
padding-right:20px;
}
  
.fix{
    position:fixed;
    bottom:0px;
    left:1200px;
}

li {
  list-style-image:url("/img/duckicon.png");
}