/* =========================================
   URAURAURA
   stylesheet v0.2
========================================= */


/* =========================================
   GENERAL PAGE
========================================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background-color: #151a17;
    
    background-image: url("images/background.jpg");
    
    background-repeat: repeat;

    color: #242a25;

    font-family: Verdana, Arial, sans-serif;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================
   MAIN WEBSITE
========================================= */

#site {

    width: 900px;

    margin: 0 auto;

    border: 1px solid #788078;

    background: #c9cec6;

    box-shadow: 0 0 20px #000;
}


/* =========================================
   HEADER
========================================= */

#header {
    position: relative;

    width: 900px;
    height: 300px;

    overflow: hidden;

    border-bottom: 1px solid #6e776e;
}


#header img {
    display: block;

    width: 900px;
    height: 600px;

    object-fit: cover;

    margin: 0;
    padding: 0;
}

.header-text {
    position: absolute;

    left: 22px;
    bottom: 18px;

    color: #e5e8e2;

    text-shadow:
        1px 1px 2px #000,
        0 0 5px #000;
}


.logo {

    font-family: Georgia, serif;

    font-size: 31px;

    letter-spacing: 8px;
}


.subtitle {

    margin-top: 2px;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: lowercase;
}


/* =========================================
   MAIN LAYOUT
========================================= */

#layout {

    display: flex;

    align-items: stretch;
}


/* =========================================
   SIDEBAR
========================================= */

#sidebar {

    width: 205px;

    padding: 12px;

    flex-shrink: 0;

    background: #899287;

    border-right: 1px solid #5e665e;
}


.side-box {

    margin-bottom: 13px;

    border: 1px solid #566056;

    background: #bcc4b9;
}


.side-heading {

    padding: 5px 7px;

    background: #303930;

    color: #cbd4c7;

    font-size: 10px;

    letter-spacing: 1px;

    font-weight: bold;
}


.side-content {

    padding: 4px 8px;
}


.side-content p {

    margin: 8px 0 12px 0;
}


.label {

    color: #596359;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================
   NAVIGATION
========================================= */

nav a {

    display: block;

    padding: 7px 8px;

    border-bottom: 1px dotted #7d877c;

    color: #243626;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1px;
}


nav a:last-child {
    border-bottom: none;
}


nav a:hover {

    color: #dce4d8;

    background: #455145;

    padding-left: 12px;
}


/* =========================================
   STATUS
========================================= */

.online {

    color: #39533b;

    font-size: 10px;

    font-weight: bold;
}


.sidebar-note {

    margin-top: 20px;

    color: #4c554d;

    text-align: center;

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================
   CONTENT AREA
========================================= */

#content {

    width: 695px;

    padding: 18px;

    background: #d9ddd5;
}


/* =========================================
   INTRO
========================================= */

.intro {

    margin-bottom: 22px;

    padding: 12px 15px;

    border: 1px solid #8a9389;

    background: #e5e8e1;
}


.section-title {

    margin-bottom: 10px;

    padding-bottom: 4px;

    border-bottom: 1px solid #aab1a8;

    color: #485148;

    font-family: Georgia, serif;

    font-size: 18px;

    letter-spacing: 3px;
}


.small {

    color: #697169;

    font-size: 10px;
}


/* =========================================
   BLOG POSTS
========================================= */

.post {

    margin-bottom: 22px;

    padding: 0 14px 14px 14px;

    border: 1px solid #858e84;

    background: #eef0eb;
}


.post-top {

    display: flex;

    justify-content: space-between;

    margin: 0 -14px 14px -14px;

    padding: 5px 8px;

    background: #3e483f;

    color: #cbd2c7;

    font-size: 9px;

    letter-spacing: 1px;
}


.post h2 {

    margin: 8px 0 12px 0;

    color: #384238;

    font-family: Georgia, serif;

    font-size: 19px;

    font-weight: normal;
}


.post p {

    max-width: 610px;
}


/* =========================================
   PHOTOGRAPHS INSIDE POSTS
========================================= */

.post-image {

    display: block;

    width: 100%;

    max-height: 390px;

    margin-top: 15px;

    border: 1px solid #747c73;

    object-fit: cover;

    filter:
        saturate(75%)
        contrast(95%);
}


.image-caption {

    margin-top: 4px;

    color: #737a72;

    font-family: "Courier New", monospace;

    font-size: 9px;

    text-align: right;
}


/* =========================================
   LINKS
========================================= */

a {

    color: #364d39;
}


a:hover {

    color: #1e2d20;
}


/* =========================================
   FOOTER
========================================= */

#footer {

    display: flex;

    justify-content: space-between;

    padding: 7px 12px;

    border-top: 1px solid #555f55;

    background: #303830;

    color: #9eaa9b;

    font-family: "Courier New", monospace;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================
   MOBILE / SMALL SCREENS
========================================= */

@media (max-width: 930px) {

    #site {

        width: 95%;

        margin: 10px auto;
    }


    #layout {

        display: block;
    }


    #sidebar {

        width: 100%;

        border-right: none;

        border-bottom: 1px solid #5e665e;
    }


    #content {

        width: 100%;
    }

}

/* CUSTOM CURSORS */

/* Normal cursor */
html,
body {
    cursor: url("images/cursor2.cur"), auto;
}

/* Cursor when hovering clickable links */
a,
button {
    cursor: url("images/cursor3.cur"), pointer;
}


/* =========================================
   ABOUT PAGE
========================================= */

.about-page {
    padding: 8px 4px 30px 4px;
}

.about-page h1 {
    margin: 0 0 22px 0;

    color: #384238;

    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: normal;

    letter-spacing: 2px;
}

.about-layout {
    display: flex;
    align-items: flex-start;

    gap: 22px;
}

.about-photo {
    width: 120px;
    height: 150px;

    flex-shrink: 0;

    object-fit: cover;

    border: 1px solid #626b62;
}

.about-facts {
    flex: 1;
}

.about-facts p {
    margin: 0 0 9px 0;
}

.about-label {
    display: inline-block;

    width: 120px;

    color: #596359;

    font-size: 10px;
    font-weight: bold;

    text-transform: uppercase;
}

.about-text {
    margin-top: 24px;

    max-width: 560px;
}

.about-text p {
    margin: 0 0 14px 0;
}


/* =========================================
   SIDEBAR BANNERS
========================================= */

.banner-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 4px;

    margin: 12px 0 16px 0;
}

.banner-area a {
    display: block;
}

.banner-area img {
    display: block;

    width: 88px;
    height: 31px;
}
/* =========================================
   DARK THEME C — FOREST AT NIGHT
========================================= */

body {
    color: #d5d9d4;
}

#site {
    background: #1c2420;
    border-color: #414d46;
}

#sidebar {
    background: #171e1b;
    border-color: #414d46;
}

.side-box {
    background: #252d29;
    border-color: #49564e;
}

.side-heading,
.post-top {
    background: #49594f;
    color: #e0e5df;
}

nav a {
    color: #b8c4bb;
    border-color: #3d4942;
}

nav a:hover {
    background: #344138;
    color: #f3f6f2;
}

#content {
    background: #1c2420;
}

.post {
    background: #252d29;
    border-color: #49564e;
}

.post h2 {
    color: #e0e5df;
}

.label,
.image-caption {
    color: #8da094;
}

a {
    color: #a3b5a8;
}

a:hover {
    color: #dce7df;
}

#footer {
    background: #19211d;
    color: #9eaca2;
    border-color: #414d46;
}



/* =========================================
   DARK THEME D — STORM CLOUD
========================================= */

body {
    color: #dededb;
}

#site {
    background: #222427;
    border-color: #4d5155;
}

#sidebar {
    background: #1c1e20;
    border-color: #4d5155;
}

.side-box {
    background: #2c2e31;
    border-color: #565b60;
}

.side-heading,
.post-top {
    background: #62676c;
    color: #f0f0ed;
}

nav a {
    color: #c6c9ca;
    border-color: #484c50;
}

nav a:hover {
    background: #3b3e42;
    color: #ffffff;
}

#content {
    background: #222427;
}

.post {
    background: #2c2e31;
    border-color: #565b60;
}

.post h2 {
    color: #eeeeeb;
}

.label,
.image-caption {
    color: #9da5aa;
}

a {
    color: #b4bcc0;
}

a:hover {
    color: #eef1f2;
}

#footer {
    background: #1e2022;
    color: #a9adaf;
    border-color: #4d5155;
}


/* =========================================
   DARK THEME A — BLUE NIGHT
========================================= */

body {
    color: #d3d8d7;
}

#site {
    background: #1b2327;
    border-color: #3f4b50;
}

#sidebar {
    background: #182025;
    border-color: #3f4b50;
}

.side-box {
    background: #252d30;
    border-color: #46545a;
}

.side-heading,
.post-top {
    background: #46565d;
    color: #e0e4e2;
}

nav a {
    color: #b8c6ca;
    border-color: #3b484d;
}

nav a:hover {
    background: #344147;
    color: #ffffff;
}

#content {
    background: #1b2327;
}

.post {
    background: #252d30;
    border-color: #46545a;
}

.post h2 {
    color: #e0e4e2;
}

.label,
.image-caption {
    color: #879da5;
}

a {
    color: #9fb2b8;
}

a:hover {
    color: #dce5e7;
}

#footer {
    background: #20292d;
    color: #9baaad;
    border-color: #3f4b50;
}

body,
.logo
.side-heading,
.post-top,
nav a,
.post h2,
#footer {
    font-family: "Trebuchet MS", Arial, sans-serif;
}