body {
  background-color:#001000;
  color:#ffffff;
  height:100%;
  margin:0;
  padding:0;

}

.card {
  width:500px;
  height:700px;
  background-color:#000;
  border-radius:8px;
  outline:3px solid #fff;
  border:6px solid #aaff00;
  box-sizing: content-box;
  overflow:hidden;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.card #card_title {
  height:60px;
  border-bottom: 1px solid #777777;
}
.card #splash{
  position:absolute;
  font-family: "Bangers", system-ui;
  font-size:34px;
  color:#aaff00;
  rotate:-30deg;
  text-align:center;
  left:0px;
  top:10px;
  z-index:10;
}


.card h1 {
  font-family: "Helvetica", system-ui;
  color:#fff;
  text-align:center;
  margin-top: 10px;
  
}

.card h2 {
  display:inline;
  position:absolute;
  right:10px;
  font-family: "Bangers", system-ui;
  color:#aaff00;
  font-size:20px;

}


.card #card_body {
  height:640px;
  background-image: url('moorhen.jpeg');
  background-position: center;
  background-size: cover;
  position:relative;
}

.card .fact {
  position:absolute;
  padding:6px;
  background-color: #ff6;
  border-radius: 8px;
  box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.7);
  color:#000;
  font-family: "Helvetica", system-ui;
  font-size:10px;
}

.card #fact1 {
  top:30px;
  left:10px;
}

.card #fact2 {
  top:30px;
  right :30px;
}

.card #fact3 {
  bottom:120px;
  left:15px;
}

.card #fact4 {
  top:170px;
  right:30px;
}

.card #fact5 {
  top:200px;
  left:20px;
}

.card #fact6 {
  bottom:100px;
  right:15px;
}