Lysander

<style>

body {
  background: black;
}

@font-face {
  font-family: "statfont";
  src: url("https://dl.dropboxusercontent.com/s/wptl4ci1iyijrd7/Waukegan%20LDO%20Oblique.ttf?dl=0");
}

@font-face {
  font-family: "quesfont";
  src: url("https://dl.dropboxusercontent.com/s/v810wm406kpwx2l/October%20Crow.ttf?dl=0");
}

@font-face {
  font-family: "poemfont";
  src: url("https://dl.dropboxusercontent.com/s/eh4l1uegrjfhlrm/bloodcrowl.ttf?dl=0");
}

@font-face{
font-family:'extrafont';
src:url('https://dl.dropboxusercontent.com/s/vvais1bnazukjgq/magic11.ttf?dl=0');}

::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #111111;
}

.extracontent2::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: white;
}

#whole {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#container {
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 700px;
  width: 1000px;
  background-color: white;
  background-image: url("https://i.imgur.com/Sxb2qb1.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto 100.5%;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#introduction {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.85);
}

#introbird1, #introbird2 {
  position: absolute;
  bottom: 2px;
  right: 7px;
  height: 100px;
  width: 100px;
  background-image: url(https://i.imgur.com/VPruqYE.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-filter: drop-shadow(0px 0px 1px black);
  -webkit-transition: all 1s;
  transition: all 1s;
}

#introbird1:hover, #introbird2:hover {
  -webkit-filter: drop-shadow(0px 0px 10px black);
}

#introbird1:hover:after, #introbird2:hover:after {
  -webkit-filter: drop-shadow(0px 0px 0px black);
  opacity: 1;
}

#introbird1:after, #introbird2:after {
  content: "Crows Fall";
  font-family: "quesfont", Arial;
  font-size: 22px;
  position: absolute;
  top: -30px;
  left: -10px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  letter-spacing: 1px;
  text-decoration: none;
  color: black;
}

#smallstats {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 150px;
  width: 110px;
  box-shadow: -5px 5px 1px rgba(000, 000, 000, 0.13);
}

#smallstats:before,
#smallstats:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  box-sizing: border-box;
}

#smallstats:before {
  top: 7px;
  bottom: -7x;
  border-right: 3px solid black;
}

#smallstats:after {
  right: 3px;
  left: -3px;
  border-top: 3px solid black;
}

#smallstatcontainer {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 3px;
  right: 0px;
  bottom: 5px;
  color: black;
  font-family: "statfont", Arial;
  text-align: left;
  box-sizing: border-box;
  padding-left: 2px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.7px;
  line-height: 19px;
}

#smallstatcontainer i {
  font-style: normal;
  font-size: 14px;
}

#warningdiv {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 60px;
  width: 280px;
  box-shadow: -2px 2px 3px black;
  color: black;
  font-family: "statfont";
  font-size: 14px;
  box-sizing: border-box;
  padding-top: 7px;
  text-align: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#warningdiv a {
  margin-right: 10px;
  font-family: "quesfont";
  text-shadow: 0px 0px 0px black;
  font-size: 20px;
  color: black;
  font-weight: 600;
  text-decoration: none;
  line-height: 35px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#warningdiv:target {
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  opacity: 1;
}

#warningdiv:target a {
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  opacity: 1;
}

#poemdiv {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: left;
  font-family: "poemfont";
  font-size: 25px;
  padding-left: 100px;
  padding-top: 30px;
  line-height: 28px;
  color: white;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 1s, z-index 0.1s 1s;
  transition: all 1s, z-index 1s 0.1s;
}

#poemdiv i {
  font-style: normal;
}

#poemdiv i:nth-child(1),
#poemdiv i:nth-child(4),
#poemdiv i:nth-child(7),
#poemdiv i:nth-child(10),
#poemdiv i:nth-child(13),
#poemdiv i:nth-child(16),
#poemdiv i:nth-child(19),
#poemdiv i:nth-child(22) {
  -webkit-transition: all 1s;
  transition: all 1s;
  color: white;
  text-shadow: 0px 0px 20px black;
}

#div1:target ~ #whole #introduction * {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#div1:target ~ #whole #poemdiv {
  -webkit-transition: all 1s 0.3s, z-index 0.1s;
  transition: all 1s 0.3s, z-index 0.1s;
  z-index: 1;
  opacity: 1;
}

#div1:target ~ #whole #poemdiv i:nth-child(1),
#div1:target ~ #whole #poemdiv i:nth-child(4),
#div1:target ~ #whole #poemdiv i:nth-child(7),
#div1:target ~ #whole #poemdiv i:nth-child(10),
#div1:target ~ #whole #poemdiv i:nth-child(13),
#div1:target ~ #whole #poemdiv i:nth-child(16),
#div1:target ~ #whole #poemdiv i:nth-child(19),
#div1:target ~ #whole #poemdiv i:nth-child(22) {
  text-shadow: 0px 0px 0px black;
  -webkit-transition: all 1s 10s;
  transition: all 1s 10s;
  color: black;
}

#div1:target ~ #whole #poemdiv i:nth-child(1) {
  -webkit-transition: all 1s 1s, text-shadow 1s 0.5s;
  transition: all 1s 1s, text-shadow 1s 0.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(4) {
  -webkit-transition: all 1s 3s, text-shadow 1s 2.5s;
  transition: all 1s 3s, text-shadow 1s 2.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(7) {
  -webkit-transition: all 1s 5s, text-shadow 1s 4.5s;
  transition: all 1s 5s, text-shadow 1s 4.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(10) {
  -webkit-transition: all 1s 7s, text-shadow 1s 6.5s;
  transition: all 1s 7s, text-shadow 1s 6.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(13) {
  -webkit-transition: all 1s 9s, text-shadow 1s 8.5s;
  transition: all 1s 9s, text-shadow 1s 8.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(16) {
  -webkit-transition: all 1s 11s, text-shadow 1s 10.5s;
  transition: all 1s 11s, text-shadow 1s 10.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(19) {
  -webkit-transition: all 1s 13s, text-shadow 1s 12.5s;
  transition: all 1s 13s, text-shadow 1s 12.5s;
}
#div1:target ~ #whole #poemdiv i:nth-child(22) {
  -webkit-transition: all 1s 15s, text-shadow 1s 14.5s;
  transition: all 1s 15s, text-shadow 1s 14.5s;
}

#introbird2{
  opacity: 0;
  background-image:url(https://i.imgur.com/lB7guqV.png);
}

#introbird2:after{
  content:'Fly Deeper';
}

#div1:target ~ #whole #introbird2{
  -webkit-transition: all 1s 2s, filter 1s;
  transition: all 1s 2s, filter 1s;
  opacity: 1;
}

#div2:target ~ #whole #poemdiv{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#div2:target ~ #whole #container *{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#whitesheet{
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-transition: all 1s;
  transition: all 1s;
}

#whitesheet:before{
  content:'';
  z-index: 0;
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: rgba(000,000,000,0.3);
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: -1;
  box-shadow: -3px 3px 5px black;
}

#container2{
    position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 700px;
  width: 1000px;
  z-index: -1;
  overflow: hidden;
}

#div2:target ~ #whole #container2{
  -webkit-transition: all 0s;
  transition: all 0s;
  z-index: 1;
  opacity: 1;
}

#div2:target ~ #whole #container2 #whitesheet{
  -webkit-transition: all 2s;
  transition: all 2s;
 height: 200px;
  width: 400px;
  background: white;
  left: -130px;
}

#div2:target ~ #whole #container2 #whitesheet:before{
  -webkit-transition: all 1s 1.5s;
  transition: all 1s 1.5s;
  opacity: 1;
}

#rings{
  z-index: 1;
  border: 10px solid rgba(255,255,255,.2);
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 600px;
  width: 900px;
  -webkit-transition: all 2s;
  transition: all 2s;
}

#rings:nth-child(5){
  height: 530px;
  width: 820px;
}

#rings:nth-child(6){
    height: 460px;
  width: 740px;
}

#rings:nth-child(7){
  height: 390px;
  width: 660px;
}

#rings:nth-child(8){
  height: 300px;
  width: 580px;
}

#crowcursed{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 180px;
  width: 380px;
  padding: 10px;
  font-family: 'statfont';
  font-size: 14px;
  color: black;
  overflow: auto;
  -webkit-transition: all 1s;
  transition: all 1s;
  letter-spacing: 1.2px;
  opacity: 0;
  z-index: 2;
}

#div2:target ~ #whole #crowcursed{
  -webkit-transition: all 1s 2s;
  transition: all 1s 2s;
  opacity: 1;
}

#audiocover{
  position: absolute;
  overflow: hidden;
  top: 10px;
  left: 10px;
  width: 31px;
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 2;
}

#div1:target ~ #audiocover,
#div2:target ~ #audiocover{
  -webkit-transition: all 2s;
  transition: all 1s;
  opacity: 0.1;
}

#extradiv,
#extradiv2,
#extradiv3,
#extradiv4{
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 190px;
  left: 450px;
  height: 10px;
  width: 100px;
  background: white;
  box-sizing: border-box;
  border-top: 2px solid black;
  box-shadow: -2px 2px 5px black;
  z-index: 2;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#div2:target ~ #whole #container2 #extradiv,
#div2:target ~ #whole #container2 #extradiv2,
#div2:target ~ #whole #container2 #extradiv3,
#div2:target ~ #whole #container2 #extradiv4{
  opacity: .7;
}

#div2:target ~ #whole #container2 #extradiv{
  -webkit-transition: all 1s 2s;
  transition: all 1s 2s;
}

#div2:target ~ #whole #container2 #extradiv2{
  -webkit-transition: all 1s 2.2s;
  transition: all 1s 2.2s;
}

#div2:target ~ #whole #container2 #extradiv3{
  -webkit-transition: all 1s 2.4s;
  transition: all 1s 2.4s;
}

#div2:target ~ #whole #container2 #extradiv4{
  -webkit-transition: all 1s 2.6s;
  transition: all 1s 2.6s;
}

#extradiv2{
  bottom: 140px;
}

#extradiv3{
  bottom: 90px;
}

#extradiv4{
  bottom: 40px;
}

#extrawindow{
  position: absolute;
    position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 247px;
  left: 450px;
  height: 31px;
  width: 100px;
  font-family:'statfont';
  font-size: 25px;
  color: black;
  font-weight: 800;
  text-shadow: -1px 1px 10px rgba(255,255,255,0.6);
  text-align: center;
  background-color: rgba(255,255,255,0.6);
  box-sizing: border-box;
  padding-top: 2px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.extralink:hover ~ #extrawindow:nth-child(14),
.extralink2:hover ~ #extrawindow:nth-child(15),
.extralink3:hover ~ #extrawindow:nth-child(16),
.extralink4:hover ~ #extrawindow:nth-child(17){
  opacity: 1;
}

#extradiv:hover,
#extradiv2:hover,
#extradiv3:hover,
#extradiv4:hover{
  -webkit-transition: all 1s !important;
  transition: all 1s !important;
  opacity: 1 !important;
}

#switch1, #switch2, #switch3{
  opacity: 0;
}

#switch1:checked ~ #rings,
#switch2:checked ~ #rings{
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 920px;
}

#switch1:checked ~ #rings:nth-child(5),
#switch2:checked ~ #rings:nth-child(5){
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 880px;
}

#switch1:checked ~ #rings:nth-child(6),
#switch2:checked ~ #rings:nth-child(6){
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 840px;
}

#switch1:checked ~ #rings:nth-child(7),
#switch2:checked ~ #rings:nth-child(7){
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 800px;
}

#switch1:checked ~ #rings:nth-child(8),
#switch2:checked ~ #rings:nth-child(8){
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 760px;
}

#switch1:checked ~ #whitesheet,
#switch2:checked ~ #whitesheet{
  -webkit-transition: all 1s !important;
  transition: all 1s !important;
  left: -210px !important;
}

#switch3:checked ~ #whitesheet{
  -webkit-transition: all 1s linear !important;
  transition: all 1s linear !important;
}

#extracontainer{
  position: absolute;
  margin: auto;
  top: 105px;
  left: 465px;
  right: 0px;
  bottom: 0px;
  height: 100px;
  width: 250px;
  background: rgba(000,000,000,0.8);
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.1);
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#switch1:checked ~ #extracontainer,
#switch2:checked ~ #extracontainer{
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  opacity: 1;
}



.extracontent, .extracontent2{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  font-family: 'extrafont';
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 2px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  z-index: 0;
  padding: 5px;
  line-height: 22px;
}

#switch1:checked ~ #extracontainer .extracontent,
#switch2:checked ~ #extracontainer .extracontent2{
  opacity: 1;
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  z-index: 1;
}



/* DELETE THIS
#introduction{
  opacity: 0;
}

#container2{
  opacity: 1;
  z-index: 2;
}

#whitesheet{
  opacity: 0;
}

*/

</style>

<div id="div1">
</div>

<div id="div2">
</div>

<div id="audiocover">
 <audio controls src="http://k003.kiwi6.com/hotlink/ozx7j5k8ix/The_Weaver_of_Worlds_Emotional_Epic_-_Lucas_Brodan_VOL.mp3" id="TheMusic" loop=3 />
</div>

<div id="whole">

 <div id="container">

 <div id="introduction">
 <a href="#warningdiv">
 <div id="introbird1">
 </div>
 </a>
 <div id="smallstats">
 <div id="smallstatcontainer">
 <b>Lysander.</b><br>
 <i>Male.<br>
 Red Fox.<br>
5'10".<br>
 27 years.<br>
 Heterosexual.<br>
 Crow-cursed.
 </i>
 </div>
 </div>
 <div id="warningdiv">
 This selection will start music. Do you accept?<br>
 <a href="#div1" onclick="document.getElementById('TheMusic').play()">YES</a>
 <a href="#blank">NO</a>
 </div>
 </div>

 <div id="poemdiv">
 <i>When Crow was white he decided the sun was too white. <br>
 He decided it glared much too whitely. <br>
 He decided to attack it and defeat it. </i><br><br>

 <i>He got his strength flush and in full glitter. <br>
He clawed and fluffed his rage up. <br>
 He aimed his beak direct at the sun's centre. </i><br><br>

 <i>He laughed himself to the centre of himself</i><br><br>

 <i>And attacked. </i><br><br>

 <i>At his battle cry trees grew suddenly old, <br>
 Shadows flattened. </i><br><br>

 <i>But the sun brightened-<br>
 It brightened, and Crow returned charred black. </i><br><br>

 <i>He opened his mouth but what came out was charred black. </i><br><br>

 <i>"Up there," he managed, <br>
 "Where white is black and black is white, I won."</i>

 <a href="#div2">
 <div id="introbird2">
 </div>
 </div>
 </a>


 </div>

 <div id="container2">

 <input type="radio" name="divswitch" id="switch1">
 <input type="radio" name="divswitch" id="switch2">
 <input type="radio" name="divswitch" id="switch3">


 <div id="rings">
 </div>
 <div id="rings">
 </div>
 <div id="rings">
 </div>
 <div id="rings">
 </div>
 <div id="rings">
 </div>
 <div id="whitesheet">
 <div id="crowcursed">
 <b>Lysander Desmonds // A Murder Of Crows</b><br><br> A private detective searching for answers in a society with questions waiting at every corner, Lysander has learned to hold himself back from getting too involved in any particular case. Even
 with this particular detachment from his job, his life still contains its own set of difficulties, primarily elements from his past that still manage to filter through his life and catch him off guard. Out of contact with most of his immediately
 family and living life by his own schedule, there are few things he enjoys more than just relaxing with a book.
 </div>
 </div>

 <label for="switch1" class="extralink"><div id="extradiv">
 </div></label>
 <label for="switch2" class="extralink2"><div id="extradiv2">
 </div></label>
 <label for="switch3" class="extralink3"><div id="extradiv3">
 </div></label>
 <a href="#blank" class="extralink4"><div id="extradiv4">
 </div></a>

 <div id="extrawindow">
 Assocs.
 </div>

 <div id="extrawindow">
 OOC.
 </div>

 <div id="extrawindow">
 Reset.
 </div>

 <div id="extrawindow">
 Return.
 </div>

 <div id="extracontainer">
 <div class="extracontent">
 The detective knows no one.
 </div>
 <div class="extracontent2">
 I coded this profile myself.<br>
 Art is not my own, but owned.<br>
'Crow's Fall' is a poem by Tom Hughes.<br>
Music is 'The Weaver of Worlds' by Lucas Brodan.<br>
 Work in progress.<br>
 </div>
 </div>

 </div>

</div>