VS#34 Childish War

VS#34ATS: Childish War Mk. II

CSS

/* Last Update: 10/27/18*/

/* PAGE BACKGROUND AND FONTS */
body {
background:#8d0000 url('https://orig00.deviantart.net/71bb/f/2018/286/2/0/argyle_by_cera_nore-dcpd6q3.png') fixed;
font-family:serif;
}
#title, a, #reset {
font-family:UnifrakturMaguntia, serif;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:rgba(0,0,0,0.9);
color:#ffff00;
}
.speech {
background-color:#000000;
color:#ffff00;
}
.speech.top::after {
border-left:4.5vw solid #000000;
}
.speech.bottom::after {
border-right:4.5vw solid #000000;
}
a, #reset {
background-color:rgba(0,0,0,0.9);
color:#8d0000;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#0000000;
border-radius:4px;
}
::-webkit-scrollbar-thumb {
background-color:#ffff00;
border-radius:4px;
}

/* CSS MEAT */
.mugshot {
z-index:1;
position:fixed;
top:10%;
height:90%;
transition:0s 1s;
-o-transition:0s 1s;
-moz-transition:0s 1s;
-webkit-transition:0s 1s;
}
.left {
left:0;
}
.right {
right:0;
}
.top {
top:0;
}
.bottom {
bottom:0;
}
#title {
z-index:2;
position:fixed;
top:10%;
left:40%;
height:80%;
width:20%;
}
.speech {
position:absolute;
height:40%;
width:100%;
border-radius:35px;
text-align:center;
}
.speech div {
position:absolute;
top:7.5%;
left:7.5%;
height:85%;
width:85%;
overflow:auto;
}
.speech::after {
position:absolute;
content:"";
top:50%;
transform:rotateZ(10deg);
-o-transform:rotateZ(10deg);
-moz-transform:rotateZ(10deg);
-webkit-transform:rotateZ(10deg);
}
.speech.top::after {
left:98%;
border-top:6vh solid transparent;
border-bottom:0 solid transparent;
}
.speech.bottom::after {
left:-20%;
border-top:0 solid transparent;
border-bottom:6vh solid transparent;
}
#title audio {
position:absolute;
top:50%;
max-width:100%;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#title h1 {
position:relative;
top:50%;
margin-top:-4vh;
font-size:7vh;
line-height:8vh;
}
input {
z-index:6;
position:fixed;
margin:0;
opacity:0;
cursor:pointer;
}
input:checked {
display:none;
}
#one, #three {
left:2.5%;
height:5%;
width:95%;
}
#two, #four {
top:5%;
height:90%;
width:2.5%;
}
.tab {
z-index:5;
position:fixed;
height:90%;
width:95%;
transition:all 1.5s, z-index 0s 1.5s;
-o-transition:all 1.5s, z-index 0s 1.5s;
-moz-transition:all 1.5s, z-index 0s 1.5s;
-webkit-transition:all 1.5s, z-index 0s 1.5s;
}
#slide-down {
top:-85%;
}
#slide-up {
top:95%;
}
#slide-right {
left:-92.5%;
}
#slide-left {
left:97.5%;
}
#slide-down, #slide-up,
#two:checked ~ #slide-right,
#four:checked ~ #slide-left {
left:2.5%;
}
#slide-right, #slide-left,
#one:checked ~ #slide-down,
#three:checked ~ #slide-up {
top:5%;
}
#one:checked ~ #slide-down,
#two:checked ~ #slide-right,
#three:checked ~ #slide-up,
#four:checked ~ #slide-left {
z-index:3;
transition:all 2s 1s, z-index 0s;
-o-transition:all 2s 1s, z-index 0s;
-moz-transition:all 2s 1s, z-index 0s;
-webkit-transition:all 2s 1s, z-index 0s;
}
#one:checked ~ .mugshot.left,
#two:checked ~ .mugshot.left,
#three:checked ~ .mugshot.right,
#four:checked ~ .mugshot.right {
z-index:4;
}
#reset {
z-index:7;
position:absolute;
left:2.5%;
bottom:5%;
height:22px;
width:45%;
font-size:20px;
line-height:22px;
text-align:center;
opacity:0;
transition:left 0s 2s, opacity 2s;
-o-transition:left 0s 2s, opacity 2s;
-moz-transition:left 0s 2s, opacity 2s;
-webkit-transition:left 0s 2s, opacity 2s;
}
#reset::after {
content: "Reset";
}
#reset input {
position:absolute;
left:0;
height:100%;
width:100%;
}
input:checked ~ #reset {
opacity:1;
transition:opacity 2s;
-o-transition:opacity 2s;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
}
input:checked ~ #reset input {
display:inline-block;
}
#three:checked ~ #reset,
#four:checked ~ #reset {
left:52.5%;
}
.arrow {
position:absolute;
margin:0;
}
.arrow.bottom, .arrow.top {
left:50%;
height:6%;
font-size:4.8vh;
line-height:4.6vh;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.arrow.right, .arrow.left {
top:50%;
width:3%;
font-size:2vw;
text-align:center;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
.qbox, .statbox, .infobox {
position:absolute;
width:45%;
padding:0.5%;
overflow-y:auto;
}
.qbox, .infobox {
top:6%;
}
.statbox, .infobox {
bottom:6%;
}
.qbox {
bottom:70%;
font-size:3.2vh;
}
.statbox {
top:35%;
text-align:center;
}
div[class*="box"].right {
right:3%;
}
div[class*="box"].left {
left:3%;
}
.tab img {
max-width:100%;
}
.tab a {
padding:0px 5px;
}
.qbox, .infobox p {
text-indent:5%;
}
#credit {
z-index:7;
position:fixed;
height:17px;
right:0%;
bottom:1.2%;
background-color:#ffffff;
border-radius:5px;
transform:rotateZ(-45deg);
-o-transform:rotateZ(-45deg);
-moz-transform:rotateZ(-45deg);
-webkit-transform:rotateZ(-45deg);
}

HTML

<link href="https://fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet">

<input type="radio" name="tab" class="top" id="one"/>
<input type="radio" name="tab" class="left" id="two"/>
<input type="radio" name="tab" class="bottom" id="three"/>
<input type="radio" name="tab" class="right" id="four"/>
<div id="reset"><input type="radio" name="tab"/></div>

<img src="http://pre05.deviantart.net/717f/th/pre/i/2017/123/7/f/len_childish_war_pose_by_cera_nore-db7ze9i.png" alt="" class="mugshot right"/>

<img src="http://pre00.deviantart.net/f51c/th/pre/f/2017/123/6/3/63f474b94f5fd798e6c774bfcb17e407-db7zet3.png" alt="" class="mugshot left"/>

<div id="title">
<div class="speech left top">
<div>
<h1>Childish</h1>
</div>
</div>

<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/9h7u6cdlfs/Childish_War.mp3" type="audio/mpeg">
</audio>

<div class="speech right bottom">
<div>
<h1>War</h1>
</div>
</div>
</div>


<div class="color tab" id="slide-down">
<div class="arrow bottom">↓</div>
<div class="qbox right">
"Big brother, since you usually do all this about all of the time, being so weak, I am gonna become assertive enough for us both. I want you to thank me a bit more. Even though he's older, he's not at all reliable, big brother is just a name. From today, I'm the big brother, okay? This is my decision! Yes my decision!"
</div>

<div class="statbox right">
<h2>Stats</h2>
<p>
<b>Name:</b> Kagamine Rin
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</p>
</div>
</div>


<div class="color tab" id="slide-right">
<div class="arrow right">→</div>
<div class="infobox right">
<h2>About</h2>
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<div class="color tab" id="slide-left">
<div class="arrow left">←</div>
<div class="qbox left">
"Since you always wildly run around by yourself, I can never avoid having to clean up after you. I'm not really incompetent, I'm just prudent. All the maids and butler too, have already said so. So really, please settle down a little bit for me, okay? Argh, c'mon! Shut up."
</div>

<div class="statbox left">
<h2>Stats</h2>
<p>
<b>Name:</b> Kagamine Len
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</p>
</div>
</div>


<div class="color tab" id="slide-up">
<div class="arrow top">↑</div>
<div class="infobox left">
<h2>About</h2>
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<a href="https://tinyurl.com/shimad" target="_blank" title="VS#34">
<img src="https://i.imgur.com/hJcLRPx.png" id="credit"/>
</a>