/* xproot.pw styles file */

@font-face {
    font-family: 'More Perfect DOS VGA';
    src: url(/assets/fnt/MorePerfectDOSVGA.ttf);
}

@keyframes rainbow-border {
    0% {border-color: #FF0000;}
    14% {border-color: #FFA500;}
    28% {border-color: #FFFF00;}
    43% {border-color: #00FF00;}
    57% {border-color: #0000FF;}
    71% {border-color: #4B0082;}
    86% {border-color: #EE82EE;}
    100% {border-color: #FF0000;}
}

@keyframes bad-border {
    0% {border-color: #FF0000;}
    14% {border-color: #FFFF00;}
    28% {border-color: #FF0000;}
    43% {border-color: #FFFF00;}
    57% {border-color: #FF0000;}
    71% {border-color: #FFFF00;}
    86% {border-color: #FF0000;}
    100% {border-color: #FFFF00;}
}

html {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    background-color: #2E5023;
    color: #FFFFFF;
    color-scheme: light;
    scrollbar-face-color: #629E4E;
    scrollbar-highlight-color: #77A173;
    scrollbar-shadow-color: #38612A;
    scrollbar-3dlight-color: #71C456;
    scrollbar-arrow-color:  #000000;
    scrollbar-track-color: #2D591E;
    scrollbar-darkshadow-color: #2E5023;
}

body {
    max-width: 1024px;
    margin: auto;
    margin-top: 2px;
}

/* Scrollbar in Webkit */

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: #2D591E;
}

::-webkit-scrollbar-thumb {
    background-color: #629E4E;
    box-shadow: inset -1px -1px #2E5023, inset 1px 1px #71C456, inset -2px -2px #38612A, inset 2px 2px #77A173;
}

::-webkit-scrollbar-track-piece:start:active, ::-webkit-scrollbar-track-piece:end:active {
    background-color: #D2A6E1;
}

::-webkit-scrollbar-corner {
    background-color: #629E4E;
}

::-webkit-scrollbar-button:single-button {
    background-color: #629E4E;
    display: block;
    box-shadow: inset -1px -1px #2E5023, inset 1px 1px #71C456, inset -2px -2px #38612A, inset 2px 2px #77A173;
    height: 16px;
    width: 16px;
}

::-webkit-scrollbar-button:single-button:active {
    background-color: #629E4E;
    display: block;
    box-shadow: inset 1px 1px #38612A, inset -1px -1px #38612A, inset 1px 1px #38612A, inset -1px -1px #38612A;
    height: 16px;
    width: 16px;
}


/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 8 6 L 7 6 L 7 7 L 6 7 L 6 8 L 5 8 L 5 9 L 4 9 L 4 10 L 11 10 L 11 9 L 10 9 L 10 8 L 9 8 L 9 7 L 8 7 L 8 6 Z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 9 6 L 8 6 L 8 7 L 7 7 L 7 8 L 6 8 L 6 9 L 5 9 L 5 10 L 12 10 L 12 9 L 11 9 L 11 8 L 10 8 L 10 7 L 9 7 L 9 6 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 11 6 L 4 6 L 4 7 L 5 7 L 5 8 L 6 8 L 6 9 L 7 9 L 7 10 L 8 10 L 8 9 L 9 9 L 9 8 L 10 8 L 10 7 L 11 7 L 11 6 Z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 12 6 L 5 6 L 5 7 L 6 7 L 6 8 L 7 8 L 7 9 L 8 9 L 8 10 L 9 10 L 9 9 L 10 9 L 10 8 L 11 8 L 11 7 L 12 7 L 12 6 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 9 4 L 8 4 L 8 5 L 7 5 L 7 6 L 6 6 L 6 7 L 5 7 L 5 8 L 6 8 L 6 9 L 7 9 L 7 10 L 8 10 L 8 11 L 9 11 L 9 4 Z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 9 5 L 8 5 L 8 6 L 7 6 L 7 7 L 6 7 L 6 8 L 5 8 L 5 9 L 6 9 L 6 10 L 7 10 L 7 11 L 8 11 L 8 12 L 9 12 L 9 5 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 7 4 L 6 4 L 6 11 L 7 11 L 7 10 L 8 10 L 8 9 L 9 9 L 9 8 L 10 8 L 10 7 L 9 7 L 9 6 L 8 6 L 8 5 L 7 5 L 7 4 Z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M 7 5 L 6 5 L 6 12 L 7 12 L 7 11 L 8 11 L 8 10 L 9 10 L 9 9 L 10 9 L 10 8 L 9 8 L 9 7 L 8 7 L 8 6 L 7 6 L 7 5 Z' fill='%23000'/%3E%3C/svg%3E");
}

a:hover {
    color: #CFCF7D;
}

a:active {
    color: #FFFF99;
}

/* IE stop. */
a img { border: none; }

div.logoholder div {
    _display: inline;
    display: inline-block;
}

div.webpage {
    width: 760px;
    max-width: 800px;
    margin: auto;
    color: #000000;
}

div.webpage div.tabholder a {
    font-size: 12px;
    margin: 0;
    margin-right: 5px;
    margin-bottom: 1px;
    padding: 1px 7px 0px;
    cursor: pointer;
    text-decoration: none;
    border-width: 0px;
    border-style: solid;
    border-color: #477936;
    background-color: #38612A;
    color: #000000;
}

div.webpage div.tabholder a.on {
    margin-bottom: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #477936;
    background-color: #48713A;
}

div.webpage div.tabholder span {
    font-size: 12px;
    margin: 0;
    margin-left: auto;
    margin-right: 5px;
    padding: 1px 7px 0px;
    text-decoration: none;
    color: #000000;
    margin-bottom: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #6d746b;
    background-color: #5e7058;
}

div.webpage div.content {
    padding: 2px;
    box-shadow: 5px 5px 0 0 #38612A;
    _border-width: 0px;
    _border-right-width: 5px;
    _border-style: solid;
    _border-color: #38612A;
    background-color: #477936;
    text-align: center;
}

div.webpage div.blog-post {
    text-align: left;
    text-align: justify;
}

div.webpage div.blog-post h1 {
    text-align: left;
}

div.webpage div.blog-post img, div.webpage blockquote img {
    max-width: 100%;
}

div.webpage div.blog-post img:active:not(a > img) {
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

blockquote.copyright, blockquote.tinyboxy, blockquote.transparent {
    font-family: 'More Perfect DOS VGA', 'Courier New', Courier, monospace;
    text-align: center;
}

blockquote.transparent {
    background-color: #00000000;
    color: #FFFFFF;
}

blockquote.pagepicker a {
    /*
    transition-duration: 200ms;
    font-size: 12px;
    margin: 0;
    margin-right: 5px;
    margin-bottom: 1px;
    padding: 1px 7px 0px;
    cursor: pointer;
    text-decoration: none;
    border-width: 0px;
    box-shadow: 2px 2px 0 0 #38612A;
    _border-width: 2px;
    _border-style: solid;
    _border-color: #38612A;
    background-color: #629E4E;
    color: #000000;
    */
    padding: 1px 3px;
    background-color: #629E4E;
    box-shadow: inset -1px -1px #2E5023, inset 1px 1px #71C456, inset -2px -2px #38612A, inset 2px 2px #77A173;
    _border-width: 1px;
    _border-style: solid;
    _border-color: #38612A;
    color: #000000;
    text-decoration: none;
}

blockquote.pagepicker a:hover {
    /*
    box-shadow: 2px 2px 0 0 #6f7515;
    _border-color: #6f7515;
    */
    text-decoration: underline;
}

blockquote.pagepicker a:active {
    /*
    box-shadow: 0px 0px 0 0 #38612A;
    background-color: #4e9e9a;
    */
    _padding: 0 2px;
    _border-width: 2px;
    _border-style: solid;
    _border-color: #38612A;
    background-color: #629E4E;
    box-shadow: inset 1px 1px #38612A, inset -1px -1px #38612A, inset 1px 1px #38612A, inset -1px -1px #38612A;
    text-decoration: none;

}

blockquote.guestbook-post, blockquote.blog-post {
    text-align: center;
    text-align: justify;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-all;
}

blockquote.guestbook-post i.ip {
    font-size: 10px;
}

blockquote.guestbook-post i.id, blockquote.blog-post i.id {
    position: absolute;
    color: #77A173;
}

blockquote.blog-post center a {
    text-decoration: none;
}

blockquote.blog-post center a:hover {
    text-decoration: underline;
}

/* More general styles */
blockquote {
    text-align: justify;
    overflow-wrap: break-word;
    padding: 2px;
    box-shadow: 5px 5px 0 0 #38612A;
    _border-width: 0px 2px 2px 0px;
    _border-style: solid;
    _border-color: #38612A;
    background-color: #518D3D;
}

blockquote h1, h2, h3, h4, h5, h6 { text-align: center; margin: 0; }

blockquote hr {
    margin: 5px -2px;
    width: 101%;
}

blockquote table {
    margin: auto;
}

hr {
    border-style: solid;
    border-color: #38612A;
    border-width: 1px;
}

pre {
    font-family: 'More Perfect DOS VGA', 'Courier New', Courier, monospace;
    overflow-x: auto;
    _overflow-y: auto;
    margin: 5px;
    _width: 100%;
    max-width: 100%;
    _height: 100%;
    height: max-content;
    background-color: #3E6A2F;
    color: #FFFFFF;
    border-style: solid;
    border-color: #38612A;
    border-width: 1px;
}

input[type=text], input[type=password], textarea, form img {
    border-style: groove;
    border-color: #FFFFFF;
    border-width: 3px;
    border-left-width: 2px;
    border-left-color: #000000;
    border-top-width: 2px;
    border-top-color: #000000;
}

button, input[type=submit] {
    border: none;
    padding: 3px 5px;
    _padding: 0;
    _border-style: groove;
    _border-color: #2E5023;
    background-color: #629E4E;
    color: #000000;
    box-shadow: inset -1px -1px #2E5023, inset 1px 1px #71C456, inset -2px -2px #38612A, inset 2px 2px #77A173;
}

button:active, input[type=submit]:active {
    _background-color: #2E5023;
    box-shadow: inset 1px 1px #38612A, inset -1px -1px #38612A, inset 1px 1px #38612A, inset -1px -1px #38612A;
}

span.spacer {
    display: none;
}

/* Fixes some browsers that dropped html4 like wtf ??? */
center { text-align: center; }

/* Responsive and Mobile */
@media (max-width: 799px), screen and (orientation: portrait) {
    div.webpage {
        width: 100%;
    }

    blockquote {
        margin: 10px;
    }

    div.tabholder {
        display: flex !important;
    }

    div.tabholder a, div.tabholder a.on, div.tabholder span {
        height: 40px !important;
    }

    div.tabholder a {
        font-size: 16px !important;
    }

    div.tabholder a.on, div.tabholder span {
        margin-bottom: 1px !important;
    }

    blockquote.guestbook-post i.id, blockquote.blog-post i.id {
        background-color: #38612A;
        color: #FFFFFF;
        display: block;
        position: initial;
        text-align: center;
    }
}