ZARAKI CODE [WIP]

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Trade+Winds|Rokkitt|Ubuntu+Condensed|Satisfy|Staatliches|Overlock|Bangers|Bebas+Neue);

body{
background-color: #fff;
background-image: url('');
background-position: bottom;
background-size: 110%;
background-repeat:no-repeat;
}

#render {
position: fixed;
left: 0vw;
height: 104vh;
width: 33vw;
background-color: transparent;
border-radius: 0%;
background-image: url('https://i.pinimg.com/564x/cb/14/7f/cb147f941e7e515d2d4b7a0e2f011a10.jpg');
bottom: 0vh;
background-repeat: no-repeat;
z-index: 5;
}

#point {
position: absolute;
left: 22vw;
bottom: 17vh;
width: 0;
height: 0;
border-top: 300px solid transparent;
border-right: 300px solid black;
border-bottom: 300px solid transparent;
background-image: url('');
z-index: 6;
}

#box {
position: absolute;
left: 39.6vw;
bottom: 17vh;
height: 72.6vh;
width: 50vw;
border: 5px solid #000;
background-color: #000;
z-index: 6;
}

#container {
position: fixed;
z-index: 6;
bottom: 19vh;
left: 71vw;
height: 32vh;
width: 18vw;
background-color: #111;
color: #fff;
font-size: 13px;
font-family: 'Ubuntu Condensed';
line-height: 15px;
opacity: 1;
box-shadow: 0px 0px 2px 2px #222;
overflow-y: auto;
padding: 1px;
}

#gif {
position:absolute;
width:13vw;
height:26vh;
z-index:6;
bottom: 21vh;
border-radius:50%;
border:12px solid #0f0f0f;
background-position: center, center;
background-image: url('https://i.gifer.com/370q.gif');
background-color: #111;
box-shadow:1px 1px 10px #f5f5f5;
left: 60vw;

</style>

<div id="render"></div>
<div id="point"></div>
<div id="box"></div>
<div id="container"></div>
<div id="gif"></div>