/* This is the stylesheet! This is what actually formats the HTML */

/* A note on the fonts-- you should be able to use Montserrat if you format
it like this : */

/*
@font-face {
    font-family: "Montserrat";
    src: url("Montserrat-Regular.otf");
}
*/

@font-face {
font-family: Raleway;
    src: url('https://thechristmascrisis.neocities.org/raleway/Raleway-Regular.ttf')  format("truetype");
}

@font-face {
    font-family: Raleway;
    src: url('https://thechristmascrisis.neocities.org/raleway/Raleway-Bold.ttf')  format("truetype");
    font-weight: bold; /* bold */
}

@font-face {
    font-family: Raleway;
    src: url('https://thechristmascrisis.neocities.org/raleway/Raleway-Italic.ttf')  format("truetype");
    font-style: italic; /* italic */
}

@font-face {
    font-family: Raleway;
    src: url('https://thechristmascrisis.neocities.org/raleway/Raleway-BoldItalic.ttf')  format("truetype");
    font-style: italic; /* italic */
    font-weight: bold; /* bold */
}


/* Styles the page background */
body {
    background: linear-gradient(rgb(16,24,50,1), rgb(16,24,50,0.15)), url("../img/background.JPG") no-repeat;
    background-size: cover;
    background-color: #00071c;
    font-family: 'Raleway'

}

/* Styles the "main" section (this is what centers the page) */
main {
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    background-color: #101832;
}

.flex {
    display: flex;
}

/* Styles the header (with an image) */
header {
    height: 200px;
    background-image: url('../img/header.JPG');
    background-size: 100%;
    background-position: center;
}

/* Styles the "sidebar" */
.sidebar {
    flex: 2;
    max-width: 150px;
    padding: 1em;
}

/* Styles the "content" of the page */
.content {
    flex: 1;
    max-width: 800px;
    padding: 1em;
}

/* Styles the "navigation" */
nav .option {
    display: block;
    position: relative;
    color: #fff;
}

nav > details {
    color: #fff;
}

details .option {
    margin-left: 1em;
}

section > a {
    display: block;
    position: relative;
}

/* Styles the "paragraph" sections */
p {
    color: #fff;
    line-height: 1.5;
}

/* Styles the "headers" */

h1,
h2,
h3 {
    color: #fff;
}

/* Styles the "lists" */

ul, li {
    color: #fff;
    line-height: 1.5;

}

#on {
    color: #fff;
}

#off {
    color: #808080
}

/* This auto-formats the images (like the bookcover,) 
so that they're viewable on different screen sizes */

img {
    max-width: 100%;
    height: auto;
}

/* This is what re-adjusts the website to work on mobile */

@media screen and (max-width: 600px) {
    
    .flex {
        flex-direction: column;
    }

    .sidebar {
        max-width: 100%;
    }
}