/**
 *
 * @description Styles
 *
 * @author C. M. de Picciotto <cmdepicciotto@gmail.com>
 *
 */

/**
 *
 * @note Add font
 *
 */
@font-face {
    font-family : 'Courier Prime';
    font-style  : normal;
    font-weight : normal;
    font-display: swap;
    src         : url('../fonts/courier_prime_regular.woff2') format('woff2'), url('../fonts/courier_prime_regular.woff') format('woff'), url('../fonts/courier_prime_regular.ttf') format('ttf');
}
@font-face {
    font-family : 'Courier Prime';
    font-style  : normal;
    font-weight : bold;
    font-display: swap;
    src         : url('../fonts/courier_prime_bold.woff2') format('woff2'), url('../fonts/courier_prime_bold.woff') format('woff'), url('../fonts/courier_prime_bold.ttf') format('ttf');
}

/**
 *
 * @note General styles
 * @note Set full size page
 * @note Remove margins and paddings
 * @note Add custom font
 *
 */
* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
}
body {
    height     : 100vh;
    width      : 100vw;
    color      : #fff;
    font-family: 'Courier Prime', monospace;
}

/**
 *
 * @note Header
 *
 */
.header {
    width          : 100%;
    height         : 10%;
    padding        : 2%;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    border-bottom  : 1px solid #fff;
}
.header .title {
    width      : 50%;
    font-size  : 1.1em;
    font-weight: bold;
}
.header .menu {
    width          : 50%;
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
}
.header .menu .menu-item {
    text-decoration: none;
    font-size      : .8em;
    color          : #fff;
    margin         : 0 4%;
}

/**
 *
 * @note Content
 * @note Move canvas to center
 * @note Add canvas border effect
 * @note Add shoot button to take photo from webcam
 *
 */
.content {
    width          : 100%;
    height         : 90%;
    padding        : 0 2%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}
.content canvas {
    transition  : border-color 1s ease;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
}
.content canvas:hover {
    border-color: #fff;
}
.content .shoot {
    padding         : 1%;
    margin          : 1% 0 0 0;
    background-color: #000;
    color           : #fff;
    border          : 1px solid #fff;
    cursor          : pointer;
    text-transform  : uppercase;
    font-size       : 1em;
    font-family     : 'Courier Prime', monospace;
}

/**
 *
 * @note Set media queries
 * @note Max width: 700px
 *
 */
@media only screen and (max-width: 700px) {
    /**
     *
     * @note General styles
     * @note Update font size
     *
     */
    body {
        font-size: .8em;
    }
}

/**
 *
 * @note Set media queries
 * @note Max width: 400px
 *
 */
@media only screen and (max-width: 400px) {
    /**
     *
     * @note General styles
     * @note Update font size
     *
     */
    body {
        font-size: .6em;
    }

    /**
     *
     * @note Set canvas full size
     * @note All images have 400px width or more, so for smaller devices the images will adapt to their width
     *
     */
    .content canvas {
        width: 100%;
    }
}

/**
 *
 * @note Set media queries
 * @note Max width: 200px
 *
 */
@media only screen and (max-width: 250px) {
    /**
     *
     * @note General styles
     * @note Update font size
     *
     */
    body {
        font-size: .4em;
    }
}