/* user styles; styles are what change the color and sizes of stuff on your site. */

/* these are variables that are being used in the code
these tended to confuse some people, so I (Alice) only kept 
the images as variables */

:root {
    --header-image: url('./Images/echoardere-websiteheadimage_cut2.png');
    --body-bg-image: url('./Images/tbd.png');
    /* colors */
    /* --content: #43256E; */
}

/* only include this if you want to remove the bullets from a bulleted list */

/* ul {
    list-style-type: none;
        } */
    
/* if you have the URL of a font, you can set it below; feel free to delete 
this if it's not your vibe */

/* this seems like a lot for just one font and I (Alice) would have to agree 
but I (Alice) wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc.) which is why there are so many! */

@font-face {
    font-family: Bona Nova;
    src: url('https://alicehorrorshow.neocities.org/fonts/BonaNova-Regular.ttf');
}

@font-face {
    font-family: Bona Nova;
    src: url('https://alicehorrorshow.neocities.org/fonts/BonaNova-Regular.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Bona Nova;
    src: url('https://alicehorrorshow.neocities.org/fonts/BonaNova-Regular.ttf');
    font-style: italic;
}

@font-face {
    font-family: Bona Nova;
    src: url('https://alicehorrorshow.neocities.org/fonts/BonaNova-Regular.ttf');
    font-style: italic;
    font-weight: bold;
}

/* below this line is CSS for the layout */

body {
    font-family: 'Bona Nova', sans-serif;
    margin: 0;
    color: #ffffff;
    background-color: #000000;
    /* background-color: #f1e4e4; */
    /* background-color: #1a0303; */
    
    /* background-image: var(--body-bg-image); you can delete this line if you'd prefer to not use an image */
}

* {
    box-sizing: border-box;
}

/* the "container" is what wraps your entire website */

/* if you want something (like the header) to be wider than
the other elements, you will need to move that div outside
of the container */

#container {
    max-width: 1100px; /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
    and change the media query according to the comment! */
    margin: 0 auto; /* this centers the entire page */
   }

/* the area below is for all links on your page EXCEPT for the navigation */

#container a {
    color: #66d9fa;
    font-weight: bold;
    /* if you want to remove the underline you can add a line below here that says: */
    /* text-decoration:none; */
}

/* this is the CSS for the header and footer of each page */

#header {
    height: 150px;
    width: 100%;
    background-color: #ba2131; /* header color here! */
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
    you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    /* background-repeat: no-repeat; */
    background-size: 100%;
}

footer {
    height: 40px;
    width: 100%;
    padding: 0px;
    font-size: 10px;
    line-height: 20px;
    border: 1px solid black;
    background-color: #ba2131; /* background color for footer */
    text-align: center; /* this centers the footer text */
}

#flex {
    display: flex;
}

/* navigation section is included in the navbar.html file */

/* this colors BOTH sidebars if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */

aside {
    background-color: #71717196;
    /* background-image: url('/shamblerparty/slime.png'); */
    width: 220px;
    padding: 20px;
    border: 1px solid black;
    font-size: smaller; /* this makes the sidebar text slightly smaller */
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

/* what's this "order" stuff about?? allow me (Alice Sawyer) 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! */

/* this is the color of the main content area, between the sidebars! */

main {
    background-color: #71717196;
    flex: 1;
    padding: 20px;
    order: 2;
    border: 1px solid black;
}

/* this is the CSS for the headers I use on my pages */

h1 {
    text-align:center;
    font-size: 25px;
    color: #ba2131;
}

h2 {
    font-size: 15px;
    color: #ba2131;
}

h3 {
    font-size: 20px;
    color: #ba2131;
}

h4 {
    text-align:center;
    font-size: 20px;
    color: #ba2131;
}

/* this styles bold text */

strong {
    color: #ba2131;
}

/* This is the CSS for the info box and table in webnovel chapters*/

table, th {
    border: 1px solid black;
    font-size: 95%;
    }

table {
    width: 100%;
}

th {
    width: 33.3%;
}

.box {
    background-color: #555;
    border: 1px hidden #ba2131;
    padding: 0px;
}

/* this is the css for the blog post sections on the home page and annoucement pages */

#blog {
    max-width: 100%;
    /* height: 1000px; */
}

.card {
    background-color: #777;
    padding: 10px;
    margin-top: 10px;
}

/* this is the CSS for the navigation portion for webnovel chapters (next chapter, 
    previous chapter, and index) */

.flex-container {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.flex-container > div {
    margin: 1px;
    padding: 1px;
}

/* this creates four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 220px; /* Only used to make all boxes look even at the bottom */
    border: 1px double black;
}

/* this creates two equal columns that floats next to each other */
.column2 {
    float: left;
    width: 50%;
    padding: 1px;
    height: auto;
    border: 1px double black;
}

/* this creates one column that floats on its own */
.column3 {
    float: left;
    width: 100%;
    padding: 10px;
    height: auto;
    border: 1px double black;
}

/* this creates two equal columns that floats next to each other but remove 
the border so you can't see the boxes */
.column4 {
    float: left;
    width: 50%;
    padding: 0px;
    /* height: auto; */
}

/* this clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* this section controls for the collapsible fields on the page */

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 15px;
    display: none;
    overflow: hidden;
    background-color: #736d6d;
}

/* CSS for extras (I can't figure out where Alice uses it on her website though) */

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

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 1100px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below */

@media only screen and (max-width: 1000px) {
    #flex {
        flex-wrap: wrap;
        width: 100vw;
    }

    aside {
        width: 100%;
        align-items: center;
        }

    #header {
        height: 50px;
    }

    .column {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
    since the sidebars would be too small on a mobile device.
    feel free to play around with the order! */

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

}