body {
	color:#9427ad;
	background-color:#c5f9f9;
	height:100%;
	margin:0;
	padding:0;
	
}


.card {
  background-color:#ebbaf5;
  border: 6px solid #05fcf8;
  border-radius:15px;
  outline:3px solid #d371f7;
  position:absolute;
  width:500px;
  height:700px;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  overflow:hidden;
}
/* I've added overflow:hidden here, which means only things that fit inside the card can be seen. */

.card-title {
	height:60px;
	border-bottom: 1px solid#8315b2;
}
.card-body {
	height:640px;
}

.card h1 {
	font-family:'helvetica',system-ui;
	color:#fff;
	font-size:28px;
	text-align:center;
  margin-top: 0;
  padding-top:10px;
}
.card-body {
  height:640px;
  background-image: url('capybara.jpg');
  background-size: cover;
  background-position: center;
  position:relative;
}
.card .fact {
  position:absolute;
  background-color: #b5efec;
  border-radius: 8px;
  color:#000;
  font-family: 'Helvetica', system-ui;
  font-size:10px;
}	
#fact1 {
  width:300px;
  top:1px;
  left:30px;
}
#fact2 {
  bottom:400px;
  right:20px;
  width:170px;
}
#fact3 {
  bottom:75px;
  left:320px;
  width:175px;
}

#fact4 {
  top:300px;
  right:300px;
  width:175px;
}