getting even

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i" rel="stylesheet">

<div id="marble">
 <div id="marble-bg">

 <img src="IMG/GIF HERE, WILL RESIZE">
<h1>first m. last</h1>
<div class="marbletabs">

<div class="marbletab">
<input type="radio" id="marbletab-1" name="marbletab-group-1" checked>
<label for="marbletab-1" title="about"></label>
<div class="marblecontent">
<h2>header</h2>

TEXT HERE

</div>
</div>


<div class="marbletab">
<input type="radio" id="marbletab-2" name="marbletab-group-1">
<label for="marbletab-2" title="friends"></label>
<div class="marblecontent">
<h2>header</h2>

FRIENDS HERE

</div>
</div>


<div class="marbletab">
<input type="radio" id="marbletab-3" name="marbletab-group-1">
<label for="marbletab-3" title="enemies"></label>
<div class="marblecontent">
<h2>header</h2>

ENEMIES HERE

</div>
</div>

<div class="marbletab">
<input type="radio" id="marbletab-4" name="marbletab-group-1">
<label for="marbletab-4" title="lovers"></label>
<div class="marblecontent">
<h2>header</h2>

LOVERS HERE

</div>
</div>

</div></div>
<a href="oliviacodes.tumblr.com"><div style="width: 400px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>


<style>
#marble {height: 550px; width: 400px; background-image: url(https://i.pinimg.com/originals/18/fc/63/18fc63a026eec451d68c5375b20daada.jpg); background-size: cover; background-position: center; margin: auto; position: relative}
#marble-bg {height: 450px; width: 250px; background: #eee; position: absolute; left: 75px}
#marble img {height: 60px!important; width: 60px!important; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border: 1px solid #2B3744; object-fit: cover; object-position: center; top: 50px; position: absolute; left: 60px}
#marble h1 {font-family: josefin sans; color: #2B3744; font-size: 15px; font-weight: 700; letter-spacing: 2px; width: 450px; height: 20px; line-height: 20px; position: absolute; -webkit-transform: rotate(-90deg);background: none;text-align: right; top: 230px; right: -5px; }
#marble h2 {font-family: josefin sans; text-transform: lowercase; font-size: 15px; color: #2B3744; letter-spacing: 2px; margin-top: 0; margin-bottom: 10px;}
.marbletabs {
margin: 0px auto;
position: relative;
width: 190px;
height:  420px;
}

.marbletab {
float: left;
}

.marbletab label {
display: block;
width: 5px;
height: 5px;
background: #2B3744;
border: 1px solid #2B3744;
margin: 0px 4px;
position: relative;
left: 30px;
top: 30px;
z-index: 1;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;

}

.marbletab input[type=radio]:checked ~ label {
background: #eee;
z-index: 2;
}

.marbletab input[type=radio] {
display: none;
}

.marblecontent {
position: absolute;
bottom: -10px;
right: -10px;
background: #eee;
border: none;
width: 165px;
height: 300px;
font-family: lato;
font-weight: 300;
font-size:11px; color: #333;
overflow: auto; padding-right: 5px;
line-height: 13px; text-align: justify;
opacity: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s;
}

.marbletab input[type=radio]:checked ~ label ~ .marblecontent {
z-index: 1; opacity: 1
}

.marblecontent::-webkit-scrollbar {width: 8px}
.marblecontent::-webkit-scrollbar-thumb {background-image: url(https://i.pinimg.com/originals/18/fc/63/18fc63a026eec451d68c5375b20daada.jpg); background-size: cover; border-left: 3px solid #eee;}
.marblecontent::-webkit-scrollbar-track {background: #eee!important; border: none!important}
</style>

[/dohtml]