body{
    background-color: var(--rDarkPurple);
    background-image: url(assets/bg.png);
    background-size: 1500px, 1024px;
    background-position: center top;
    background-repeat: no-repeat;
    font-family: var(--mainFont);
}
h1, h2, h3, p{margin: 0px;}
h1, h2{border-bottom: 1px dashed var(--rRed);}
a{
    color: var(--rPink);
    text-decoration: none;
}a:hover{color: white;}

.wrapper{
    max-width: 1024px;
    height: 800px;
    margin: auto;
}
.topper{
    border: 1px solid var(--rRed);
    max-width: 100%;
    max-height: 192px;
    padding: 5px;
    background-color: var(--rBlack);
    background-image: url(assets/grid.png);
    background-repeat: no-repeat;
    background-position: right;
    color: var(--rRed);
    margin-bottom: 5px;
}
.nav{
    border: 1px solid var(--rRed);
    max-width: 100%;
    height: 32px;
    background-color: var(--rBlack);
}
.nav button{
    width: 20%;
    height: 100%;
    border: none;
    background-color: var(--rBlack);
    color: var(--rRed);
    font-family: var(--mainFont);
    font-size: 18px;
}
.nav button:hover{
    color: white;
    background-color: var(--rRed);
    cursor: pointer;
}
.tab{
    background-image: url(assets/tab.png);
    width: 100%;
    height: 7px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.wrapBody{
    width: 100%;
    height: 100%;
    display: flex;
}
.wrapMain, .wrapSide{
    color: var(--rRed);
    background-color: var(--rBlack);
    border: 1px solid var(--rRed);
    padding: 15px;
    box-sizing: border-box;
}
.wrapSide{
    width: 200px;
    box-sizing: border-box;
}
#navigation a {color: var(--rRed);}
#navigation a:hover{color: var(--rPink);}
marquee{
    border: 1px solid var(--rBrown);
    text-align: center;
}marquee img{margin-top: 5px;}marquee img:hover{transform: scale(1.1);}
.counter {
    display: flex;
    height: 16px;
    overflow: hidden;
    padding-left: 36px;
}
.digit {
    width: 12px;
    height: 16px;
    background: url('assets/counter.png') no-repeat;
}

.wrapMain{
    width: 610px;
    margin-left: 7px;
    margin-right: 7px;
    overflow: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
::-webkit-scrollbar{width: 4px;}
/* Track */
::-webkit-scrollbar-track{background: var(--rPurple); }
/* Handle */
::-webkit-scrollbar-thumb {background: var(--rBrown); }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--rPink); }

.mapThumb{
    width: 576px;
    height: 128px;  
    text-align: center;
    border: 1px solid var(--rBrown);
}
.mapThumb h3{
    display: none;
    position: relative;
    top: -68%;
    color: white;
    font-size: 32px;
    width: fit-content;
    margin: auto;
    pointer-events: none;
}
.mapThumb:hover h3{display: block}
.mapThumb img{transition: 150ms;}
.mapThumb:hover img{filter: brightness(0.6);}

#webVers{color: var(--rBrown);}

#lambda{transition: 1s;}
#lambda:hover{
    transform: rotate(360deg);
}

.slideshow{border: 1px solid var(--rBrown);}
.slideshow img{width: 100%;}
.slideshow button{
    height: 32px;
    width: 50%;
    border: none;
    color: var(--rRed);
    background-color: transparent;
    font-weight: bold;
    font-family: var(--mainFont);
    font-size: 18px;
    margin-top: -5px;
}
.slideshow button:hover{color: white; background-color: var(--rRed); cursor: pointer;}

:root{
    --rPink: #e28d9b;
    --rRed: #DB5C51;
    --rBrown: #893B4A;
    --rGrey:    #3D2936;
    --rPurple:   #1D1021;
    --rDarkPurple: #151116;
    --rBlack:        #111010;

    --mainFont: "Courier";
}