heart of wax - css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.cdnfonts.com/css/magical-childhood');

body {
background:#111!important;
margin:0;
padding:0;
}

#xg_body a {
text-decoration:none;
}

#xg_layout_column_2 {
background:transparent;
font-family:poppins;
font-size:10px;
margin-left:-110px;
margin-top:10px;
width:1200px;
height:700px;
}

::-webkit-scrollbar {
display:none;
}

#code {
position:relative;
width:940px;
height:650px;
margin:0 auto;
font-family:poppins;
}

#wholebox {
position:absolute;
left:40px;
top:35px;
width:860px;
height:500px;
border:1px solid #292929;
background:#101010;
}


/* LEFT PANEL */

#leftpanel {
position:absolute;
left:0;
top:0;
width:430px;
height:500px;
overflow:hidden;
background:#0d0d0d;
border-right:1px solid #292929;
}

#leftshape {
position:absolute;
z-index:1;
left:-15px;
top:5px;
width:300px;
height:420px;
background-image:url(https://i.imgur.com/JRHnTx4.png);
background-size:cover;
background-position:center;
opacity:.16;
filter:grayscale(100%);
transform:rotate(-15deg);
}

#limedot {
position:absolute;
z-index:9;
left:20px;
top:20px;
width:20px;
height:20px;
background:#b6e925;
border-radius:100%;
}

#limebox {
position:absolute;
z-index:3;
left:200px;
top:52px;
width:50px;
height:15px;
background:#b6e925;
}

#bigtitle {
position:absolute;
z-index:2;
left:170px;
top:185px;
width:275px;
height:190px;
font-family:'Magical Childhood',Arial Black;
font-size:70px;
font-weight:bold;
line-height:54px;
letter-spacing:-5px;
color:#b6e925;
text-align:center;
transform:rotate(-90deg);
}

#sidebarphoto {
position:absolute;
z-index:3;
right:0;
top:0;
width:150px;
height:435px;
background-image:url(https://i.pinimg.com/736x/e2/72/e1/e272e1ffa953cf58f155e6c6d6a65c77.jpg);
background-size:cover;
background-position:center;
filter:grayscale(100%);
}

#sidetext {
position:absolute;
z-index:7;
right:25px;
top:35px;
width:70px;
height:125px;
overflow:hidden;
color:#eee;
font-size:4px;
font-weight:600;
line-height:10px;
letter-spacing:.6px;
text-align:justify;
}

#pola1,
#pola2,
#pola3 {
position:absolute;
z-index:7;
width:90px;
height:100px;
border:5px solid #fff;
background-size:cover;
background-position:center;
box-shadow:0 0 3px #000;
filter:grayscale(100%);
}

#pola1 {
left:90px;
top:78px;
background-image:url(https://i.pinimg.com/736x/cc/2a/63/cc2a632ff4f76372feea8bf2d4c2d013.jpg);
transform:rotate(8deg);
}

#pola2 {
left:125px;
top:230px;
background-image:url(https://i.pinimg.com/736x/c8/22/2a/c8222a5e1f8388c7c2468d4715a1b0e1.jpg);
transform:rotate(16deg);
}

#pola3 {
left:50px;
top:175px;
background-image:url(https://i.pinimg.com/1200x/5b/39/1c/5b391ca5a43512e335dc224b7160553a.jpg);
transform:rotate(-9deg);
}

#personpng {
position:absolute;
z-index:10;
right:0px;
bottom:0;
width:260px;
height:500px;
background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204397852?profile=original);
background-size:cover;
background-position:center;
filter:grayscale(100%) brightness(70%);
}

#subtitle {
position:absolute;
z-index:12;
left:20px;
bottom:78px;
width:120px;
height:45px;
overflow:hidden;
color:#db3291;
font-size:5px;
font-weight:bold;
line-height:12px;
letter-spacing:.2px;
text-align:justify;
}

#pinkmenu {
position:absolute;
z-index:20;
left:0;
bottom:0;
width:430px;
height:65px;
background:#df3090;
text-align:center;
line-height:65px;
}

#pinkmenu a {
display:inline-block;
width:85px;
height:65px;
margin:0 5px;
color:#b6e925!important;
font-size:6px;
font-weight:800;
letter-spacing:.7px;
text-transform:lowercase;
text-align:center;
}

#pinkmenu a:hover {
color:#fff!important;
}

#sidedots {
position:absolute;
z-index:20;
left:-18px;
top:180px;
width:10px;
height:150px;
}

#sidedots span {
display:block;
width:5px;
height:5px;
margin-bottom:20px;
background:#df3090;
border-radius:100%;
}


/* RIGHT PANEL */

#rightpanel {
position:absolute;
left:430px;
top:0;
width:430px;
height:500px;
background:#101010;
}

#featurebox {
position:absolute;
left:47px;
top:48px;
width:340px;
height:320px;
overflow:hidden;
border:1px solid #2b2b2b;
background:#111;
}

#featurephoto {
position:absolute;
z-index:3;
left:20px;
top:20px;
width:230px;
height:150px;
background-image:url(https://i.pinimg.com/736x/cc/2a/63/cc2a632ff4f76372feea8bf2d4c2d013.jpg);
background-size:cover;
background-position:center;
filter:grayscale(100%);
}

#featuretext {
position:absolute;
z-index:5;
left:20px;
top:190px;
width:230px;
height:42px;
overflow:hidden;
color:#929292;
font-family:'Roboto Mono',monospace;
font-size:8px;
font-weight:bold;
line-height:14px;
letter-spacing:.2px;
text-align:justify;
}

#navtitle {
position:absolute;
z-index:7;
left:20px;
bottom:-14px;
width:300px;
height:100px;
color:#b6e925;
font-family:'Magical Childhood',Arial Black;
font-size:49px;
font-weight:bold;
line-height:37px;
letter-spacing:-4px;
text-align:left;
}

#pinkbar {
position:absolute;
z-index:5;
right:0;
top:0;
width:70px;
height:320px;
background-color:#df3090;
background-image:url(https://i.imgur.com/JRHnTx4.png);
background-size:cover;
background-position:center;
}


/* SIX LINKS */

#linkbox {
position:absolute;
left:25px;
bottom:15px;
width:380px;
height:70px;
}

#linkbox a {
display:inline-block;
width:120px;
height:27px;
margin:2px 1px;
border:1px solid #292929;
background:#101010;
color:#b6e925!important;
font-size:7px;
font-weight:800;
line-height:27px;
text-align:center;
box-sizing:border-box;
}

#linkbox a:hover {
background:#df3090;
color:#fff!important;
}

#linkbox span {
display:inline-block;
width:4px;
height:4px;
margin-right:10px;
border:1px solid #df3090;
border-radius:100%;
background:#df3090;
}


/* NING CLEANUP */

h1,h2,h3,
#xg_head,
#xg_foot,
#xg_layout_column_1,
.xg_module.xg_module_comment_wall,
.xg_span-5,
ul.nobullets.last-child,
.xg_chat.chatFooter,
li.right,
#xn_bar,
#xn_bar_menu_tabs,
#xn_bar_menu_more,
p#xn_gyo_link,
p#xn_brand {
display:none!important;
}