body {
  background-image: url("/writing/ex/hoteps/whitehotep.jpg") ;
  background-color: #fff;
  /**text**/
  color: #020300;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  text-transform: lowercase;
  max-width: 500px;
  /**page center **/
  position: absolute;
  top:20%;
  left: 0;
  right: 0;
  margin: auto;

}

blockquote {
  border-left: solid #000;
  padding-left: 1em;
}

img { 
  max-width: 200px;
  float: left;
  top:45%;
  left: 10%;
  right: 0;
}

a img { display:none; }
a:hover img { 
  display:block; 
  position: absolute; }


.body {
  max-width: 500px;
  max-height: 250px;
  overflow: scroll;
  border: solid #000;
  background-color: white;
  padding: 10px;

}

header {
  border: solid #000;
  background-color: white;
  margin-bottom: 10px;
  padding: 10px;
}

footer {
  border: solid #000;
  background-color: white;
  margin-top: 10px;
  padding: 10px;
}

header:hover  {
  animation: shake 0.5s; 
  animation-iteration-count: infinite; 
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

a { color: #36311F; }
a:active { color: #36311F; }
a:hover { color: #36311F; }
      
.nav {
        margin-left: 0;
        text-align: center;
        margin-top: 0;
        margin-bottom: 10px;
        padding-top: 1em;
        padding-bottom: 1em;
        background-color: transparent;
      }

.nav li {
        display: inline-block;
        padding-right: 5px;
      }

 @media only screen and (max-width: 800px) {
        .flex {
          flex-wrap: wrap;
        }
      }
        
#navbar-contained {
        margin-bottom: 5px;
      }
      


.card {
 background-image: url("/card.png");
 background-size: cover;
 max-height: 520px;
 max-width: 30%;
 padding: 60px;
 left: 20%;
 position: absolute;
}

mark a {
  color: #000 !important;
}