body {
    background-image: url("/writing/ex/coe/stickers.gif") ;
  background-color: #000;
  /**text**/
  color: white;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  text-transform: lowercase;
  max-width: 500px;
  /**page center **/
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}


img { 
  max-width: 200px;
  float: left;
  margin-left: 3px;
  margin-right: 10px;
}

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


.body {
  max-width: 500px;
  background-color: #000;
  padding: 10px;

}
.box {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
  border-color: white;
  max-width: 300px;
  margin: 10px;
  float: left;
}

a { color: white; }
a:active { color: blue; }
a:hover { color: blue; }
      
.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;
      }
      
.footer {
  font-size: 10px;
  text-align: center;
  font-size: 14px;
  text-transform: lowercase;
}

.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;
}