@font-face {
        font-family: 'JetBrains Mono';
        src: url(JetBrainsMono-VariableFont_wght.ttf);
}

::-webkit-scrollbar {width: 4px; height: 0px;}
::-webkit-scrollbar-track {background: #181818; border-radius: 10px;}
::-webkit-scrollbar-thumb {background: #222222; border-radius: 10px;}

* {box-sizing: border-box;}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 100vh;
    overflow-y: hidden;

    background: black;
    font-family: 'JetBrains Mono';
    color: #E9E2CF;
}

b {color: #656996;}
p {margin: 0; font-size: 14px;}
a {color: #E9E2CF; text-decoration: none;} 
a:hover{color: #0e8d4d; background: #133625; transition: 0.2s; text-shadow: 0 0 2px #0e8d4d;}
.active {color: #646461; pointer-events: none;}

a.inverted {color: #0b7544; text-shadow: none;} 
a.inverted:hover {background: none; color: #4dff82; letter-spacing: 0.7px;}

hr{border:#1a1a1a 2px solid;}

.navigation {width: 50vh; padding: 5px; border: #1a1a1a 2px solid; user-select: none; background: #141414;}

.header{position: sticky; padding: 5px; margin: -20px -20px 15px; font-size: 14px; background: #141414;}

.main {width: 50vh; height: auto; border: #1a1a1a 2px solid; padding: 20px; background: black;} 
.main h2{margin: 5px 0; font-size: 16px;} 
.main li {list-style: none; font-size: 14px;} 
.main li::before {content:'~ ';}                                        

.tb {border-left: #383838 2px solid; width: 75%;}
.tb p {margin-left: 15px;}


footer {font-weight: bold; font-size: 12px; margin-bottom: -5px;}
.ft1 {position: fixed; bottom: 0; left: 0; padding: 15px;}
.ft2 {position: fixed; bottom: 0; right: 0; padding: 15px;}

.gallery-container {display: flex; gap: 15px; justify-content: center; height: 45vh; overflow-y: scroll; margin: 0 -15px;}
.column {display: flex; flex-direction: column; gap: 15px;} 
.column img {width: 185px; display: block; border-radius: 5px;}