cast no shadow

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

<style>
#shadow {height: 550px; width: 470px; background: #eee; margin: auto; position: relative}
#shadow img {height: 490px!important; width: 310px!important; object-fit: cover; object-position: center; position: absolute; top: 30px; left: 30px}
#shadow h1 {height: 200px; width: 340px; position: absolute; text-align: right; background: none; bottom: 0; right: 30px; font-family: old standard tt; text-transform: uppercase; color: #333; font-size: 45px; line-height: 40px; letter-spacing: -4px; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease; z-index: 2}
#shadow span {background: #DE5D5D; padding: 5px 8px 2px 8px;}
#shadow-name {font-family: old standard tt; text-transform: uppercase; font-size: 10px; position: absolute; height: 15px; position: absolute; top: 0px; left: 0px; color: #333; font-weight: 400; letter-spacing: 1px; line-height: 15px; width: 260px; background: none; text-align: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); top: 155px; left: 225px; }
#shadow-name:hover {background: #DE5D5D}
#shadow label {cursor: crosshair}
#shadow-name span {background: none}
#shadow-name:hover span {background: #DE5D5D}
#shadow-name:hover {background: none}
#shadow input[type=checkbox] {
display: none;
}
#shadow input[type=checkbox]:checked ~ h1 {opacity: 0; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease}
#shadow-info {width: 90px; height: 100px; background: none; right: 20px; top: 270px; position: absolute; font-family: old standard tt; text-transform: uppercase; color: #333; font-size: 10px; font-weight: 700;font-style: italic; overflow: none; opacity: 0; -webkit-transition: 0.4s ease;}
#shadow input[type=checkbox]:checked ~ #shadow-info {opacity: 1; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s;}
#shadow-main {background-color: rgba(255,255,255,0.5); height: 490px; width: 310px; position: absolute; left: 30px; top: 30px; opacity: 0; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease; overflow: hidden}
#shadow input[type=checkbox]:checked ~ #shadow-main {opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s;}
#shadow-text {height: 350px; width: 250px; background: #eee; position: absolute; bottom: 30px; left: 30px; opacity: 1; overflow: hidden}
#shadow-main input[type=checkbox] {
display: none;
}
#shadow-main h3 {height: 25px; line-height: 45px; text-transform: uppercase; font-family: old standard tt; text-transform: uppercase; font-size: 30px; font-weight: 700; letter-spacing: -4px; text-align: left; width: 250px; color: #333; right: 30px; position: absolute; top: 25px;}
#shadow-main abt {opacity: 1}
#shadow-main rela {opacity: 0}
#shadow-main abt, #shadow-main rela {-webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s;}
#shadow-main input[type=checkbox]:checked ~ abt {opacity: 0}
#shadow-main input[type=checkbox]:checked ~ rela {opacity: 1}
#shadow-main label {font-family: old standard tt; text-transform: uppercase; font-size: 30px; font-weight: 700; text-align: left; background: #DE5D5D; padding: 7px; color: #333; right: 30px; position: absolute; top: 57px; height: 25px; line-height: 25px; width: 30px; font-size: 10px; text-align: center}
#shadow-txt-one, #shadow-txt-two {height: 320px; width: 220px; border: 15px; text-align: justify; font-family: roboto; color: #333; overflow: auto; position: absolute; border-color: #eee; border-width: 15px 10px 15px 15px; padding-right: 5px; border-style: solid; font-size: 10px; line-height: 13px; background: #eee; bottom: 30px; -webkit-transition: 0.9s ease-in-out}
#shadow-txt-one b, #shadow-txt-two b {font-family: old standard tt; text-transform: uppercase; text-transform: uppercase; font-weight: 400; background: #DE5D5D; padding: 1px}
#shadow-txt-one {left: 30px}
#shadow-txt-two {left: 320px;}
#shadow-main input[type=checkbox]:checked ~ #shadow-txt-one {left: -260px}
#shadow-main input[type=checkbox]:checked ~ #shadow-txt-two {left: 30px}
#shadow-txt-one::-webkit-scrollbar, #shadow-txt-two::-webkit-scrollbar {width: 5px;}
#shadow-txt-one::-webkit-scrollbar-thumb, #shadow-txt-two::-webkit-scrollbar-thumb {background: #DE5D5D!important; border: 2px solid #eee!important}
#shadow-txt-one::-webkit-scrollbar-track, #shadow-txt-two::-webkit-scrollbar-track {background: #eee!important; border: none!important}
#shadow-txt-one h2, #shadow-txt-two h2 {font-family: old standard tt; text-transform: uppercase; color: #333; font-size: 25px; letter-spacing: -4px;}

</style>
<div id="shadow">
 <img src="large image here, will resize to fit!">
  <input type="checkbox" id="cast">
 <h1><span>As they took his soul they stole his pride

</span></h1>
<label for="cast"><div id="shadow-name"><span>first last +</span></div></label>
<div id="shadow-info">age
<br>membergroup
<br>a few words to describe your character
</div>
<div id="shadow-main">
 <input type="checkbox" id="of">
<abt><h3><span>about</span></h3></abt>
<rela><h3><span>relations</span></h3></rela>
<label for="of">+</label>

   <div id="shadow-txt-one">about here!</div>
   <div id="shadow-txt-two">
   <h2><span>friends</span></h2>

friends here

   <h2><span>enemies</span></h2>

enemies here

   <h2><span>lovers</span></h2>

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

[/dohtml]