lost in the basement

[dohtml]<link href="https://fonts.googleapis.com/css?family=Libre+Franklin: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=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

<style>
#irid {height: 660px; width: 530px; background: #000; position: relative; margin: auto}
#irid .imgbit {height: 470px; width: 530px; position: absolute; background: none; top: 20px;}
#irid .imgbit img {height: 100%; width: 100%; object-fit: cover; -webkit-filter: grayscale(100%) brightness(50%); -moz-filter: grayscale(100%) brightness(50%); filter: grayscale(100%) brightness(50%); position: absolute;}
#irid .imgbit scr {height: 100%; width: 100%; background-color: #903333; mix-blend-mode: overlay; position: absolute}
#irid .namebit {height: 100px; display: flex; width: 100%; flex-direction: column; box-sizing: border-box; padding: 0 50px; position: absolute; top: 440px; background:none; color: #eee; justify-content: center; text-transform: uppercase; font-family: libre franklin; font-style: italic;font-weight: 800; font-size: 50px; line-height: 0.9; align-items: flex-end; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; transition: 0.5s ease}
#irid .namebit span {color: #000; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; mix-blend-mode: screen;}
#irid .lyricbit, #irid .infobit {width: 80%; position: absolute; left: 35px; bottom: 35px; height: 70px; background: none; font-family: libre franklin; text-transform: uppercase; letter-spacing: 1px; color: #ccc; flex-direction: column; display: flex; justify-content: flex-end; font-size: 10px; font-weight: 600; font-style: italic; line-height: 1.6;- webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; transition: 0.5s ease}
#irid .lyricbit span, #irid .infobit span {font-weight: 900; color: #903333; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px}
#irid:hover .lyricbit {opacity: 0}
#irid:hover .infobit {opacity: 1}
#irid .infobit {opacity: 0}
#irid .mainbit {position: absolute; height: 340px; width: 530px; background: none; top: 50px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; opacity: 0; transition: 0.8s ease; -webkit-transition: 0.8s ease; -moz-transition: 0.8s ease}
#irid input {display:none}
#irid .tabbit {height: 100%; width: 130px; background: rgba(0,0,0,0.6); border-right: 1px solid #fff; position: absolute}
#irid #click1+label, #irid #click2+label {height: 65px; position: absolute; width: 338px; background: none; display: flex; flex-direction: column; box-sizing: border-box; transform: rotate(-90deg); top: 138px; align-items: flex-start; color: #ccc; font-family: libre franklin; text-transform: uppercase; font-weight: 900; font-size: 20px; font-style: italic; letter-spacing: 1.5px; cursor: crosshair; line-height: 1; padding: 0 60px;}
#irid #click1+label {left: -136px; justify-content: flex-end; padding-bottom: 5px;  }
#irid #click2+label {left: calc(-136px + 65px); justify-content: flex-start; padding-top: 5px }
#irid #click1:checked+label, #irid #click2:checked+label {color: #903333}
#irid .cont1, #irid .cont2 {height: calc(100% - 30px); width: calc(100% - 30px - 130px); background: rgba(0,0,0,0.7); outline: 1px solid #fff; border: 30px solid transparent; box-sizing: border-box; top: 15px; position: absolute; right: 15px; opacity: 0; transition: 0.4s ease; -moz-transition: 0.4s ease; -webkit-transition: 0.4s ease; font-family: open sans; color: #eee; overflow: auto; font-size: 11px; text-align: justify; line-height: 1.5}
#irid .cont1 .header, #irid .cont2 .header {font-family: libre franklin; color: #903333; text-transform: uppercase; font-weight: 900; letter-spacing: 2px; font-size: 12px; margin: 10px 0; line-height: 1.2; font-style: italic;}
#irid .cont1::-webkit-scrollbar, #irid .cont2::-webkit-scrollbar {width: 0}
#irid #click1:checked+label ~ .cont1 {opacity: 1; z-index: 5}
#irid #click2:checked+label ~ .cont2 {opacity: 1; z-index: 5}
#irid:hover .mainbit {opacity: 1}

</style>

<div id="irid">
  <div class="imgbit">
    <img src="LARGE IMAGE HERE WILL RESIZE TO FIT">
    <scr></scr>
  </div>
  <div class="namebit"><span>FIRST</span>LAST</div>
  <div class="lyricbit"><span>LYRIC/TITLE</span>OTHER LYRICS</div>
  <div class="infobit"><span>MEMBERGROUP</span>INFO<br>MORE INFO<br>INFO</div>

<div class="mainbit">
  <div class="tabbit"></div>
  <input type="radio" id="click1" name="lbtabs" checked>
  <label for="click1">about</label>
    <input type="radio" id="click2" name="lbtabs">
  <label for="click2">relationships</label>
  <div class="cont1"><div class="header">this is a header and it will expand</div>

TEXT HERE


</div>
    <div class="cont2">
      <div class="header">platonic</div>
TEXT HERE
      <div class="header">antagonistic</div>
TEXT HERE
      <div class="header">romantic</div>
TEXT HERE
      <div class="header">familial</div>
      TEXT HERE

    </div>

</div>
</div>
<a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 530px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>

[/dohtml]