:root {
    --darkest: #100c09;
    --darker: #181717;
    --lightest: #f5f1ed;
    --games-color: #58caff;
    --default-accent: #2e634a;
    --accent-hover: #248d5c;
    --dim-text: #9d9489;
    --gentle-red: #7b3030;
}

body{
    background-color: var(--darker);
    color: var(--dim-text);
    font-family: "IBM Plex Serif", serif;
    word-wrap: break-word;
    font-size: 0.8em;
}

a{
    color: var(--default-accent);
    text-decoration: none;
}

a:hover{
    color: var(--accent-hover);
}

article p{
    font-size: 1.1em;
}

font-face{
    font-family: "IBM Plex Serif", serif;
    src: url("https://www.npmjs.com/package/@ibm/plex-serif");
}

header{
    min-height: 50px;
    border: 3px;
    border-radius: 3px;
    border-color: var(--default-accent);
    border-style:double;
}

h1{
    margin: 12px;
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
    text-transform: lowercase;
    font-weight: 500;
    font-size: 2em;
}

h2{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 100;
    text-transform: lowercase;
    padding: 12px;
    outline: var(--default-accent);
    outline-style: double;
    outline-width: 3px;
}
h3{
    outline: var(--default-accent);
    outline-style: solid;
    padding: 12px;
}

hr{
    color: rgb(82, 82, 82);
    stroke-width: 1px;
}
footer{
    color: grey;
    font-size: 0.9em;
}
footer p{
    padding: 0;
}
time{
    color: gray;
    font-size: smaller;
    font-style: italic;
}

.sitemap {
    display: flex;
    padding-top: 1em;
    flex-direction: row;
    justify-content: center;

}

.img_button{
    display: block;
    width: 100%;
    min-width: 50px;
}

.wrapper{
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    max-width: 750px;
    min-width: 500px;
    padding-left: 100px;
    padding-right: 100px;
}

.header-inner{
    margin: 12px;
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: var(--default-accent);
    text-transform: lowercase;
}
.header-inner h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
}

.title {
    font-weight: 100;
    font-style: italic;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 6%;
}

.blog-sidebar {
    flex-grow: 2;
}

.blog-content {
    flex-shrink: 2;
}

.content {
    padding: 5px;
}

.column {
    margin: 5px;
}
.column-box {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2.5%;
    padding-top: 2em;
}

.spotlight-item {
    padding: 0.2em;
}

.spotlight-item p{
    padding: 0;
    padding-right: 1em;
    margin: 0;
    display: inline;
}

#column-left-wrap{
    flex-grow: 1;
}
#column-left{
    width: 100%;
    padding-left: 0px;
}
#column-right-wrap{
    flex-grow: 5;
}
#column-right{
    width: 100%;
    padding-right: 0px;
}
#link-box{
    outline: gray;
    outline-style: solid;
    outline-width: 1px;
    padding: 5px;
    margin-bottom: 10px;;
    border-radius: 5px;
}
#landing_center{
    flex-basis: 3;
    padding-left: 5px;
    padding-right: 5px;
}
#landing_left{
    outline: var(--default-accent);
    outline-width: 1px;
    padding: 5px;
    min-width: 150px;
    max-width: 150px;
}
#landing_right{
    outline: var(--default-accent);
    outline-width: 1px;
    padding: 5px;
    min-width: 150px;
    max-width: 150px;

}
#landing_right p{
    padding: 0;
}
#landing_left p{
    padding: 0;
}
img{
    width: 100%;
}

.skybox {
    border-image-slice: 64 64 64 64;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat repeat;
    border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAEtWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMjU2IgogICB0aWZmOkltYWdlV2lkdGg9IjI1NiIKICAgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIKICAgdGlmZjpYUmVzb2x1dGlvbj0iNzIvMSIKICAgdGlmZjpZUmVzb2x1dGlvbj0iNzIvMSIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjI1NiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjI1NiIKICAgZXhpZjpDb2xvclNwYWNlPSIxIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDI1LTA4LTA5VDEzOjA0OjE2KzAyOjAwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI1LTA4LTA5VDEzOjA0OjE2KzAyOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0icHJvZHVjZWQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFmZmluaXR5IFBob3RvIDIgMi42LjMiCiAgICAgIHN0RXZ0OndoZW49IjIwMjUtMDgtMDlUMTM6MDQ6MTYrMDI6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PuDSpk4AAAGBaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWSu0sDQRCHPxPFNwpaWFgcolZGokLQxiLBF6hFPMFXk5x5CLnkuDuRYCvYBhREG1+F/gXaCtaCoCiCWGuraKPhnEuEiJhddubb3+4Mu7MLHjWl6ValH/S0bYbHgsrc/IJS/UINtdQDLRHNMqZmRlXKto87Klx/43Nzld/3b6tfjlkaVNQID2uGaQuPC0+u2YbL28KtWjKyLHwq3GPKAYVvXT1a5GeXE0X+ctlUwyHwNAsriV8c/cVa0tSF5eZ06qlV7ec87k0aYunZGfEdMtqxCDNGEIUJRggRoI8hsQF89NMrM8rE+wvx02QkVhNrkMVkhQRJbHpEXZXsMfFx0WPSU2Td+v+tqxUf6C9mbwhC1ZPjvHVB9Rbkc47zeeg4+SPwPsJFuhSfOYDBd9FzJa1zH5o24OyypEV34HwT2h6MiBkpSF4ZnngcXk+gcV6+wTXULRZr9rPO8T2o6/JUV7C7B92yv2npGwItZ7gNly98AAAACXBIWXMAAAsTAAALEwEAmpwYAAAE0klEQVR4nO3d0W3bMBRA0abwAh7EK2T4rOBBPEI7QcIPlnhy7zm/qVK3li4IUHr6+Pz8/PPrjX19fX1Mfwa63v36+T39AYA5AgBhAgBhAgBhAgBhAgBhAgBht9UfmN5nn95nXf39q/+fqx+/Mv35Th+/6/V6/fjz5/N56evHCgDCBADCBADCBADCBADCBADCBADCPk7vo65+/2of9X6///jz3eP/d6e/P846/f1ZAUCYAECYAECYAECYAECYAECYAEDYch7Ayu4+8ep56dXvP/289fTz6uYBXHsewOPx2Do/V5//9L/PCgDCBADCBADCBADCBADCBADCBADCtucBTM8T2DX93gNmXf38On2fgRUAhAkAhAkAhAkAhAkAhAkAhAkAhC3nAaz2IXeP353bf/p5eNp2z6/T59/u77cCgDABgDABgDABgDABgDABgDABgLDb6ef1d59X9rw+V3Z6XsbuPIAVKwAIEwAIEwAIEwAIEwAIEwAIEwAIW84DmOZ5fiZNn3+78zJWrAAgTAAgTAAgTAAgTAAgTAAgTAAgbPw+AM/7M6l+/lkBQJgAQJgAQJgAQJgAQJgAQJgAQNhyD/T089D1fVjapq8vKwAIEwAIEwAIEwAIEwAIEwAIEwAI296D333/OfC909eXFQCECQCECQCECQCECQCECQCECQCEmQcAg6avLysACBMACBMACBMACBMACBMACBMACDMPAC7MPADgGAGAMAGAMAGAMAGAMAGAMAGAMPMAYND09WUFAGECAGECAGECAGECAGECAGECAGHmAcCFmQcAHCMAECYAECYAECYAECYAECYAELY9D2C1D+k+Afje9PVlBQBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBhAgBh3gsAF+a9AMAxAgBhAgBhAgBhAgBhAgBhAgBh2+8F2OU+Acqmry8rAAgTAAgTAAgTAAgTAAgTAAgTAAgzDwAuzDwA4BgBgDABgDABgDABgDABgDABgDDzAGDQ9PVlBQBhAgBhAgBhAgBhAgBhAgBhAgBh5gHAhZkHABwjABAmABAmABAmABAmABAmABBmHgAMmr6+rAAgTAAgTAAgTAAgTAAgTAAgTAAgzDwAuDDzAIBjBADCBADCBADCBADCBADCBADCbtMf4PTz0CvuU2irn39WABAmABAmABAmABAmABAmABAmABC2fR/A6/X6F5/jW7v7pNP7vLy3//38swKAMAGAMAGAMAGAMAGAMAGAMAGAsNvpfcrd3++9A1zZ7vn9eDyOHn+/33883goAwgQAwgQAwgQAwgQAwgQAwgQAwpbzAFb77Kt9yOfzefR56qs/b8172z2/Ts8TWF1fq+OtACBMACBMACBMACBMACBMACBMACBs+70Aq+eNd5/nX713YPc+g5Xdz3/141emP9/p46fn/k/fx2IFAGECAGECAGECAGECAGECAGECAGEfp+fuT+9z1vn+9qzuQ1ndB7N7/OnvzwoAwgQAwgQAwgQAwgQAwgQAwgQAwrbnAazs7mOefu/AyvTz6uYBnD1+1+7c/mlWABAmABAmABAmABAmABAmABAmABC2nAdwdaf3eeEn7379WAFAmABAmABAmABAmABAmABAmABA2F90kcf/3N++WwAAAABJRU5ErkJggg==");
    border-style: solid;
    background-color: #14141435;
    padding: 20px;
    margin: 5px
}
.subtle {
    font-style: italic;
    color: #9d9489;
}

#post-tags{
    display: flex;
    padding-left: 15px;
}

#post-tags li{
    list-style-type: disc;
    padding-right: 20px;
    
}

#post-date{
    color: gray;
    font-style: italic;
}

#callout{
    padding: 10px;
    border-color: red;
    border-width: 2px;
    border-style: solid;
    border-left: none;
    border-right: none;
    margin: 15px;
}
#callout h4{
    padding: 0;
    margin: 5px;
    text-transform: uppercase;
}
#callout p{
    padding: 0;
    margin: 5px;
    margin-top: 14px;
}

.important{
    outline: cyan;
    background-color: #00ffff20;
}
.warning{
    outline: red;
    background-color: #ff000020;
}

#dnd-articles{
    display: flex;
}

#dnd-articles a{
    margin: 5px;
    padding: 5px;
    list-style-type: none;
    width: 150px;
    max-height: 50px;
    outline: var(--default-accent);
    outline-style: solid;
    background-color: #ff990020;
    border-radius: 0.5em;
    text-align: center;

}

#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 5px 10px;
    max-width: auto;
}

#gallery-item {
    flex: 1 1 calc(25% - 10px);
    overflow: hidden;
}

@media (max-width: 700px) {
    .gallery-item {
        flex: 1 1 calc(50% - 10px)
    }
    
}

body.games {
    color: var(--games-color);
    text-shadow: 
    0 0 7px #06cdd7,
    0 0 12px #08828f,
    0 0 40px #0d1749
    ;
    font-family: "IBM Plex Sans";
    
}

body.games h3 {
    font-family: "IBM Plex Sans";
    font-weight: 600;
    padding: 0px;
}

body.games header{
    border: none;
    border-style: solid;
    border-color: var(--games-color);
    border-width: 1px;
    border-radius: 0;
}

body.games #header-inner {
    color: var(--games-color);
}

body.games #landing_left {
    background-image: url(/img/monitor_small.png);
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 229px;
    width: 229px;
    

}
body.games #landing_center {
    background-image: url(/img/monitor_big.png);
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 429px;
    max-width: 429px;
    min-height: 508px;
}

body.games #content_test {
    gap: 20px;
    justify-content: center;
    background-image: url(/img/monitor_background.png);
    padding: 20px;
    margin-top: 20px;
    background-size: contain;
    background-repeat: no-repeat;

}

.content_container {
    margin-top: 25px;
    padding-top: 15px;
    padding-left: 40px;
    padding-right: 40px;
}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    max-width: 750px;
}

#big_monitor {
    max-height: 445px;
    overflow: auto;
    scrollbar-width: 2px;
}

#game-list {
    height: 350px;
    overflow: auto;
}

body.games .tablink {
    all: unset;
    width: 100%;
}
body.games hr {
    border-color: var(--games-color);
    box-shadow: 
        0 0 7px #06cdd7,
        0 0 12px #08828f,
        0 0 40px #0d1749
    ;
}

body.games a{
    color: var(--games-color);
    width: 100%;
}

body.games a:hover{
    background-color: #58caff;
    color: var(--darkest);
    box-shadow: 
        0 0 2px 2px #58caff,
        0 0 7px #58caff,
        0 0 25px #58caff
    ;
    cursor: pointer;
}

body.games .tablink:hover{
    background-color: #58caff;
    color: var(--darkest);
    box-shadow: 
        0 0 2px 2px #58caff,
        0 0 7px #58caff,
        0 0 25px #58caff
    ;
    cursor: pointer;
}

body.games .tabcontent {
    display: none;
}

body.index  {
    background-image: url(/img/waterpipe2edited.png);
    background-repeat: no-repeat;
    background-position: center 0;
    color: #c9bcae;
}

.button {
    all: unset;
    border: solid;
    padding: 3px 5px 3px 5px;
    font-style: italic;
    border-radius: 3px;
    border-width: 1px;
    margin: 1px;
}
.button:hover {
    background-color: #3c3c3c90;
    cursor: pointer;
}

body.index header{
    border-color: #1d3637;
    border-style: solid;
    color: #1d3637;
}

body.index #header-inner {
    color: #1d3637;
}



body.lists {
    color: var(--dim-text);
}
body.lists header{
    border-width: 2px;
    border-style: solid;
    border-color: var(--gentle-red);
}

body.lists h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--gentle-red);
}

body.lists  h3 {
    border: none;
    outline: none;
    font-size: 1.25em;
    padding-left: 0;
    text-transform: uppercase;
}

.container-header {
    padding: 0 20px 0 20px;
}

.container-content {
    padding: 0 20px 0 20px;
    margin: 20px;
    display: flex;
    gap: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
}

body.lists .list-content-title{
    margin-bottom: 0;
    padding-right: 7px;
    font-size: 1.125em;
    font-weight: 500;
}
body.lists .weblink{
    font-size: smaller;
}

body.lists .list-content-description {
    margin-top: 3px;
    margin-bottom: 20px;
}

body.lists button{
    all: unset;
    border: solid;
    border-width: 1px;
    padding: 5px;
}

body.lists button:hover{
    background-color: #9d948950;
}

body.lists .listcontent {
    display: none;
}

body.lists .active {
    background-color: var(--dim-text);
    color: black;
}