@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comic+Sans&display=swap');

body{
    background-color: #E7E6E6;
    color: #000000;
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans';
}

h1{
    font-size: 9vw;
    color: white;
}

h2{
    font-size: 3.25vw;
    color: #212121
}

h3{
    font-size: 26px;
    margin: 0;
}

h4{
    font-size: 1.35vw;
    color: #515151
}

h5{
    font-size: 2.5vw;
    position: relative;
    text-align: bottom;
    color: #515151;
}

h6{
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}

a{
    text-decoration: none;
    color: #2d2d2d;
}

button{
    border: none;
    border-radius: 8px;
    background-color: #fcc2c672;
    opacity: 0.8;
    transition: 0.3s;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 1em 1em;
}

button:hover {
    opacity: 1;
}

p{
    text-align: center;
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

hr{
    border: .5px solid #cacaca;
    text-align: center;
    width: 35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.top{
    display: flex;
}

.logo{
    background-color: #d3d3d3;
    width: 100px;
    height: 15%;
    text-align: center;
    padding: 1em 1em 1em 1em;
}

.navbar{
    background-color: #FFFFFF;
    width: 92%;
    text-align: right;
    padding: .25em .25em .25em .25em;
}

nav ul{
    text-align: right;
}

nav ul li{
    display: inline-block;
    padding: 0em 0em 0em 1em;
}

.homebg{
    position: static;
    width: 100%;
}

.hometext{
    position: absolute;
    display: inline-block;
    text-align: right;
    width: 97%;
    top: 100px;
}

.storiestext{
    position: absolute;
    display: inline-block;
    text-align: center;
    width: 100%;
    z-index: 10;
}

.storiesbg{
    position: static;
    display: inline-block;
    width: 100%;
}

.darken{
    filter:brightness(60%);
}

.centered{
    text-align: center;
    width: 33.33%;
}

.storiesborder{
    background-color: #d8d8d8;
    text-align: center;
    max-width: 33.33%;
}

.center{
    border: .7em solid #d8d8d8;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    max-height: 200px;
    max-width: 310px;
}

img.center{
    height: 200px;
    width: 310px;
}

.centercenter{
    margin: auto;
    border: none;
}

.storyboardimage{
    width: 65%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.aboutbody{
    display: flex;
}

.aboutbody2{
    width: 100%;
    position: relative;
}

hr.aboutbody2{
    border: .5px solid #cacaca;
    text-align: center;
    width: 18%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.aboutbody2 p{
    text-align: center;
    font-size: 1.15vw;
    width: 80%;
    display: block;
}

.aboutleft{
    width: 60%;
    position: relative;
    padding: 1.25em 3em 3em 3em;
}

.aboutleft p{
    text-align: left;
    font-size: 1.15vw;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.aboutright{
    background-color: #d8d8d8;
    width: 40%;
    max-height: 460px;
    position: relative;
    display: float;
    text-align: right;
    padding: 3em 3em 3em 3em;
}

.collage{
}

img.collage{
    width: 100%;
}

.collage h5{
    position: absolute;
    text-align: center;
}

@media all and (max-width:1050px)   {
    img.center{
        height: 150px;
        width: 235px;
    }
    h3{
        font-size: 21px;
        margin: 0;
    }
    button{
        border: none;
        border-radius: 6.5px;
        background-color: #fcc2c672;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        padding: .75em .75em;
    }

    .aboutleft p{
        text-align: left;
        font-size: 1.25vw;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .aboutbody2 p{
        text-align: center;
        font-size: 1.25vw;
        width: 80%;
        display: block;
    }

    .aboutleft{
        width: 60%;
        height: 200%;
        position: relative;
        padding: 1.25em 2em 2em 2em;
    }

    .aboutright{
        background-color: #d8d8d8;
        width: 40%;
        max-height: 350px;
        position: relative;
        display: float;
        text-align: right;
        padding: 2em 2em 2em 2em;
    }
}

@media all and (max-width:820px)   {
    img.center{
        height: 100px;
        width: 155px;
    }
    h3{
        font-size: 14px;
        margin: 0;
    }
    button{
        border: none;
        border-radius: 5px;
        background-color: #fcc2c672;
        text-align: center;
        text-decoration: none;
        font-size: 10px;
        font-weight: bold;
        padding: .75em .75em;
    }
    .aboutleft p{
        text-align: left;
        font-size: 2.25vw;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .aboutbody2 p{
        text-align: center;
        font-size: 2.25vw;
        width: 80%;
        display: block;
    }
    .aboutbody{
        display: inline-block;
        text-align: center;
    }
    .aboutleft{
        width: 94%;
        position: relative;
        padding: 1.25em 1.5em 1.5em 1.5em;
    }
    .aboutright{
        background-color: #d8d8d8;
        width: 94%;
        max-height: 600px;
        position: relative;
        display: float;
        text-align: right;
        padding: 1.5em 1.5em 1.5em 1.5em;
    }
}




/*
THIS IS THE MOBILE 'm' VERSION
IT'S SPECIFICALLY FOR THE TABLES
ON THE STORIES PAGE. AND THE 
ABOUT PAGE. EVERYTHING
ELSE IS RELATIVE AND SCALES
FOR MOBILE DEVICES!!!!!!!!!!!!
*/

@media all and (max-width:580px)   {
    .navbar a{
        font-size: 7px;
        text-decoration: none;
        color: #2d2d2d;
    }

    nav ul li{
        display: block;
        position: right;
        padding: .1em 0em .1em 0em;
    }

    img.center{
        height: 75px;
        width: 118px;
    }

    h3{
        font-size: 13px;
        margin: 0;
    }

    button{
        border: none;
        border-radius: 9px;
        background-color: #fcc2c672;
        text-align: center;
        text-decoration: none;
        font-size: 9px;
        font-weight: bold;
        padding: .5em .5em;
    }

    .aboutleft p{
        text-align: left;
        font-size: 2.75vw;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .aboutbody2 p{
        text-align: center;
        font-size: 2.75vw;
        width: 80%;
        display: block;
    }

    .aboutbody{
        display: inline-block;
        text-align: center;
    }

    .aboutleft{
        width: 94%;
        height: 200%;
        position: relative;
        padding: 1.25em 1em 1em 1em;
    }

    .aboutright{
        background-color: #d8d8d8;
        width: 94%;
        max-height: 500px;
        position: relative;
        display: float;
        text-align: right;
        padding: 1em 1em 1em 1em;
    }

    .navbar{
        background-color: #FFFFFF;
        width: 92%;
        text-align: right;
        padding: 0em 0em 0em 0em;
    }

}