Earl Grey

<style>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Allura|Bilbo|Bilbo+Swash+Caps|Fondamento|Italianno|Lateef|Lovers+Quarrel|Meddon|Mirza|Simonetta');

 body{
 background: #D9D1C6;
 }

 #image{
 position: fixed;
 bottom: 0vh;
 left: 5vw;
 }

 #image img{
 height: 100vh;
 }


 #boxback{
 position: fixed;
 background: url(https://images-na.ssl-images-amazon.com/images/I/A17oMYqz6OL._SY500_.jpg);
 background-size: cover;
 background-position: top left;
 z-index: 1;
 height: 50vh;
 width: 18vw;
 bottom: 30vh;
 right: 20vw;
 }

 #box{
 position: fixed;
 z-index: 5;
 background: rgba(0, 0, 0, 0.3);
 border: 0.125px #000 solid;
 padding: .5%;
 width: 14vw;
 height: 43.5vh;
 bottom: 32vh;
 right: 21.3vw;
 font-family: 'Bilbo', cursive;
 font-size: 2.4vh;
 color: #fff8ce;
 text-shadow: 0 0 8px #000;
 }

 #title{
 position: fixed;
 z-index: 6;
 width: 25vw;
 height: 20vh;
 top: 12vh;
 right: 19vw;
 text-align: center;
 }

 r{
 font-family: 'Simonetta', cursive;
 float:right;
 }

 t{
 font-family: 'Lovers Quarrel', cursive;
 font-size: 13vh;
 background: linear-gradient(-45deg, #f9c2d4, #fffed3, #f9cfe0);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 0 .6vh #000);
 }

 h1{
 font-family: 'italianno', cursive;
 font-size: 5vh;
 }

 a{
 color: #fff8ce;
 text-decoration: underline;
 transition: 0.3s;
 }

 a:hover{
 transition: 0.3s;
 color: #ffb2c3;
 }

</style>

<div id="image">
 <img src="https://i.imgur.com/vix9Bus.jpg">
</div>
a
<div id="title"><t>Earl Grey</t></div>

<div id="boxback"></div>
<div id="box">
<center><h1>Valentina</h1></center>
 Name: <r>Valentina Grey</r><br>
 Goes by: <r><a title="Val, Valentina, Grey, Earl Grey, Lady Grey">Hover.</a>
 </r><br>
 Age:<r>Early Twenties</r><br>
 Gender:<r>Female</r><br>
 Height:<r>Five foot six</r><br>
 Occupation:<r>Multi-Hobbyist</r><br>
 Orientation:<r>Nonparticular</r><br>
 <br>
 <center>More details on the way!</center>
</div>