:root {
--white: white;
--black: #202020;
--yellow: yellow;
--lime: lime;
--cyan: cyan;
--magenta: #FF30F1;
--red: #FF2020;
--grey:hsl(0, 0%, 55%);
--mute:#303030;  

scrollbar-width:none;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

*::-webkit-scrollbar{
width:0;
height:0;
}

::selection{
color:var(--black);
background:var(--lime);
}

@font-face {
font-family: Kobata;
src: url(/assets/fonts/Kobata.otf); 
}

@font-face {
font-family: 'MSGothic';
src: url(/assets/fonts/MSGothic.ttf); 
}

#site {
width: 960px;
height:100%;
margin-left: 190px; 
display: flex;
flex-direction: column;
border-right: 3px solid var(--yellow);
border-bottom: 10px solid var(--yellow);
border-left: 3px solid var(--yellow);
background-color: var(--black);
}

html,body {
width: 100%;
height: 100%;
}

body {
color: var(--white);
font-family: monospace;
font-size: 14px;
line-height: 1.2;
overflow: hidden;
background-position:center;
background-size:cover;
background-attachment:fixed;
background-color: teal;
background-image:url("/assets/pictures/bg.png");
}

h1,h2,h3,p{
margin: 0;
}

header {
display: flex;
justify-content:space-between;
padding: 5px 10px;
color: var(--yellow);
background: var(--black);
border-bottom: 1px solid var(--yellow);
}

header a{ 
color: var(--yellow);
text-decoration: none;
}

header a:hover{
color: var(--lime);
text-decoration: none;
}

.active{color: var(--lime);}
.active::before{content:"> ";} 

h2 { 
padding: 2px 5px;
font-family: monospace; 
font-size:12px;
text-transform:uppercase; 
color: var(--black);
background-color: var(--yellow); 
}

ul,
ol {
list-style: none;
}

footer {
height: 10px;
background-color: var(--yellow);
}

footer a{ 
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: var(--black);
}

footer a:hover{
color: var(--yellow);
background-color: var(--black);
text-decoration: none;
}