@import url("/assets/css/images.css");

:root {
    --highlight-text: #FF424E;
    --link-text: #FF424E;
    --link-hover-text: #A49CBA;
    --divider: #E6D09E;
    --post-background: #3F0A11;
    --sidebar-background: #3F0A11;
    --nonpost-background: #560E17;
    --comments-background: #E6D09E;
    --header-text: #E5A580;
    --header-background-color: #560E17;
    --header-lower-area-color: #3F0A11;
    --footer-color: #30080A;
    --page-background-color: #C47E64;
    --gutter-size: 1em;
}

/* fonts */
@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: var(--page-background-color);
    color: #fceaff;
}

* {
    box-sizing: border-box;
}

/* the "container" is what wraps your entire website */
#container {
    margin: 0 auto;
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
    color: var(--link-text);
    font-weight: bold;
    /* text-decoration:none; */
}

#header {
    width: 100%;
    background-color: var(--header-background-color);
    height: 10vmin;
    display: flex;
    align-items: center;
}

#header img {
    height: 100%;
    float: left;
}

#header #headerText {
    color: var(--header-text);
    font-size: 4em;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
}

#headerArea {
    margin-bottom: var(--gutter-size);
    background-color: var(--header-lower-area-color);
}

#headerArea #headerAreaContents {
    width: 50%;
    display: flex;
    justify-content: space-between;
    height: 1.5em;
}

h1.sectionTitle {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.125em;
    padding-bottom: 0.125em;
}

#navbar {
    height: 40px;
    background-color: #13092D;
    /* navbar color */
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: var(--link-text);
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: var(--link-hover-text);
    text-decoration: underline;
}

#flex {
    display: flex;
}

#leftSidebar {
    background-color: var(--sidebar-background);
    width: 200px;
    font-size: smaller;
    padding: 1em;
}


/* this is the color of the main content area,
between the sidebars! */
#center {
    background-color: var(--nonpost-background);
    flex: 1;
    order: 2;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 2em;
}

.post {
    background-color: var(--post-background);
    padding: 1em;
    margin-bottom: 1em;
}

.postPreview {}

.wholePost {
    width: 100%;
    height: 100%;
}

/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

#footer {
    background-color: var(--footer-color);
    width: 100%;
    height: 3em;
    padding: 10px;
    margin-top: 10px;
}

.comment_section {
    overflow: hidden;
    background-color: var(--comments-background);
    color: black;
    padding: 10px;
}

.comment_section h1,
.comment_section h2,
.comment_section h3,
.comment_section p {
    color: black
}

#HCB_comment_form_box {
    padding-bottom: 0px !important;
}

#HCB_comment_box h3 {
    margin-block-start: 0.25em;
}

#hcb_msg {
    margin-top: 0.125em;
    margin-bottom: 0.125em;
}

.comment {
    margin-bottom: 1.125em !important;
}

h1,
h2,
h3 {
    color: var(--highlight-text);
}

strong {
    color: var(--highlight-text);
}

.box {
    background-color: #13092D;
    border: 1px solid #ED64F5;
    padding: 10px;
}

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #13092D;
}

@media only screen and (orientation: landscape) {
    #container {
        max-width: 80vw;
    }

    #leftSidebar {
        #expander {
            display: none;
        }

        margin-right: var(--gutter-size);
    }
}

@media only screen and (orientation: portrait) {
    #container {
        max-width: 80vw;
    }

    #flex {
        flex-wrap: wrap;
    }

    #leftSidebar {
        width: 100%;

        & #expanded {
            display: none;

        }

        & #expanded.active {
            display: block;
        }

    }

    #navbar ul {
        flex-wrap: wrap;
    }
}

span.header_divider {
    display: inline-block;
    background-color: var(--divider);
    width: 100%;
    height: 0.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}