{background:#000}*{margin:0;padding:0;box-sizing:border-box}:root{--font-1:Roboto,monospace;--font-2:Teko,sans-serif;--font-3:Cookie,cursive;--colorprinc:#5fdedd}:before,:after{content:'';position:absolute}a{text-align:center;text-transform:uppercase;display:inline-block;text-decoration:none}span{display:inline-block}#main,.app,.container{width:100%;height:100vh;position:relative;font-family:var(--font-1);font-size:1em;color:var(--colorprinc);overflow:hidden}[class*='aside']{width:220px;height:100vh;position:fixed;top:0;background:#222;text-align:center}.aside-left{left:0;border-right:solid 1px var(--colorprinc)}.aside-right{right:0;border-left:solid 1px var(--colorprinc)}.user{width:100%;height:auto;position:relative;margin-top:70px}.avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 5px var(--colorprinc);margin-left:calc(50% - 55px)}.avatar img{width:100%}._id{width:70px;height:20px;border-radius:2px;background:var(--colorprinc);color:#000;text-align:center;font-size:.6em;line-height:22px;box-shadow:0 0 0 1px #000;position:absolute;top:0;left:130px}.user h2{width:160px;height:30px;border-radius:2px;background:var(--colorprinc);margin-top:15px;margin-left:calc(50% - 80px);color:#000;font-size:.65em;line-height:32px}[class*='col-']{width:200px;height:auto;position:relative;margin-left:9.5px;min-height:200px;border-top:solid 1px var(--colorprinc)}[class*='col-']:before,[class*='col-']:after{width:1px;height:150px;background:var(--colorprinc);top:0}[class*='col-']:before{left:0}[class*='col-']:after{right:0}.col-friends{margin-top:60px}.sub{width:70px;height:24px;background:var(--colorprinc);color:#000;border-radius:2px;position:absolute;text-align:center;font-size:.7em;line-height:24px;top:-12px;left:10px}ul{width:100%;height:auto;margin-top:25px;padding:5px;list-style:none}ul a{width:100%;height:26px;border-radius:2px;line-height:26px;background:var(--colorprinc);color:#000;font-size:.65em;margin-bottom:10px;transition:all .2s ease-out}ul a:hover{color:var(--colorprinc);background:#000}.col-msg{margin-top:100px}.desc{font-size:11px;width:100%;padding:12px;margin-top:25px}.video{width:200px;height:113px;background:#000;box-shadow:0 5px var(--colorprinc);margin:50px 9.5px}.section{width:calc(100% - 440px);height:100vh;position:absolute;left:220px;display:flex;flex-direction:column;align-items:center;background:url(https://i.ibb.co/C0BFQJv/BGStars.gif)top left repeat}.title{width:100%;line-height:120px;text-align:center;font-family:var(--font-3);font-size:3em;font-weight:lighter}

/* Nivel Inferior */
.box{width:600px;height:350px;margin-top:30px;border-radius:2px;background:#000;box-shadow:0 0 0 1px var(--colorprinc);overflow:hidden}
.box img{width:100%;height:100%}
.open{width:120px;padding:5px 15px;background:var(--colorprinc);color:#000;line-height:26px;border-radius:2px;font-size:.7em;margin-top:40px}
.open:hover{color:#FFF}
/* BOX */
.modal{
position:absolute;
width:calc(100% - 440px);
height:780px;
bottom:0;
left:220px;
background:rgba(0,0,0,.7);
transform:translateY(100vh);
transition:all .5s ease-out;
overflow-y:auto}
/* Galeria */
.gallery
{width:auto;
height:100px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items:center}

/* Stroke */
.gallery img{
height:100%;
width:auto;
margin:10px;
border:solid 5px var(--colorprinc)}
/* Fin Galeria */
.close{width:140px;height:40px;background:url(https://i.postimg.cc/1XwDxmtG/Group-4.png)center center no-repeat,var(--colorprinc);position:fixed;bottom:0;left:calc(50% - 70px)}
#_:target 
.modal{transform:translateY(0)}::-webkit-scrollbar{height:5px;background:#FEFEFE}::-webkit-scrollbar-thumb{background:var(--colorprinc);}

.jd-box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
}
.jd-box{
  width:110px;
  height:130px;
  background: ##00FFFF;
  box-shadow:0 0 3px 1px aqua;
  padding:14px;
  margin-bottom:20px;
  position:relative;
}
.jd-box img{
  width:82px;
  height:82px;
  border:solid 1px #212121;
  margin:0;
}
.jd-box span{
  width:82px;
  height:21px;
  background:#212121;
  text-align:center;
  line-height:19px;
  text-transform:uppercase;
  font-size:.7rem;
  position:absolute;
  top:96px;
  left:14px;
}
.jd-header h1{
  text-align:center;
  margin-top:80px;
  display:inline-block;
  width:100%;
  text-shadow:5px 5px 4px rgba(0,0,0,.5)
}
.jd-txt{
  width:120px;
  height:36px;
  background:#212121;
  border-radius:3px;
  text-align:center;
  line-height:36px;
  color: #FFFFFF;
  margin-left:calc(50% - 70px)
}