radio, live transmission

[dohtml]<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

<div id="total">
 <img src="IMAGE HERE WILL RESIZE TO FIT">
 <li1></li1>
 <h2>Radio, live transmission</h2>
 <h3><one>Listen to the silence</one></h3>
 <h3><two>tag: username<br>### words</two></h3>
 <main>
TEXT HERE
</main>
</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>
#total {height: 550px; width: 450px; background: #fff; margin: auto; position: relative}
#total img {height: 250px!important; width: 350px!important; object-fit: cover; object-position: center; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); position: absolute; left: 50px; top: 65px;}
#total h2, #total h3 {height: 30px; font-family: roboto; text-transform: uppercase; font-size: 15px; color: #000; letter-spacing: 3px; width: 350px; position: absolute; height: 20px; line-height: 20px; top:120px; left: 30px; color: #000; font-weight: 900;}
#total h2 {color: #ff00ff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000}
#total h3 {top: 140px; left: 100px; font-style: italic; width: 250px; color: #00ffff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000}
#total one {opacity: 1;}
#total two {opacity: 0}
#total one, #total two {-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s}
#total:hover one {opacity: 0}
#total:hover two {opacity: 1}
#total main {height: 150px; width: 350px; left: 50px; background: none; bottom: 50px; position: absolute; font-family: roboto; overflow: auto; -webkit-columns: 2; text-align: justify; font-size: 11px;  color: #000; line-height: 14px; padding-bottom: 10px;}
#total main::first-letter {font-size: 80px; font-weight: 900; float: left; color: #00ffff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; margin: 30px 20px 30px 0;}
#total main::-webkit-scrollbar {height: 10px;}
#total main::-webkit-scrollbar-thumb {background: #ff00ff!important; border: 1px solid #000!important}
#total main::-webkit-scrollbar-track {background: #00ffff!important; border: 1px solid #000!important}
#total li1 {height: 1px; width: 200px; background: #00ffff; position: absolute; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); top: 90px; left: 190px}
#total li1::after {height: 1px; width: 40px; background: #00ffff; content:""; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); top: 20px; left: 180px}
</style>
[/dohtml]