are you a human drone?

[CODE][dohtml]<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" 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">

<div id="orion">
  <div class="bg" style="background-image: url(LARGE IMAGE HERE WILL RESIZE"></div>
  <scr></scr>
  <li1></li1><li2></li2>
  <div class="namebit">first last
    <span>age - some info</span>
  </div>

  <input type="radio" id="tab1" name="otabs"checked>
  <label for="tab1">001<br><span>home</span></label>
    <input type="radio" id="tab2" name="otabs">
  <label for="tab2">002<br><span>about</span></label>
    <input type="radio" id="tab3" name="otabs">
  <label for="tab3">003<br><span>shipper</span></label>

  <div class="cont1">
    <div class="top">some lyrics

</div>
    <div class="btm">
    some lyrics

</div>
  </div>
  <div class="cont2">
    <div class="header">HEADER</div>


ABOUT HERE


</div>

  <div class="cont3">
  <div class="header">platonic</div>
TEXT HERE
    <div class="header">antagnonistic</div>
TEXT HERE
    <div class="header">romantic</div>
TEXT HERE
    <div class="header">familial</div>
   TEXT HERE

</div>
</div>

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

<style>
#orion {width: 480px; height: 540px; margin: auto; position: relative}
#orion input {display: none}
#orion .bg {height: 100%; width: 100%; background-size: cover; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); position: absolute}
#orion scr {height: 100%; width: 100%; position: absolute; top: 0; left: 0; mix-blend-mode: multiply; background-color: #B93D38}
#orion li1 {height: 100%; width: 1px; background: #D9EAEA; position: absolute; left: 20%; display: block}
#orion li2 {width: 80%; height: 1px; position: absolute; top: 20%; background: #D9EAEA; right: 0}
#orion .namebit {height: 20%; width: 80%; position: absolute; top: 0; right: 0; display: flex; box-sizing: border-box; flex-direction: column; justify-content: center; font-family: poppins; text-transform: uppercase; color: #D9EAEA; font-weight: 700; box-sizing: border-box; padding-left: 30px; font-size: 30px; text-shadow: 1px 1px 0 #D9EAEA, -1px -1px 0 #D9EAEA, 1px -1px 0 #D9EAEA, -1px 1px 0 #D9EAEA; color: #000; mix-blend-mode: screen; letter-spacing: 3px; line-height: 1.3}
#orion .namebit span {color: #D9EAEA; font-size: 10px; font-weight: 700; text-shadow: none; letter-spacing: 1px}
#orion .cont1, #orion .cont2, #orion .cont3 {height: calc(80% - 1px); width: calc(80% - 1px); position: absolute; bottom: 0; right: 0; opacity: 0; transition: 0.5s ease;}
#orion .cont1 {display: flex; flex-direction: column; justify-content: space-between;}
#orion .cont1 .top, #orion .cont1 .btm {height: 50%; width: 70%; box-sizing: border-box; display: flex; padding: 50px 50px 0; font-family: poppins; color: #D9EAEA; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; font-size: 15px; background: none; line-height: 1.1}
#orion .cont1 .btm {justify-content: flex-end; flex-direction: column; align-items: flex-end; padding:  0px 50px 50px; margin-left: 30%; text-align: right;}
#orion #tab1+label, #orion #tab2+label, #orion #tab3+label {font-family: poppins; display: block; position: relative; color: #D9EAEA; text-transform: uppercase; font-weight: 600; letter-spacing: 3px; font-size: 15px; width: 15%; text-align: right; left: 2.5%; top: 19%; margin-bottom: 20px; line-height: 1.4 }
#orion #tab1:checked+label, #orion #tab2:checked+label, #orion #tab3:checked+label  {text-shadow: none; color: #fff; }
#orion #tab1+label span, #orion #tab2+label span, #orion #tab3+label span {font-size: 10px; font-family: cousine; font-weight: 400; text-transform: lowercase; letter-spacing: 1px; }
#orion #tab1:checked+label ~ .cont1 {opacity: 1; z-index: 5}
#orion #tab2:checked+label ~ .cont2 {opacity: 1; z-index: 5}
#orion #tab3:checked+label ~ .cont3 {opacity: 1; z-index: 5}
#orion .cont2, #orion .cont3 {background: rgba(0,0,0,0.7); color: #fff; font-family: roboto; box-sizing: border-box; border: 40px solid transparent; overflow: auto; font-size: 11px; text-align: justify; line-height: 1.6; padding-right: 10px; border-right: 30px solid transparent; font-weight: 400; letter-spacing: 0;}
#orion .cont2 .header, #orion .cont3 .header {font-family: poppins; text-transform: uppercase; padding: 5px 0; border-bottom: 1px solid #D9EAEA; margin: 15px 0; font-size: 15px; font-weight: 700; color: #D9EAEA; letter-spacing: 2px; line-height: 1.5}
#orion .cont2 .header:nth-child(1), #orion .cont3 .header:nth-child(1) {margin-top: 0}
#orion .cont2::-webkit-scrollbar, #orion .cont3::-webkit-scrollbar {width: 7px}
#orion .cont2::-webkit-scrollbar-track, #orion .cont3::-webkit-scrollbar-track {background: transparent!important; border: 3px solid transparent!important}
#orion .cont2::-webkit-scrollbar-thumb, #orion .cont3::-webkit-scrollbar-thumb {background: transparent!important; border-top: 1px solid #D9EAEA; border-bottom: 1px solid #D9EAEA;}


</style>[/dohtml][/CODE]