MARI CODE [WIP]

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Marck+Script|Charm|Rochester|Cookie);

body{
background-color: #fff;
background-image: linear-gradient(-45deg, #000 35%, #09040F, #0F041D, #140428, #1C0538, #230449);
background-position: bottom;
background-size: 110%;
background-repeat:no-repeat;
}

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

#overlay {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Black_right_angled_triangle_1.png/480px-Black_right_angled_triangle_1.png');
z-index: -1;
position: fixed;
background-size: 100%;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:2px;
height:5px;
}

#container {
position: absolute;
left: 8%;
top: 12%;
height: 500px;
width: 1100px;
border-left: 4px solid #000;
border-top: 4px solid #000;
border-right: 4px solid #1C0538;
border-bottom: 4px solid #1C0538;
box-shadow: 0px 0px 12px 12px #0F041D;
background-color: #140428;
background-image: url('https://www.transparenttextures.com/patterns/diamond-eyes.png');
}

#img1 {
position: absolute;
z-index: 1;
bottom: 0px;
left: 300px;
height: 340px;
width: 500px;
background-image: url('https://i.ibb.co/7KzwW5S/ezgif-com-gif-maker-4.png');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.8;
}

#title {
position: absolute;
z-index: 2;
left: 355px;
bottom: 240px;
height: 160px;
width: 400px;
background-image: url('https://i.ibb.co/Jr4MpjS/MA-RI-SOO.png');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.8;
}

#title2 {
position: absolute;
z-index: 1;
left: 0px;
top: -75px;
height: 200px;
width: 500px;
background-image: url('https://i.ibb.co/28ZvcvD/Daemon-Queen.png');
background-size: 100%;
background-repeat: no-repeat;
}

#leftbot {
position: absolute;
z-index: 1;
left: 10px;
border: 2px solid #1C0538;
background-color: #000;
box-shadow: 0px 0px 2px 2px #09040F;
bottom: 10px;
padding: 5px;
overflow-y: auto;
height: 160px;
width: 260px;
font-family: 'Marck Script';
font-size: 12px;
line-height: 16px;
color: #fff;
}

#lefttop {
position: absolute;
z-index: 2;
left: 10px;
border-top: 2px solid #1C0538;
border-left: 2px solid #1C0538;
border-bottom: 2px solid #1C0538;
border-right: 2px solid #000;
background-color: #000;
box-shadow: 0px 0px 2px 2px #;
bottom: 200px;
padding: 5px;
overflow-y: auto;
height: 260px;
width: 260px;
font-family: 'Marck Script';
font-size: 12px;
line-height: 16px;
color: #fff;
}

#righttop {
position: absolute;
z-index: 3;
right: 10px;
border-top: 2px solid #1C0538;
border-right: 2px solid #1C0538;
border-bottom: 2px solid #1C0538;
border-left: 2px solid #000;
background-color: #000;
box-shadow: 0px 0px 2px 2px #;
bottom: 200px;
padding: 5px;
overflow-y: auto;
height: 260px;
width: 260px;
font-family: 'Marck Script';
font-size: 12px;
line-height: 16px;
color: #fff;
}

#rightbot {
position: absolute;
z-index: 2;
right: 10px;
border: 2px solid #1C0538;
background-color: #000;
box-shadow: 0px 0px 2px 2px #09040F;
bottom: 10px;
padding: 5px;
overflow-y: auto;
height: 160px;
width: 260px;
font-family: 'Marck Script';
font-size: 12px;
line-height: 16px;
color: #fff;
}

#triangle-topleft {
position: absolute;
z-index: 1;
left: 188px;
border-right: 2px solid #1C0538;
border-top: 2px solid #1C0538;
border-bottom: 2px solid #1C0538;
border-left: 2px solid #000;
background-color: #000;
bottom: 201px;
width: 130px;
height: 269px;
box-shadow: 0px 0px 2px 2px #;
transform: skew(-15deg)
}

#triangle-topright {
position: absolute;
z-index: 1;
right: 188px;
border-right: 2px solid #000;
border-top: 2px solid #1C0538;
border-bottom: 2px solid #1C0538;
border-left: 2px solid #1C0538;
background-color: #000;
bottom: 201px;
width: 130px;
height: 269px;
box-shadow: 0px 0px 2px 2px #;
transform: skew(15deg)
}

#tab1 {
position: absolute;
z-index: 1;
left: 306px;
top: 234px;
border: 2px solid #1C0538;
background-color: #1C0538;
height: 60px;
width: 12px;
background-image: url('');
background-size: 100%;
transform: skew(-15deg);
box-shadow: 0px 0px 2px 2px #000;
}

#tab1:hover {
background-color: #000;
}

#tab2 {
position: absolute;
z-index: 1;
left: 361px;
top: 29px;
border: 2px solid #1C0538;
background-color: #1C0538;
height: 60px;
width: 12px;
background-image: url('');
background-size: 100%;
transform: skew(-15deg);
box-shadow: 0px 0px 2px 2px #000;
}

#tab2:hover {
background-color: #000;
}

#tab3 {
position: absolute;
z-index: 1;
right: 306px;
top: 234px;
border: 2px solid #1C0538;
background-color: #1C0538;
height: 60px;
width: 12px;
background-image: url('');
background-size: 100%;
transform: skew(15deg);
box-shadow: 0px 0px 2px 2px #000;
}

#tab3:hover {
background-color: #000;
}

#tab4 {
position: absolute;
z-index: 1;
right: 361px;
top: 29px;
border: 2px solid #1C0538;
background-color: #1C0538;
height: 60px;
width: 12px;
background-image: url('');
background-size: 100%;
transform: skew(15deg);
box-shadow: 0px 0px 2px 2px #000;
}

#tab4:hover {
background-color: #000;
}


</style>
<div id="whole" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="container">
<div id="title"></div>
<div id="title2"></div>
<div id="img1"></div>
<div id="leftbot">Testing text!</div>
<div id="rightbot"></div>
<div id="lefttop"></div>
<div id="triangle-topleft"></div>
<div id="righttop"></div>
<div id="triangle-topright"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#1"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#3"><div id="tab4"></div></a>
</div>