panic on the streets of london

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Poppins:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karma:300,400,500,600,700" rel="stylesheet">


<div id="letter">
 <div id="letter-img" style="background-image: url(LARGE IMG HERE, WILL RESIZE TO FIT)"></div>
 <div id="letter-scr"></div>
 <div id="letter-top">FIRST LETTER OF FIRST NAME.
     </div>
         <h1>FIRST LAST</h1>
   <div id="letter-main">
     <h2>panic on the streets of london</h2>
     <txt><h3>about</h3>ABOUT HERE

<h3>friends</h3>FRIENDS HERE

<h3>enemies</h3>ENEMIES HERE

<h3>lovers</h3>LOVERS HERE

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


<style>
#letter {height: 450px; width: 450px; background: #fff; margin: auto; position: relative; overflow: hidden; border: 1px solid #2326D6}
#letter-img {height: 450px; width: 450px; background-size: cover; background-position: center; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); position: absolute}
#letter-scr {height: 450px; width: 450px; background-color: #2326D6; mix-blend-mode: multiply; position: absolute}
#letter-top {height: 450px; width: 450px; background-color: #fff; position: absolute;text-align: center; font-family: poppins; text-transform: uppercase; font-size: 350px; line-height: 400px; mix-blend-mode: screen; -webkit-transition: 0.7s ease-in-out; top: 0; z-index: 2; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; font-weight: 900; color: #000}
#letter h1 {font-family: rozha one; position: absolute; color: #000; width: 450px; text-align: center; font-size: 20px; font-style: italic; letter-spacing: 2px; top: 340px; -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; z-index: 3; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s;}
#letter:hover h1 {top: 500px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; }
#letter:hover #letter-top {top: -450px; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -o-transition-delay: 0.5s;}
#letter-main {height: 380px; width: 380px; top: 75px; left: 35px; background: #ddd; position: absolute; opacity: 0; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease;}
#letter:hover #letter-main {opacity: 1; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; top: 35px}
#letter-main h2 {height: 50px; width: 365px; padding-left: 15px; position: absolute; line-height: 50px; font-family: rozha one; background: #222; color: #eee; font-size: 12px; letter-spacing: 2px; font-style: italic; top: -10px;}
#letter-main txt {border-style: solid; border-width: 25px 15px 25px 25px; padding-right: 10px; border-color: #ddd; position: absolute; bottom: 0; background: none; width: 330px; height: 280px; overflow: auto; font-family: karma; font-weight: 400; font-size: 9px; text-align: justify; letter-spacing: 0.6px; line-height: 12px}
#letter-main h3 {font-family: rozha one; color: #2326D6; font-size: 30px; margin: 10px 0; font-style: italic; letter-spacing: 3px; height: 30px; line-height: 40px}
#letter-main txt::-webkit-scrollbar {width: 5px}
#letter-main txt::-webkit-scrollbar-thumb {background: #ddd!important; border: 1px solid #2326D6!important}
#letter-main txt::-webkit-scrollbar-track {background: #ddd!important; border: 1px solid #222!important}
#letter-main b {color: #eee; background: #2326D6; padding: 2px 2px 0 2px;}
</style>
[/dohtml]