# this ensures Jekyll reads the file to be transformed into CSS later


@import “variables”; @import “reset”; @import “window”; @import “topbar”; @import “postlist”;

body {

background: #008082;
font-family: sans-serif, serif, monospace;
font-size: 13px;

}

.post_list, .tag_list, .post_content, .intro {

background: #fff8ff;
border-width: 2px;
border-style: ridge groove groove ridge;
border-color: #7f787f #fff8ff #fff8ff #7f787f;

} .tag_list {

width: 28%;
margin: 0 auto;
min-height: $windowHeight;
max-height: $windowHeight;
overflow-y: scroll;
display: inline-block;

img {
        height: 16px;
        width: 16px;
        margin: -2px 5px;
}

a {
        text-decoration: none;
        color: #000000;
}

ul {
        li {
                max-width: 27ch;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
        }
}

} tag-list {

background:transparent url("{{ "/assets/img/pixel-alt.png" | relative_url }}") repeat-y 15px 0;

} tag-list li {

padding:0 0 0 2px;

} tag-list li a {

background: #fff8ff;
display:block;

} tag-list li ul li {

background:transparent url("{{ "/assets/img/pixel-alt.png" | relative_url }}") repeat-x 0 8px;
margin:4px 0 4px 13px;
padding:0 0 0 20px;

} .post_total {

.left, .right {
        border: 1px solid;
        border-color: #888888 #dadada #dadada #888888;
        display: inline-block;
        padding: 1px 3px;
}
.left {
        width: 33%;
        margin-left: 2px;
}
.right {
        width: 64%;
        margin-right: 2px;
}

}

.hljs {

background: #fff8ff;

} .footer {

font-size: 12px;
margin: 30px 0 10px 0;

p {
        text-align: center;

        a {
                color: #24244a;
        }
}

} @media only screen and (max-width: 900px) {

#content {
    width: 90%;
}

} @media only screen and (max-width: 700px) {

#content {
    width: 90%;
}
    .post_content {
            width: 98%;
    }

} @media only screen and (max-width: 400px) {

.post_content {
        width: 97%;
}

} @media only screen and (max-width: 810px) {

#wrapper {
        width: 90%;
}
.post_total {
        .left {
                width: 37%;
        }
        .right {
                float: right;
                width: 60%;
        }
}

} @media only screen and (max-width: 750px) {

.tag_list {
        width: 99%;
}
.post_list, .intro {
        width: 99%;
        float: left;
}
.post_total {
        .left {
                width: 36%;
        }
        .right {
                float: right;
                width: 60%;
        }
}

} @media only screen and (max-width: 610px) {

.tag_list {
        width: 98.7%;
}
.post_list, .intro {
        width: 98.7%;
        float: left;
}
.post_total {
        .left {
                width: 35.7%;
        }
}

} @media only screen and (max-width: 520px) {

.post_total {
        .left {
                width: 34.5%;
        }
}

} @media only screen and (max-width: 410px) {

.post_total {
        .left {
                width: 34%;
        }
}

} @media only screen and (max-width: 375px) {

.post_total {
        .left {
                width: 33%;
        }
}

} ::-webkit-scrollbar {

width: 16px;

} /* this targets the default scrollbar (compulsory) */ ::-webkit-scrollbar-track {

background-image: url("{{ "/assets/img/track.png" | relative_url }}");
background-repeat: repeat-x repeat-y;

} /* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {

background-color: #cccccc;
border-width: 2px;
border-style: groove ridge ridge groove;
border-color: #fff8ff #000000 #000000 #fff8ff;

} /* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {

background-color: #cccccc;
border-width: 2px;
border-style: groove ridge ridge groove;
border-color: #fff8ff #000000 #000000 #fff8ff;
background-position: center center;
background-repeat: no-repeat;

&:vertical:decrement {
        background-image: url("{{ "/assets/img/up.png" | relative_url }}");
}

&:vertical:increment {
        background-image: url("{{ "/assets/img/down.png" | relative_url }}");
}

&:horizontal:decrement {
        background-image: url("{{" /assets/img/left.png" | relative_url }}");
}

&:horizontal:increment {
        background-image: url("{{ "/assets/img/right.png" | relative_url }}");
}

&:active {
        background-position: 1px 2px;
}

} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {

background-color: #cacaca;

} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */