/* || General */

html {
    background-image: url("/images/backgrounds/site/Xenosaga3.jpg");
    background-size: cover;
    font-family: "MS UI Gothic";
    line-height: 1;
}

body {
    width: 800px;
    margin: auto;
    margin-top: 15px;
}

a {
    color: indianred;
    font-weight: bold;
}

a:hover {
    color:maroon;
}

ul {
    margin-top: 0;
    padding-left: 15px;
    list-style: none;
}

li {
    padding: 3px 0;
}

li.li_1::before {
    padding-right: 1ch;
    content: url("/images/icons/bullets/circle.gif");
}

li.li_2::before {
    padding-right: 1ch;
    content: url("/images/icons/bullets/cross.gif");
}

li.li_3::before {
    padding-right: 1ch;
    content: url("/images/icons/bullets/question.gif");
}

li.li_4::before {
    padding-right: 1ch;
    content: url("/images/icons/bullets/exclamation.gif");
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #ebebeb;
}
  
::-webkit-scrollbar-thumb {
    background: #aaaaaa;
}
  
::-webkit-scrollbar-thumb:hover {
    background: #868686;
}

/* Classes */

img.large {
    width: 100%;
    object-fit: cover;
}

.header_wrapper {
    position: relative;
    width: 0;
    height: 0;
}

.content {
    background-color: #fff7f3;
    width: 598px;
    float: left;
    margin: 5px;
    padding: 10px;
    border: 1px outset indianred;
}

.content p {
    margin: 0;
}

.update_entry {
    margin: 5px 0;
    padding: 5px;
    background-image: linear-gradient(#f9e3e299, #f9e3e225);
    border-bottom: 1px solid #f9e3e2;
    border-radius: 2px;
}

.update_date {
    font-size: 8pt;
    color: #818b8b;
}

/* Main Body Elements */

#header {
    width: 796px;
    float: left;
    height: 100px;
    object-fit: cover;
    object-position: 0 40%;
    border: 2px solid maroon;
    margin: 0;
}

#body_wrapper {
    height: 710px;
}

#body_wrapper > div {
    float: left;
    vertical-align: top;
    background-color: #f9e3e2;
    border: 2px solid maroon;
}

#sidebar {
    width: 164px;
    height: 100%;
}

#main {
    width: 630px;
    border-left: 0 !important;
    height: 100%;
    background-image: url("/images/backgrounds/content/SB093.JPG");
    background-size: auto 100%;
}

#footer {
    background-color: #f9e3e2;
    width: 600px;
    border: 2px solid maroon;
    margin: auto;
    margin-bottom: 5px;
    padding: 3px;
    font-size: 10pt;
    text-align: center;
}

/* Sidebar Elements */

#sidebar h1 {
    margin: 10px 5px;
    padding: 2px;
    width: 148px;
    border: 1px outset maroon;
    background-image: url("/images/backgrounds/content/sunset.gif");
    background-position: left;
    background-size: 2500%;
    color: #5c0000;
    text-align: center;
    font-size: 12pt;
}

#email {
    image-rendering: pixelated;
    width: 115px;
    margin: 0 0 5px 20px;
    transform: rotate(-5deg);
}

#email:hover {
    transform: rotate(5deg);
}

/* Content Elements */

#about_header {
    width: 200px;
    position: absolute;
    image-rendering: pixelated;
    top: -35px;
    left: -5px;
}

#featured_video {
    border-radius: 3px;
}

#updates_header {
    width: 150px;
    position: absolute;
    image-rendering: pixelated;
    top: -27px;
    overflow: visible;
    left: 95px;
}

#site_updates {
    padding: 0;
    width: 265px;
    height: 190px;
    margin-top: 25px;
}

#updates_scroll {
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    padding: 10px;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
}

#neetdroid_wrapper {
    border: 0;
    border-right: 1px outset firebrick;
    padding: 0;
    margin-right: 5px;
    padding-left: 30px;
    width: 176px;
    height: 177px;
    background: none;
    background-image: linear-gradient(to right, #f0ffff00, #fff7f3, #fff7f3, #fff7f3, #fff7f3, #fff7f3);
}

#neetdroid_art {
    width: 190px;
    position: relative;
    right: 10px;
}

#wrapper_88x31 {
    width: 796px;
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
}

#images_88x31 {
    image-rendering: pixelated;
    padding-top: 2px;
    animation: scroll_88x31 20s linear infinite;
}

#images_88x31:hover {
    animation-play-state: paused;
}

#images_88x31 img:hover {
    transform: scale(1.1);
}

@keyframes scroll_88x31 {
    from {transform: translateX(100%);}
    to {transform: translateX(-110%);}
}

/* External Elements */

#statuscafe {
    width: 120px;
    padding: 10px;
    background-color: #fff7f3;
}

#statuscafe-username {
    margin-bottom: 5px;
}

#statuscafe-content {
    margin: 0 10px 5px 10px;
}

#visitor_counter {
    margin-top: 5px;
    margin-left: 320px
}

/* || Safari */

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    html {
        font-family: "Menlo";
        font-size: 11pt;
    }

    #visitor_counter {
        margin-top: 5px;
        margin-left: 300px
    }
}

/* || Mobile */

@media only screen and (max-width: 375px) and (orientation: portrait) {
    body {
        width: 770px;
    }

    .content {
        width: 481px;
    }

    #header {
        width: 761px;
    }

    #sidebar {
        width: 154px;
    }

    #main {
        width: 605px;
    }
    
    #footer {
        width: 483px;
    }

    #wrapper_88x31 {
        width: 770px;
        margin: auto;
        white-space: nowrap;
        overflow: hidden;
        container-type: inline-size;
    }
}
