VS#28 Blackjack

VS#28HTC: Blackjack

CSS

/* Last Update: 05/18/19 */

/* MUSICBOX CSS IMPORT - PLACE NOTHING ABOVE */
@import url('https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css');

/* PAGE BACKGROUND AND FONTS */
body {
background:#4C0001 url('https://dl.dropbox.com/s/oje6mfd2m23w5v5/flowery-pattern.png') center;
background-size:10% auto;
font-family:Georgia,serif;
}
#title, h2, a {
font-family:'Londrina Shadow',Georgia,serif;
}
body::before {
background:#fff url('https://upload.wikimedia.org/wikipedia/commons/b/be/Poker-sm-231-Ad.png') center;
background-size:100% 100%;
}
body::after {
background:#fff url('https://upload.wikimedia.org/wikipedia/commons/3/38/Poker-sm-241-Ac.png') center;
background-size:100% 100%;
}
.tab {
background:#4c4c4c url('https://dl.dropbox.com/s/oje6mfd2m23w5v5/flowery-pattern.png') center;
background-size:20% auto;
}

/* MAIN DISPLAY COLORS */
#title {
color:#ffd700;
text-shadow:0 0 2px #ffd700,
	0 0 10px #ffd700;
}
#mugshot {
filter:drop-shadow(0 5px 25px #000);
-webkit-filter:drop-shadow(0 5px 25px #000);
}
#table {
background:url('https://orig00.deviantart.net/1f4b/f/2018/290/5/4/buried_by_cera_nore-dcppull.png'),#2d622d linear-gradient(#2d622d,#477C47);
background:url('https://orig00.deviantart.net/1f4b/f/2018/290/5/4/buried_by_cera_nore-dcppull.png'),#2d622d -o-linear-gradient(#2d622d,#477C47);
background:url('https://orig00.deviantart.net/1f4b/f/2018/290/5/4/buried_by_cera_nore-dcppull.png'),#2d622d -moz-linear-gradient(#2d622d,#477C47);
background:url('https://orig00.deviantart.net/1f4b/f/2018/290/5/4/buried_by_cera_nore-dcppull.png'),#2d622d -webkit-linear-gradient(#2d622d,#477C47);
border:12px solid #111;
border-top-width:2px;
box-shadow:0 5px 25px #000,
	0 10vh 0 #000;
}
.color, #table a {
background-color:#fff;
color:#000;
}
.tab, body::before, body::after, #table a {
border:1vh solid #fff;
box-shadow:0 0 8px rgba(0,0,0,0.6);
}
#table a:hover {
box-shadow:0 0 2px rgba(0,0,0,0.6);
}
a {
font-weight:bold;
color:#ff0831;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#fff;
}
::-webkit-scrollbar-thumb {
background-color:#000;
}

/* CSS MEAT */
#content {
z-index:2;
position:fixed;
top:0;
height:100%;
width:47%;
min-width:72vh;
}
#mugshot {
z-index:1;
position:absolute;
left:0;
bottom:18%;
height:76%;
}
#title {
z-index:2;
position:absolute;
top:30%;
right:5%;
max-width:50%;
font-size:6.6vh;
font-weight:bold;
}
#musicbox {
display:block;
}
#table {
z-index:4;
position:absolute;
bottom:0;
left:0;
right:0;
height:18%;
border-radius:5px 5px 50% 50%;
text-align:center;
}
#table a {
display:inline-block;
position:relative;
height:13vh;
width:8vh;
margin:0 1.5%;
border-radius:10px;
overflow:hidden;
vertical-align:top;
}
#table a img {
height:100%;
}
.tab {
z-index:3;
position:absolute;
top:100vh;
left:50%;
height:50vh;
width:34vh;
border-radius:20px;
margin-left:-18vh;
transition:1s top, 2s transform 1s;
-o-transition:1s top, 2s transform 1s;
-moz-transition:1s top, 2s transform 1s;
-webkit-transition:1s top, 2s transform 1s;
}
.tab:target {
top:24vh;
}
.infobox, .infobox img, #title img {
width:100%;
}
.infobox {
display:block;
height:100%;
overflow-y:auto;
opacity:0;
transition:0s 1.6s;
-o-transition:0s 1.6s;
-moz-transition:0s 1.6s;
-webkit-transition:0s 1.6s;
}
.tab:target .infobox {
opacity:1;
}
p {
text-indent:5%;
}
#credit {
z-index:2;
position:fixed;
height:17px;
right:1%;
bottom:0;
background-color:#fff;
border-radius:5px;
}

/* MOBILE */
@media only screen and (orientation:portrait) {
	#content {
		width:95%;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Londrina+Shadow" rel="stylesheet">
<link href="https://dl.dropboxusercontent.com/s/qjodkfy4848hgxi/mirz-centering.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/s/bn9n6s0btgqnvg8/vs28-blackjack-cards.css" rel="stylesheet" type="text/css">

<div class="x-center" id="content">
<img src="https://i.pinimg.com/originals/4b/97/f4/4b97f42d1ac8cd70c218e18915b22d36.png" alt="" id="mugshot"/>

<div id="title">
<div>Blackjack</div>
<div class="x-center" id="musicbox">
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/haj2r7yfqk/Blackjack.mp3"/>
</audio>
</div>
</div>

<div id="table">
<a href="#01"><img src="https://s-media-cache-ak0.pinimg.com/736x/a3/6e/a3/a36ea364df2e55e8c9237be94b2f3ad0.jpg" alt=""/></a>
<a href="#02"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/14c262c7-7458-458e-98c4-ea42e80ec7cf/dcq4ouy-cdb13507-5476-4340-b67b-3112d3b1900b.png/v1/fill/w_707,h_1131,strp/pdft__temptation_luka_by_tuni_kun_dcq4ouy-pre.png" alt=""/></a>
<a href="#03"><img src="https://dl.dropbox.com/s/so5kjosmaj8crqa/2405920c766681132fc93a3015b564b41be2da93_hq.jpg" alt=""/></a>
<a href="#04"><img src="http://orig04.deviantart.net/c46e/f/2015/017/8/0/__temptation_luka___by_luke_flame-d8e8vv7.png" alt=""/></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Poker-sm-221-Ah.png" alt="" style="width:100%;"/></a>
</div>


<div class="tab" id="01">
<div class="infobox color">
<h2>Stats</h2>
<p style="text-align:center;text-indent:0;">
<b>Name:</b> Stat here
<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="tab" id="02">
<div class="infobox color">
<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>
</div>
</div>

<div class="tab" id="03">
<div class="infobox color">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<div class="tab" id="04">
<div class="infobox color">
<h2>OOC</h2>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</div>
</div>

</div>

<a href="http://bit.do/eePwi" target="_blank" title="VS#28">
<img src="https://i.imgur.com/loleTtJ.png" id="credit"/>
</a>