/****************************************************************************

    CSS for aboutme page of jasonrboyer.com
    Author: Jason Boyer
    Date: 8/6/2016

****************************************************************************/



/****************************************************************************

    CSS for entire page base css is for mobile

****************************************************************************/



/*

        -antonio  and opan sans regular
        OR
        -antonio and playfair display

*/



html,
body {
    margin: 0%;
    width: 100%;
    height: 100%;
    background-color: #065069;
    color: white;
    font-family: antonio, sans-serif;
}

h1,h2,h3,h4 {
    font-family: antonio, sans-serif;
}

p, .info {
    font-family: playfair, serif;
}

@font-face {
    font-family: antonio;
    src: url('../fonts/Antonio-Regular.ttf');
}

@font-face {
    font-family: playfair;
    src: url('../fonts/PlayfairDisplay-Regular.otf');
}


.spacebelow {
    margin-bottom: 5vh;
}


.info {
    padding: 2%;
}

.picture {
    background-attachment: fixed;
    background-size: 100% 100%;
    width: 100vw;
    height: 60vh;
}

#ee-picture {
    background-image: url("../images/eepicsmall640.jpeg");
}

#se-picture {
    background-image: url("../images/sepicsmall640.jpg");
}

#ip-picture {
    background-image: url("../images/ippicsmall640.jpg");
}

#craft-picture {
    background-image: url("../images/craftpicsmall640.jpeg");
}

#travel-picture {
    background-image: url("../images/travelpicsmall640.jpg");
}



p, .smaller {
    font-size: .5em;
}

h3 {
    font-size:;
}


/****************************************************************************

    Media query for tablets and mid size devices

****************************************************************************/

@media screen and (min-width: 600px) and (max-width: 1400px) {

    #ee-picture {
        background-image: url("../images/eepicmedium1280.jpeg");
    }

    #se-picture {
        background-image: url("../images/sepicmedium1280.jpg");
    }

    #ip-picture {
        background-image: url("../images/ippicmedium1280.jpg");
    }

    #craft-picture {
        background-image: url("../images/craftpicmedium1280.jpeg");
    }

    #travel-picture {
        background-image: url("../images/travelpicmedium1280.jpg");
    }

    .content {
        font-size: 2em;
    }

}





/****************************************************************************

    Media query for large devices

****************************************************************************/

@media screen and (min-width: 1400px) {

    #ee-picture {
        background-image: url("../images/eepiclarge1920.jpeg");
    }

    #se-picture {
        background-image: url("../images/sepiclarge1920.jpg");
    }

    #ip-picture {
        background-image: url("../images/ippiclarge1920.jpg");
    }

    #craft-picture {
        background-image: url("../images/craftpiclarge1920.jpeg");
    }

    #travel-picture {
        background-image: url("../images/travelpiclarge1920.jpg");
    }
    
    .content {
        font-size: 1.5em;
    }

    h2 {
        font-size: 2em;
    }

    p, .smaller {
        font-size: 1em;
    }

}