planetary card spread

<link rel="shortcut icon" href="https://emojipedia-us.s3.amazonaws.com/thumbs/120/emoji-one/104/crystal-ball_1f52e.png">
<link rel="stylesheet" href="http://where.neocities.org/fonts.css">
<meta charset="UTF-8">
<title>planetary spread</title>


<style>
body {background-color:; background-image:url(https://i.imgur.com/Uc0bXJR.png); background-attachment:fixed; background-repeat:xy-repeat;}
#container {margin:0 auto; margin-top:35px; width:710px;}
a{color: rgba(65, 65, 65, 0.95); text-decoration: none; transition: all 0.6s ease-in-out; -o-transition-transition:  all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;}
a:hover{color: rgba(65, 65, 65, 0.45); text-decoration:none; transition: all 0.6s ease-in-out; -o-transition-transition:  all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background-color: #444;}

#opening {width:710px; position:absolute; height:35px;}
  .subject {float: left; position: relative; top:10px; font-family: 'organique'; font-size:50px; text-transform: uppercase; font-weight:none; line-height:30px; padding-left:30px; color: rgba(45, 180, 180, 0.95); text-shadow: 2px 1px 0px rgba(255, 255, 255, 1); letter-spacing: 2px; word-spacing: 3px;}
  .legend {float: right; position: relative; font-family: consolas; font-size: 8px; letter-spacing: 3px; line-height: 100%; text-transform:uppercase; font-weight:bold; color:#FFF; padding-right:40px; text-transform: uppercase; margin-bottom:15px; padding-top:20px;}

#home {position:relative; float: left; left:-70px; top:-13px; z-index:99;}
#home img {width:105px;  -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}

#people {width:600px; position:absolute; top:55px;}
  #female {float:left; width:345px; position:relative;}
  #male {float:right; width:345px; position: relative;}

.char {background-image: url(http://i.imgur.com/Reo0H39.png); box-shadow: 0 0 1px rgba(204, 215, 197, 0.6); border-bottom: 2px solid #00B9BD; margin-bottom:11px;}

.hiatus {background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 1px rgba(204, 215, 197, 0.6); border-bottom: 4px solid rgba(74, 219, 196, 0.3); margin-bottom:11px;}

.details {padding-left:4px; padding-right:4px; font-family: 'mayo'; font-size:79px; line-height: 33px; letter-spacing: 1px; color: #00B9BD; ; text-decoration:none; text-transform: lowerase; font-weight:;}

.words {font-family: itim, calibri; color: #000000; font-size: 11px; line-height: 10px; text-align: justify; text-transform: uppercase;}

.bar {font-family: itim, calibri; font-size:9px; line-height: 10px; letter-spacing:1px; text-transform: uppercase; color:#333; text-shadow: none; display: block; }

</style>
</head>

<body>
<div id="container">


<div id="people">

<div class="char">
<div class="details"><div style="padding: 5px;;">Self<br>
<center><div style="width: 550px; padding: 10px;"><div class="words">card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Moon<br>
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(home)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Mercury<br>
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(business, skills, integrity)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Venus<br>
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(love)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Mars
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(hostility, oppression, aggression)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Jupiter<br>
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(finance and wealth)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Saturn<br>
<center><div style="width: 550px; padding: 10px;"><div class="words"><b>(intellect)</b><br>card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>

<div class="char">
<div class="details"><div style="padding: 5px;;">Outcome<br>
<center><div style="width: 550px; padding: 10px;"><div class="words">card <i>subtitle</i><br><br>description<br><br>meaning</center>
</div></div></div>
</div> <!----- END MALE ----->

<div> <!----- END PEOPLE ----->
</div>
</body>