/* Main CSS file. Yeah */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap');

:root {
    --header-font: Roboto Mono;
 
    --bg: 74,20,21;
    --p: 241,229,229;
    --heading: 239,232,232;
 
    --heading-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath d='M1 6a5 5 0 0 0 5-5 5 5 0 0 0 5 5 5 5 0 0 0-5 5 5 5 0 0 0-5-5z' style='fill:none;stroke:%23000;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none'/%3E%3C/svg%3E");
}

body{
background-color: #000;
}
 
#all{
width: 625px;
height: 545px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
 
#left{
float: left;
width: 385px;
height: 545px;
}
 
#right{
float: right;
width: 230px;
height: 545px;
}
 
#leftbox{
background-color: rgba(0,0,0,0);
border: 3px solid #fff;
padding: 5px;
width: 365px;
height: 525px;
}
 
#leftcontent{
width: 365px;
height: 402.5px;
background-color: rgb(0,0,0);
}
 
#contentbox{
width: 345px;
height: 385px;
padding: 10px;
}
 
#content{
width: 312px;
height: 345px;
color: rgb(var(--p));
font-size: 14px;
text-align: justify;
padding: 15px;
overflow: scroll;
overflow-x: hidden;
}

#content h1 {
    display: flex;
    align-items: center;
    column-gap: 0.325rem;
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 23px;
    line-height: 1;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 20px;
}
:is(#content h1)::before,
:is(#content h1)::after {
    content: "";
    display: block;
    height: 0.1rem;
    min-width: 2.5rem;
    flex-grow: 1;
    background: currentColor;
    order: 1;
}
:is(#content h1)::before {
    flex-grow: 0;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    -webkit-mask-image: var(--heading-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--heading-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

#content h1alt {
    display: flex;
    align-items: center;
    column-gap: 0.325rem;
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 23px;
    line-height: 1;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.425em;
    margin-top: 20px;
}
:is(#content h1alt)::after,
:is(#content h1alt)::before {
    content: "";
    display: block;
    height: 0.1rem;
    min-width:2.5rem;
    flex-grow: 1;
    background: currentColor;
    order: 1;
}
:is(#content h1alt)::after {
    flex-grow: 0;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    -webkit-mask-image: var(--heading-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--heading-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

#imgbox{
padding: 10px;
margin-top: 3px;
}
 
#img{
width: 349px;
height: 100px;
background-image: url('https://files.catbox.moe/3x6dyr.jpg'); /*349x100*/
background-size: 100%;
margin-left: -2.25px;
}
 
#righttop{
width: 198px;
height: 160px;
background-color: rgba(0,0,0,0);
border: 3px solid #fff;
padding: 5px;
margin-bottom: 10px;
background-color: rgba(0,0,0,0);
}
 
#righttopimg{
width: 198px;
height: 160px;
background-color: #a2d5d5;
border-radius: 5px;
background-image: url('https://files.catbox.moe/7ca5m9.gif'); /*198x160*/
background-size: 100% 100%;
}
 
#rightmiddle{
width: 198px;
height: 90px;
background-color: rgba(0,0,0,0);
border: 3px solid #fff;
padding: 5px;
margin-bottom: 10px;
font-size: 16px;
letter-spacing: 1px;
}
 
#nav{
padding-top: 2px;
}
 
#nav a:hover{
color: #e2d7d7;
}
 
.link1{
background-color: rgba(0,0,0);
color: rgb(var(--p));
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
width: 95px;
text-align: center;
float: left;
}
 
.link2{
background-color: rgba(0,0,0);
color: rgb(var(--p));
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
width: 95px;
text-align: center;
float: right;
}

.link3{
background-color: rgba(0,0,0,0);
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
width: 95px;
text-align: center;
color: #fff;
float: left;
}

.link4{
background-color: rgba(0,0,0,0);
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
width: 95px;
text-align: center;
color: #fff;
float: right;
}
 
#rightbottom{
width: 188px;
height: 213px;
background-color: rgba(0,0,0,0);
border: 3px solid #fff;
padding: 5px;
padding: 10px;
color: rgb(var(--p));
font-size: 14px;
text-align: justify;
overflow: scroll;
overflow-x: hidden;
}
 
#rightbottom h1{
margin: 0px;
border-bottom: 1px solid #fff;
color: rgb(var(--heading));
text-align: right;
font-weight: normal;
font-size: 26px;
}
 
a{
color: rgb(var(--heading));
text-decoration: none;
}
 
a:hover{
color: #e2d7d7;
}
 

        ::-webkit-scrollbar {
        width: 16px
        }

        ::-webkit-scrollbar:horizontal {
        height: 17px
        }

        ::-webkit-scrollbar-corner {
        background: #eee
        }

        ::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
        }

        ::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
        }

        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 3px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        background-color: #eee;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
        }

        ::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block
        }

        ::-webkit-scrollbar-button:vertical {
        height: 17px
        }

        ::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }

        ::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:increment {
        background: white;
        background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }

        
      
 
#credit{
font-size: 13px;
position: fixed;
bottom: 0;
right: 0;
}
 
#credit a{
color: #e7f0f0;
}
 
#credit a:hover{
color: #e7f0f0;
}

.intro {
    text-align: center;
}

.hr {
    text-align: center;
    font-size: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}