hard to accept

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">

<div id="forest">
 <bg></bg>
 <sq></sq><sw></sw>
 <li1></li1>
 <li2></li2>
 <li3></li3>
 <img1 style="background-image: url(GIF HERE WILL RESIZE)"></img1>
 <img2 style="background-image: url(GIF HERE WILL RESIZE)"></img2>
 <tag>tag: username</tag>
 <h1>I'm an exception
<ll>It's hard to accept</ll>
</h1>
 <thr>

TEXT IN HERE

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

<style>
#forest {height: 550px; width: 300px; position: relative; background: none; margin: auto; overflow: hidden; border: 3px solid #eee;}
#forest bg {height: 550px; width: 300px; position: absolute; background-size: cover; background-image: url(https://i.pinimg.com/564x/0d/bc/f1/0dbcf12d213d10092edadcd5d152975f.jpg);}
#forest sq {height: 150px; width: 300px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 59%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 59%, 0 100%); background: #000; position: absolute; mix-blend-mode: color}
#forest li1, #forest li2 {height: 1px; width: 162px;position: absolute; background: #eee; }
#forest li1 {top: 150px; -webkit-transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); -o-transform: rotate(-22deg);top: 118px; left: -6px}
#forest li2 {top: 150px; -webkit-transform: rotate(22deg);  -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -o-transform: rotate(22deg); top: 118px; right: -6px}
#forest tag {height: 30px; width: 300px; background: #bbb; position: absolute; font-family: cousine; text-transform: uppercase; font-size: 9px; line-height:30px; box-sizing: border-box; padding: 0 20px; bottom: 0; color: #000; letter-spacing: 1px}
#forest img1, #forest img2 {height: 70px; width: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; box-sizing: border-box; background-size: cover; position: absolute; border: 1px solid #eee; -webkit-transition: 0.5s ease}
#forest img1 {top: 25px; left: 35px}
#forest img2 {top: 135px; left:115px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); opacity: 0}
#forest:hover img2 {opacity: 1; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s;}
#forest:hover img1 {opacity: 0}
#forest h1 {position: absolute; background: none; font-family: nixie one; text-transform: uppercase; width: 200px; left: 50px; height: 200px; top: 140px; color: #ccc; text-align: left; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding-bottom: 20px; box-sizing: border-box; padding-top: 20px; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -ms-transition: 0.6s ease; -o-transition: 0.6s ease; line-height: 35px; font-size: 35px}
#forest ll {color: #AFC9A8}
#forest:hover h1 {opacity: 0}
#forest thr {width: 200px; height: 250px; position: absolute; background: #bbb; outline: 1px solid #eee; box-sizing: border-box; border: 15px solid #bbb; left: 50px; bottom: 70px; font-family: cousine; font-size: 10px; letter-spacing: 0.5px; overflow: auto; border-right: 10px solid transparent; padding-right: 5px; text-align: justify; line-height: 14px; font-size: 9px; opacity: 0; -webkit-transition: 0.6s ease; -moz-transition:0.6s ease; -ms-transition: 0.6s ease; -o-transition:0.6s ease}
#forest thr > b {background: #AFC9A8;}
#forest sw {height: 130px; width: 300px; -webkit-clip-path: polygon(0 0, 100% 31%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 31%, 100% 100%, 0% 100%); bottom: 30px; background: #000; mix-blend-mode: color; position: absolute;}
#forest li3 {height: 1px; width: 300px; -webkit-transform: rotate(7.5deg); -moz-transform: rotate(7.5deg); -ms-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); background: #eee; position: absolute; top: 410px; }
#forest:hover thr {opacity: 1; -webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s;}
#forest thr::-webkit-scrollbar {width: 5px}
#forest thr::-webkit-scrollbar-thumb {background: #bbb; border: 1px solid #eee}
#forest thr::-webkit-scrollbar-track {background: none!important; border: none!important}

</style>
[/dohtml]