$font-header: 'Merienda', cursive; $font-body: 'Source Sans Pro', sans-serif; $color-frame: #DBDBDB; $color-main-normal: #795548; $color-main-light: #D7CCC8; $color-main-dark: #5D4037; $color-bg: #FFFFFF; $color-accent: #9E9E9E; $color-text-normal: #212121; $color-text-alt: #757575; $color-divider: #BDBDBD; $information-phone: “only screen and (max-width : 639px)”; $information-comp: “only screen and (min-width: 640px)”;

@import “reset”;

html { height: 100%; } body {

height: 100%;
max-width: 100%;
background-color: $color-bg;

// HEADER SIDEBAR
#sidebarbackground {
    @media #{$information-comp} {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 25%;
        max-width: 16em;
        border-right: 2px solid $color-divider;
        background-color: $color-main-normal;
        margin-right: 2em;
    }
}

header {

    @media #{$information-phone} {
        width: 100%;
        color: $color-text-normal;
    }

    @media #{$information-comp} {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25%;
        max-width: 16em;
        margin-right: 2em;
    }
    background-color: $color-main-normal;
    padding: 0;
    text-align: center;

    h1 {
        font-family: $font-header;
        font-size: xx-large;
        color: $color-text-normal;
        background-color: $color-main-dark;
        padding-top: 1em;
        padding-bottom: 1em;
        min-height: 5%;
        max-height: 13%;
    }

    p {

        @media #{$information-phone} {
            padding-bottom: 1em;
        }

        @media #{$information-comp} {
            padding-bottom: 2em;
            padding-right: 25%;
            padding-left: 25%;
        }

        font-family: $font-body;
        color: $color-text-alt;
        background-color: $color-main-dark;
        text-align: center;
    }

    hr {
        padding: 0;
        margin: 0;
        style: none;
        color: $color-divider;
    }

    nav {
        @media #{$information-phone} {
            padding: 0.5em; 
        }
        @media #{$information-comp} {
            margin-top: 1em;        
        }
        font-size: large;
        li {
            @media #{$information-phone} {
                display: inline;
                padding: 1em;
                line-height: 1.5em;
            }
            @media #{$information-comp} {
                padding: 1em;
                letter-spacing: 0.5em;
                margin-bottom: 2em;
            }
        }
        li:hover {
            color: $color-accent;
        }
    }
}

// ACTUAL CONTENT
.content {

    @media #{$information-phone} {
        max-width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    @media #{$information-comp} {
        width: 60%;
        min-width: 20em;
        margin-left: 25%;
        margin-right: 15%;
        padding: 2em;
    }

    background-color: $color-bg;

    h1,h2,h3,h4,h5 {

// padding-left: 0.5em; // letter-spacing: 0.5em;

        color: $color-text-normal;
        font-family: $font-header;
        padding-top: 2em;
        padding-bottom: 1em;
        text-align: center;
    }
    h1 {
        @media #{$information-phone} {
            font-size: 10vw;
        }
        @media #{$information-comp} {
            font-size: xx-large;
        }
    }
    h2 {
        @media #{$information-phone} {
            font-size: 8vw;
        }
        @media #{$information-comp} {
            font-size: x-large;
        }

    }
    h3 {
        @media #{$information-phone} {
            font-size: 7vw;
        }
        @media #{$information-comp} {
            font-size: large;
        }
    }
    h4 {
        @media #{$information-phone} {
            font-size: 6vw;
        }
        @media #{$information-comp} {
            font-size: normal;
        }
    }
    h5 {
        @media #{$information-phone} {
            font-size: 5vw;
        }
        @media #{$information-comp} {
            font-size: small;
        }
    }
    hr {
        margin-top: 2em;
        margin-bottom: 2em;
        border: 0; 
        height: 1px; 
        background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
        width: 40%;
    }
    a {
        text-decoration-line: underline;
    }

    p {
        @media #{$information-phone} {
            margin-top: 1em;
            margin-bottom: 1em;
        }
        @media #{$information-comp} {
        margin: 1em;
        }
        width: 100%;
        max-width: 80em;
    }
    code {
        background-color: $color-bg;
    }

    ul,ol {
        text-align: left;
        margin-left: 10%;
        margin-right: auto;
    }

    ul {
        list-style: circle outside;
    }

    ol {
        list-style: upper-roman outside;
    }

    table {
        @media #{$information-phone} {
            padding: 0;
            max-width: 98vw;
            margin-left: auto;
            margin-right: auto;
            left: -8;
            font-size: 4vw;

        }

        @media #{$information-comp} {
            margin-left: auto;
            margin-right: auto;             
        }
        text-align: center;
        border: 1px solid $color-accent;
        border-collapse: collapse;

        th {
            padding: 1em;
            font-size: large;
            background-color: $color-divider;
            border: 1px solid $color-accent;
        }

        td {
            padding: 0.75em;
            border: 1px solid $color-accent;
        }

        tr:nth-child(even) {
            background-color: $color-divider;
        }
    }

    blockquote {
        margin: auto; 
        width: 60%;
        background-color: $color-divider;
        border: 1px solid $color-accent;
        padding: 1em;
        font-size: small;

        cite {
            font-style: italic;
        }
    }

    footer {
        padding-top: 2em; 
        text-align: center;
        span {
            color: $color-text-normal;
            font-size: x-small;
            text-align: right;

        }
    }
    em {
        font-style: italic;
    }
    strong {
        font-style: bold;
    }
    pre {
        @media #{$information-phone} {
            font-size: 3.5vw;       
        }
        margin: 1em;
        text-align: center;
    }
    .synopsis {

        @media #{$information-phone} {
            padding: 0;
            width: 98vw;
            margin-left: -4vw;
            margin-right: 1vw;
        }

        @media #{$information-comp} {
            padding: 1em;
            width: 65%;
            margin: auto;
        }
        text-align: center;
        font-size: small;
        font-style: italic;
        border: 1px solid $color-accent;
        background-color: $color-divider;
    }
}

}

@import “syntax”;