@font-face { font-family: "respira";src: url('https://dl.dropbox.com/scl/fi/o84qy68su3qadl72pqpu1/Respira-Black.otf?rlkey=x9jps0ojq2xwvooqf7bvmn2v3&st=ycedbgko&');
  format("truetype")}

:root{
  --crown:url('https://i.imgur.com/bT2VbRO.png');
  --fondo:url("https://images.unsplash.com/photo-1617653750373-3de544f28b83?duotone=000,fff&con=-30w=1800&h=1800") center center / cover fixed;
    --fondo2:url("https://i.imgur.com/LrAfnZM.jpeg?duotone=000,3b4545&con=-30w=1800&h=1800") center center / cover fixed;
  
--mainfont:'Lordish';
--fuente:"EB Garamond", serif;
  
--dist:40px;
  
--border:1px solid #ffffff36;
--back:#0a0a0ac9;
--text:#999999;
--color:#3b4545;
--green:#3E595A;}

body{background:var(--fondo);background-color: #2b2b2b;background-blend-mode: multiply;color:var(--text);margin:var(--dist);font-family:var(--fuente)}

content{width: clamp(200px, calc(70vw), 1150px);display: block;margin:0 auto;border-top:Var(--border2);text-align:justify;margin-top: 100px;margin-bottom: 100px;}

::-webkit-scrollbar { z-index: 999999; width: 5px; background: grey;border-left:1px solid black;}
::-webkit-scrollbar-thumb { background: var(--color);border-left:1px solid black}

upper{z-index:999999;position:fixed;}
upper.barright{display:flex;flex-direction:column;right:0;top: 0;bottom: 0;justify-content: center;width:var(--dist);align-items:center}
upper.barright>i,#sidebutton{width:var(--dist);border-bottom: var(--border);height: var(--dist);display: flex;align-items: center;justify-content: center;}
upper.barright>i:first-child{border-top:var(--border)}

upper.desc{padding:0 10px;left:0;bottom:0;right: 0;background: var(--back2);display: Flex;justify-content:center;height:var(--dist);align-items:center}
upper.desc>div,upper.desc>span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
upper.desc>span{text-transform:uppercase;font-weight:900;}
upper.desc>div:before {font-size:11px;color:var(--color1);content: ";";margin: 0 5px;color: var(--color1);letter-spacing:-2px}

upper.barleft{left:0;display:flex;flex-direction:column;bottom:0;top: 0;justify-content: center;width:var(--dist);align-items:center}
upper.barleft>i{width:var(--dist);border-bottom: var(--border);height: var(--dist);display: flex;align-items: center;justify-content: center;}
upper.barleft>i:first-child{border-top:var(--border)}

bar{position: fixed;background:var(--fondo2);z-index:999;backdrop-filter:blur(10px)}
circle{content: '';width: 50px;position: fixed;height: 50px;background: var(--fondo2);z-index: 9999;}

bar.left{width: var(--dist);top:var(--dist);left: 0;bottom: var(--dist);border-right: var(--border);}
bar.right{top: var(--dist);width: var(--dist);bottom: var(--dist);right: 0;border-left: var(--border);}
bar.top{top:0;height:var(--dist);left:0;right:0;border-bottom: var(--border);}
bar.bottom{border-top: var(--border);height: var(--dist);bottom: 0;left:0;right:0;}


circle.topleft{border-right: var(--border);border-bottom: var(--border);top: var(--dist);left: var(--dist);border-radius: 0 0 100% 0;}
circle.topright{border-left: var(--border);border-bottom: var(--border);top: var(--dist);right: var(--dist);border-radius: 0 0 0 100%;}
circle.bottomleft{border-right: var(--border);border-top: var(--border);bottom: var(--dist);left: var(--dist);border-radius: 0 100% 0 0;}
circle.bottomright{border-left: var(--border);border-top: var(--border);bottom: var(--dist);right: var(--dist);border-radius: 100% 0 0 0;}
line{height:50%;width:1px;background:#ffffff36;margin:0 50px;}

#sidebutton{cursor:crosshair;z-index:99999}
#sidebutton btn.active{color:var(--color);}

#sidebar {z-index: 999;backdrop-filter: blur(10px);position:fixed;top:var(--dist);width:98%;left: -98%;height: 100vh;transition: all .8s;border-right:Var(--border)}

.sideint{display: flex;height: 100%;}
#sidebar.show {left: 30px;transition: all .8s;}

.avaside{border-right:var(--border)}
.avaside img {width: 300px;object-fit: cover;height: 100%;display: flex;filter:grayscale(100%) brightness(0.5) contrast(110%);}

.logo{height:93.4vh;display:flex;align-items:center;justify-content:center;border-bottom:var(--border);position:relative;}
.crown{width: 13%;height: 60%;background-size: cover;mask-image: var(--crown);mask-mode: alpha;mask-size: 90%;mask-repeat: no-repeat;mask-position: center;background-blend-mode: multiply;background-color: var(--color);}
.logotxt txt{font-size: 7vw;font-family: var(--mainfont);position: relative;-webkit-text-stroke: 1px #5f5f5f;text-shadow: 3px 3px 0px rgb(61 87 87 / 41%);color: transparent;line-height: 83%;}

.lastopics{display: grid;backdrop-filter:blur(5px);
    grid-template-columns: 1fr 1fr 1fr;}
.ltbox{justify-content: center;border-right:var(--border);display:flex;flex-direction:column;padding:20px;text-align:center;border-bottom:var(--border)}

.marquee{border-bottom:Var(--border);padding-top:3px;}