@font-face {
    /* Custom font*/
    font-family: OpenSansPX;
    src: url("../fonts/OpenSansPX.ttf");
}

*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--orange);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--yellow);
    border-radius: 20px;
    border: 3px solid var(--orange);
}

:root {
    --button-height: 31px;
    --bgorange: #ffc90e;
    --orange: #ffa500;
    --yellow: #ffff00;
    --almostblack: #362f26;
    --almostwhite: #faf0e6;
    --gray: #808080;
    --blog-container-overlay:  rgba(255, 255, 255, 0.90);
    --white: white;
    --backgroundimg: url("../images/sky.gif");
    --bannerimg: url("../images/banner.png");
}

[data-theme="dark"] {
    --button-height: 31px;
    --bgorange: rgb(255, 127, 39);
    --orange: #ffa500;
    --yellow: #ffff00;
    --almostblack: #faf0e6;
    --almostwhite: #362f26;
    --blog-container-overlay:  rgba(54, 47, 38, 0.90);
    --white: #24201a;
    --backgroundimg: url("../images/darksky.gif");
    --bannerimg: url("../images/bannerdarkmode.png");
}

a {
    color: var(--almostblack);
}

html {
    scroll-behavior: smooth;
}

body {
    height: 100%;
    padding: 10px 5% 10% 5%;
    background-attachment: scroll;
    background-image: var(--backgroundimg);
    background-size: fill;
    background-color: var(--bgorange);
    background-repeat: repeat-x;
    font-family: OpenSansPX;
    font-size: 16px;
    color: var(--almostblack);
    scrollbar-color: var(--orange) var(--yellow);
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--yellow);
}

header {
    text-align: center;
    font-size: 24px;
}

.nav-item {
    color: var(--almostwhite);
}

h2 {
    font-size: 24px;
    font-family: OpenSansPX;
    color: var(--almostblack);
}

.body-text {
    font-size: 16px;
    font-family: OpenSansPX;
    color: var(--almostblack);
}

button {
    font-family: OpenSansPX;
    font-size: 16px;
}

p {
    font-size: 16px;
}


/* Welcome text and banner */

.welcome-txt {
    text-align: left;
    padding: 0% 0% 0% 10%;
    margin: 0px;
    font-size: 36px;
    text-shadow: 1px 1px var(--gray);
    font-family: OpenSansPX;
    position: relative;
}

#banner-img {
    text-align: center;
    width: 70%;
    position: relative;
    top: 25%;
    margin-left: 50%;
    transform: translateX(-50%);
    content: var(--bannerimg);
}

.stamp {
    height: var(--button-height);
    image-rendering: optimizeSpeed;
    /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;
    /* Firefox                        */
    image-rendering: -o-crisp-edges;
    /* Opera                          */
    image-rendering: -webkit-optimize-contrast;
    /* Chrome (and eventually Safari) */
    image-rendering: pixelated;
    /* Chrome */
    image-rendering: optimize-contrast;
    /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE8+                           */
}

#banner-img-container {
    overflow: hidden;
    position: relative;
    background-color: var(--almostwhite);
    border-radius: 2em 2em 0px 0px;
    text-align: center;
    padding: 3% 6% 2% 3%;
    margin: 2% 2% 0% 2%;
    border: var(--almostblack);
    border-width: 5px;
    border-style: dashed dashed none dashed;
    height: 10%;
}

.navbar {
    background-color: var(--almostblack);
    margin: 0% 2% 0% 2%;
    padding: 10px 10px 13px 10px;
    position: relative;
    z-index: 1;
    color: white;
}

#header-bottom {
    overflow: hidden;
    position: relative;
    background-color: var(--almostwhite);
    border-radius: 0px 0px 2em 2em;
    text-align: center;
    padding: 2% 2% 2% 2%;
    margin: 0% 2% 0% 2%;
    border: var(--almostblack);
    border-width: 5px;
    border-style: none dashed dashed dashed;
    height: 10%;
}

#stamps-text-container {
    margin: 0px auto 0px auto;
    max-width: 500px;
    padding: 10px;
}

#stamps-container {
    text-align: center;
}


/* Header done */

.body-container {
    overflow: auto;
    padding: 20px;
    background-color: var(--almostwhite);
    border: 10px solid transparent;
    border-radius: 10px;
    border-image: url('https://www.w3schools.com/css/border.png') 20% round;
    scrollbar-color: var(--orange) var(--yellow);
    scrollbar-width: thin;
    text-align: center;
}

.right-container {
    flex: 70%;
    margin: 20px 10px 20px 10px;
}

#home-flex-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

#left-container {
    flex: 30%;
    overflow: auto;
    padding: 20px;
    position: relative;
    text-align: center;
    margin: 20px 10px 20px 10px;
}

#guestbook {
    max-height: 100%;
    width: 100%;
    border: none;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--yellow);
    overflow: scroll;
}

#updates-container {
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.whitelink {
    color: var(--almostwhite)!important;
}

#update-box {
    overflow-y: scroll;
    margin: 0px 10px 10px 10px;
    padding: 5px;
    max-height: 200px;
    text-align: left;
    border-radius: 5px;
    background-color: var(--almostblack);
    color: var(--almostwhite);
}

#random-container {
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: -10px;
    margin: 20px 0px 0px 0px;
}


/* Blog stuff */

.blog-container {
    background-image: url("/images/NewLeafPattern.png");
    background-repeat: repeat-x repeat-y;
    background-color: var(--white);
    background-size: 300px;
    border-radius: 10px;
    padding: 50px;
}

#trending-container {
    margin: 0px 15% 25px 15%;
}

.blog-container-overlay {
    background-color: var(--blog-container-overlay);
    padding: 10px;
    border-radius: 10px;
}

.blog-title {
    font-size: 24px;
}

.blog-date {
    color: var(--gray);
}

.blog-caption {
    display: block;
    text-align: justify;
}

.blog-readmore {
    display: block;
    text-align: right;
    font-size: 16px;
}


/* BLOG Page */

#blog-bodycontainer {
    margin: 20px;
}

#blog-flex-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

#blog-bodycontainer {
    flex: 70%;
    overflow: auto;
    padding: 20px 20px 0px 20px;
    position: relative;
    text-align: center;
    margin: 20px 10px 20px 10px;
}

.blog-container {
    margin: 0px 0px 20px 0px;
}

.blogimage {
    text-align: center;
    max-width: 100%;
    position: relative;
}

#blog-tagcontainer {
    flex: 20%;
    margin: 20px 10px 10px 10px;
}

#blog-comment-container {
    margin: 10px;
    padding: 10px;
}

.search-container {
    display: flex;
    margin-bottom: 20px;
    grid-gap: 8px;
}

#search-query {
    border-radius: 10px;
    width: 100%;
    text-align: left;
}

#searchfailpic {
    max-height: 100%;
    max-width: 100%;
}

mark{
    background: var(--bgorange);
    color: var(--almostblack);
}

.widget {
    text-align: left;
    margin-bottom: 0px;
}


/* Individual blog-posts */

#blogpost-container {
    margin: 20px;
}

#blog-left-flex-container {
    flex: 80%;
}

footer {
    text-align: center;
}

/* Project page */
.project-list-flexbox {
    display: flex;
    flex-direction: row;
}
#project-body-container {
    text-align: left;
    margin: 20px 30px 20px 30px;
}

#project-container {
    padding: 50px 25% 50px 25%;
    margin-bottom: 0px;
}

#project-container-overlay {
    text-align: left;
}

.project-image-preview {
    object-fit: cover;
    border-radius: 10px;
    max-width: 200px;
    max-height: 200px;
}

.project-info-container {
    padding: 0px 20px 0px 20px;
}

#project-title {
    margin: 0px;
}
#project-date {
    padding: 0px;
}
#project-caption {
    padding: 0px;
    max-width: 500px;
}
/* WIP Layout */

#wip-container {
    margin: 20px 30px 20px 30px;
}


/* Misc stuff */
#HCB_comment_box h3 {
    display: none;
    font-size: 16px;
}
#HCB_comment_box {
    font-family: OpenSansPX;
    object-fit: contain;
    text-align: left;
    font-size: 16px;
}
#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn {
    background: var(--orange);
    background-color: var(--almostblack);
    border: none;
    color: var(--almostwhite);
    font-family: OpenSansPX;
    border-radius: 10px;
    font-size: 16px;
}
#HCB_comment_body {
    text-align: left;
}
#HCB_comment_box .hcb-icon {
    display: none;
}
#HCB_comment_box #hcb_form #hcb_settings {
    text-decoration: none;
    color: var(--almostblack);
    font-size: 16px;
}
#HCB_comment_box .comment a img {
    max-width: 100%;
    border-radius: 10px;
}
#HCB_comment_box .hcb-comment-tb a {
    color: var(--gray);
}
#HCB_comment_box #hcb_form .home-desc a {
    color: var(--gray);
}
#HCB_comment_box #hcb_form textarea, #HCB_comment_box  {
    font-family: "OpenSansPX";
    font-size: 16px;
    padding: 8px;
    margin: 0;
}
#HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name {
    font-family: "OpenSansPX";
    font-size: 16px;
    padding: 8px;
    margin: 0;
}
.backtotop-button {
    position: fixed;
    /* Fixed/sticky position */
    bottom: 40px;
    /* Place the button at the bottom of the page */
    right: 2px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.changecolour-button {
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    left: 2px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    cursor: pointer;
    /* Add a mouse pointer on hover */
}

#dropdown-archive {
    display: none;
}
#list-archive {
    display: inline;
}

.tags {
    background-color: #ffc90e;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    width: initial;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    margin-top: 10px;
    color: #362f26;
}

.tags a {
    text-decoration: none;
    color: #362f26;
}

#tag-count{
    display: inline-block;
    background-color: var(--almostwhite);
    border-radius: 50%;
    width: 18px;
    text-align: center;
    color: var(--almostblack);
}

#tag-count a{
    color: var(--almostblack);
}


/* Responsive layout */

@media (max-width: 1505px) {
    #project-container {
        padding: 50px 20% 50px 20%;
    }
}

@media (max-width: 1300px) {
    #trending-container {
        padding: 10px;
        margin: 0px 0px 0px 0px;
    }
    .project-list-flexbox {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .project-image-preview {
        object-fit: cover;
        border-radius: 10px;
        max-width: 100%;
    }
    #project-container-overlay {
        text-align: center;
        margin: 20px;
    }
}

@media (max-width: 800px) {
    #banner-img {
        width: 100%;
        position: relative;
        top: 0%;
        margin-left: 0%;
        transform: none;
    }

    body {
        padding: 0px;
    }

    #left-container {
        margin: 0px 10px 20px 10px;
        padding: 0px 10px 20px 10px;
    }
    #home-flex-container {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 0px;
        margin: 0px;
    }
    #trending-container {
        padding: 10px;
        margin: 0px 0px 0px 0px;
    }
    #blog-flex-container {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .blog-container {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 5px;
    }
    #wip-container {
        margin: 10px;
    }
    #blog-tagcontainer {
        margin: 20px 10px 0px 10px;
    }
    .search-container {
        flex-direction: row;
    }
    #blogpost-container {
        margin: 10px;
    }
    .backtotop-button {
        height: 64px;
        bottom: 20px;
    }
    .changecolour-button {
        height: 64px;
        bottom: 10px;
    }
    #dropdown-archive {
        display: block;
    }
    #list-archive {
        display: none;
    }
    #project-container {
        padding: 0px;
        margin: 0px 20px 0px 20px;
    }

    .project-info-container {
        padding: 0px;
    }
    #project-body-container {
        padding: 0px;
        margin: 10px 10px 10px 10px;
    }
}