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

}

.card_outer {
  width:500px;
  height:700px;
  background-color:#fff;
  border-radius:8px;
  padding:3px;
  box-sizing: content-box;
  overflow:hidden;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  
  margin: auto;
}
.card_inner {
  height:100%;
  background-color:#000;
  border-radius:8px;
  box-sizing: border-box;
  border:5px solid #aaff00;
  position:relative;
  overflow:hidden;
}
.card_inner #card_title{
  height:60px;
  box-sizing: content-box;
}
.card_inner #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_inner h1 {
  font-family: "Helvetica", system-ui;
  color:#fff;
  text-align:center;
  margin-top: 10px;
  
}

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

}


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

.card_inner .fact {
  position:absolute;
  padding:6px;
  background-color: #ff6;
  border-radius: 8px;
  color:#000;
  font-family: "Helvetica", system-ui;
  font-size:10px;
}

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

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

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

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

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

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