body {
  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: 100%;
        max-height: 100%;
        display: block; 
}


h3 {
  background-color: #F6F9B2;
  color: #000;

}

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

.box {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
  border-color: #F6F9B2;
  max-width: 40%;
  margin: 10px;
  float: left;

}

.box:hover{
  border-width: 2px;
  border-style: solid;
  padding: 5px;
  border-color: #F6F9B2;
  max-width: 40%;
  margin: 10px;
  float: left;
  box-shadow: 5px 10px #F6F9B2;
}

a { color: #F6F9B2; }
a:active { color: #EEF199; }
a:hover { color: #EEF199; }
      
.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;
}

.body {
  max-width: 100%;
  margin-bottom: 20px;
}