online - css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Roboto+Mono:wght@400;600;700&display=swap');

body{
background:#050505!important;
}

#xg_layout_column_2{
background:transparent;
font-family:Poppins,sans-serif;
font-size:10px;
margin-left:-70px;
margin-top:95px;
width:1100px;
height:540px;
}

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

#code{
position:relative;
width:590px;
height:490px;
margin:0 auto;
font-family:Poppins,sans-serif;
}

#lovebox{
position:absolute;
left:103px;
top:8px;
width:500px;
height:445px;
overflow:hidden;
background:#070707;
border:1px solid #202020;
border-radius:28px;
transform:scale(.735);
transform-origin:top left;
}

/* LEFT PANEL */

#leftpanel{
position:absolute;
left:0;
top:0;
width:250px;
height:400px;
border-right:1px solid #202020;
}

#updatebar{
position:absolute;
left:10px;
top:13px;
width:225px;
height:39px;
background:#090909;
border:1px solid #202020;
border-radius:16px 0 0 16px;
}

#updatelabel{
position:absolute;
left:14px;
top:0;
height:39px;
color:#dc4f95;
font-size:7px;
font-weight:800;
line-height:39px;
letter-spacing:3px;
text-transform:uppercase;
}

#updatetext{
position:absolute;
left:128px;
top:0;
width:82px;
height:39px;
overflow:hidden;
color:#777;
font-family:'Roboto Mono',monospace;
font-size:7px;
font-weight:700;
line-height:39px;
letter-spacing:.5px;
white-space:nowrap;
}

#starbutton{
position:absolute;
z-index:25;
right:6px;
top:10px;
width:34px;
height:34px;
background:#050505;
border:1px solid #202020;
border-radius:50%;
color:#2b9efd;
font-size:19px;
line-height:34px;
text-align:center;
}

#leftimage{
position:absolute;
left:0;
top:55px;
width:250px;
height:295px;
overflow:hidden;
background:#050505;
border-top:3px solid transparent;
border-image:linear-gradient(90deg,#2b9efd,#e1a94c,#dc4f95) 1;
}

.grid{
position:absolute;
inset:-90px;
background-image:
linear-gradient(45deg,transparent 49%,#1c1c1c 49%,#1c1c1c 51%,transparent 51%),
linear-gradient(-45deg,transparent 49%,#1c1c1c 49%,#1c1c1c 51%,transparent 51%);
background-size:92px 92px;
opacity:.75;
}

#leftportrait{
position:absolute;
z-index:5;
left:-48px;
bottom:-4px;
width:315px;
height:328px;
background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204398901?profile=original);
background-size:contain;
background-repeat:no-repeat;
background-position:center bottom;
filter:
grayscale(100%)
contrast(1.06)
drop-shadow(-2px 0 #dc4f95)
drop-shadow(2px 0 #2b9efd)
drop-shadow(0 2px #e1a94c);
pointer-events:none;
}

.dot{
position:absolute;
z-index:3;
width:8px;
height:8px;
background:#dc4f95;
border-radius:50%;
}

#dot1{
left:40px;
top:52px;
}

#dot2{
left:202px;
top:111px;
}

#dot3{
left:39px;
top:209px;
}

#dot4{
left:204px;
top:255px;
}

#leftarrow,
#rightarrow{
position:absolute;
z-index:30;
top:176px;
width:39px;
height:39px;
background:#060606;
border:1px solid #202020;
border-radius:50%;
color:#2b9efd!important;
font-size:27px;
line-height:36px;
text-align:center;
text-decoration:none!important;
}

#leftarrow{
left:-21px;
}

#rightarrow{
right:-21px;
}

#leftarrow:hover,
#rightarrow:hover{
background:#111;
}

#leftcard{
position:absolute;
z-index:30;
left:21px;
top:298px;
width:218px;
height:83px;
background:rgba(38,38,38,.9);
border:1px solid #292929;
border-radius:21px;
box-shadow:0 6px 18px rgba(0,0,0,.42);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

#iconring{
position:absolute;
left:14px;
top:18px;
width:43px;
height:43px;
padding:3px;
background:linear-gradient(145deg,#2b9efd,#e1a94c,#dc4f95);
border-radius:50%;
}

#profileicon{
width:43px;
height:43px;
background-image:url(https://i.pinimg.com/736x/10/17/5e/10175e1de82a189dde1e46737af05564.jpg);
background-size:cover;
background-position:center;
border-radius:50%;
filter:grayscale(100%);
}

#online{
position:absolute;
right:9px;
top:-13px;
width:81px;
height:25px;
background:#742044;
border:1px solid #dc4f95;
border-radius:15px;
color:#fff;
font-size:8px;
font-weight:800;
line-height:25px;
letter-spacing:3px;
text-align:center;
text-transform:uppercase;
}

#leftdescription{
position:absolute;
left:77px;
top:22px;
width:123px;
height:43px;
overflow-y:scroll;
overflow-x:hidden;
color:#888;
font-family:'Roboto Mono',monospace;
font-size:8px;
font-weight:700;
line-height:15px;
letter-spacing:.5px;
scrollbar-width:none;
-ms-overflow-style:none;
}

#leftdescription::-webkit-scrollbar,
#rightdescription::-webkit-scrollbar{
display:none;
width:0;
height:0;
}

/* RIGHT PANEL */

#rightpanel{
position:absolute;
left:250px;
top:0;
width:250px;
height:400px;
}

#rightimage{
position:absolute;
left:43px;
top:67px;
width:202px;
height:201px;
overflow:hidden;
background:#050505;
border:1px solid #202020;
border-radius:24px;
}

.smallgrid{
inset:-70px;
background-size:75px 75px;
}

#rightportrait{
position:absolute;
z-index:4;
right:-2px;
bottom:-2px;
width:202px;
height:201px;
background-image:url(https://64.media.tumblr.com/c881873cbb2ee2ba7602746cc945281f/b6eaaa0ed109cef0-1c/s400x600/7ae03a349f7763878cb2f17b1abfc3c817541bee.gifv);
background-size:cover;
background-position:center top;
filter:
grayscale(100%)
contrast(1.05)
drop-shadow(-2px 0 #dc4f95)
drop-shadow(2px 0 #2b9efd);
pointer-events:none;
}

#live{
position:absolute;
z-index:100;
right:29px;
top:51px;
width:88px;
height:25px;
background:#742044;
border:1px solid #dc4f95;
border-radius:15px;
color:#fff;
font-size:8px;
font-weight:800;
line-height:25px;
letter-spacing:3px;
text-align:center;
text-transform:uppercase;
}

#liveindicator{
position:absolute;
z-index:101;
right:9px;
top:57px;
width:12px;
height:12px;
background:#727b19;
border:1px solid #e1a94c;
border-radius:50%;
}

#descriptioncard{
position:absolute;
z-index:20;
left:7px;
top:230px;
width:190px;
height:150px;
background:rgba(36,36,36,.88);
border:1px solid #292929;
border-radius:24px;
box-shadow:0 7px 22px rgba(0,0,0,.42);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

#plusbutton{
position:absolute;
left:67px;
top:-31px;
width:55px;
height:55px;
background:
linear-gradient(#050505,#050505) padding-box,
linear-gradient(145deg,#2b9efd,#e1a94c,#dc4f95) border-box;
border:3px solid transparent;
border-radius:50%;
color:#2b9efd;
font-size:36px;
line-height:50px;
text-align:center;
}

#rightdescription{
position:absolute;
left:23px;
top:36px;
width:144px;
height:108px;
overflow-y:scroll;
overflow-x:hidden;
color:#7f7f7f;
font-family:'Roboto Mono',monospace;
font-size:8px;
font-weight:700;
line-height:18px;
letter-spacing:.7px;
text-align:justify;
scrollbar-width:none;
-ms-overflow-style:none;
}

/* STRUCTURE LINES */

#verticaldivider{
position:absolute;
left:355px;
top:268px;
width:1px;
height:132px;
background:#202020;
}

#horizontaldivider{
position:absolute;
left:355px;
top:268px;
width:145px;
height:1px;
background:#202020;
}

#bottomdivider{
position:absolute;
left:0;
bottom:44px;
width:500px;
height:1px;
background:#202020;
}

/* BOTTOM NAVIGATION */

#bottomnav{
position:absolute;
left:0;
bottom:0;
width:500px;
height:44px;
line-height:44px;
text-align:center;
}

#bottomnav a{
display:inline-block;
width:10px;
height:10px;
margin:0 15px;
background:#392131;
border:1px solid #dc4f95;
border-radius:50%;
vertical-align:middle;
transition:.25s;
}

#bottomnav a:hover{
background:#dc4f95;
transform:scale(1.2);
}

/* HIDE NING ELEMENTS */

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;
}