/*
Theme: saraesimo
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');


@font-face {
    font-family: 'Noteworthy';
    src: url('../assets/fonts/Noteworthy-Light.eot');
    src: url('../assets/fonts/Noteworthy-Light.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/Noteworthy-Light.woff2') format('woff2'),
        url('../assets/fonts/Noteworthy-Light.woff') format('woff'),
        url('../assets/fonts/Noteworthy-Light.ttf') format('truetype'),
        url('../assets/fonts/Noteworthy-Light.svg#Noteworthy-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*
@font-face {
    font-family: 'corsivo';
    src: url('../assets/fonts/VuittonAnglaiseF-Regular.woff2') format('woff2'),
        url('../assets/fonts/VuittonAnglaiseF-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
*/

:root {
    --size-body: 1.4vw;
    --line-body: 1.2em;
    
    --size-big: 2.6vw;
    --line-big: 1.2em;
}


html{
    overflow: auto;
}
body {
font-family: 'Satisfy', cursive;
    font-family: 'Noteworthy';
    font-size: var(--size-body);
    line-height: var(--line-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, select, input, textarea {
    color: #000;
}

a {color: #000; text-decoration: none;}
a:hover {color: #000;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #000; color: #fff; text-shadow: none;}
::selection {background: #000; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #000; color: #000;}

ins {background-color: #fff; color: #000; text-decoration: none;}
mark {background-color: #fff; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

.text-right { text-align: right; }


/*
-------------------------------------------------------------------------------*/


body.home {
    height: 100vh;
}

.home .entry {
    height: 100vh;
    width: 100%;
    background-position: center;
    background-size: cover;
    padding-left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.home .entry .title {
    font-size: 3vw;
    line-height: var(--line-big);
}

.home .entry .content {
    display: flex;
    flex-direction: column;
    margin-top: 4vw;
}
.home .entry .content a {
    border: 1px solid #000;
    border-radius: 10vw;
    padding: 0.2em 2em;
    margin-bottom: 1em;
    text-align: center;
}


/* GAME
--------------------------------------------------*/
.game h2 {
    font-size: 2.5vw;
    line-height: 1.2em;
}
.game h3 {
    font-size: 1.5vw;
}
.game .entry {
    padding: 2vw 20%;
        background-position: center;
    background-attachment: fixed;
    background-size: auto 100%;
}
.game .entry form#upload-form {
    display: flex;
    flex-direction: column;
}
.game .entry form#upload-form label {
    margin-top: 1.5em;
    margin-bottom: 5px;
    font-size: 1.5em;
    line-height: 1.4em;
}
.game .entry button {
    border: 2px solid #000000;
    background-color: #fff;
    border-radius: 2vw;
    font-family: 'Noteworthy';
    font-size: 2vw;
    margin-top: 1em;
    padding: 5px;
}

.game .entry div#message {
    margin-top: 2em;
}
.game .entry div#message img {
    display: block;
    margin-bottom: 20px;
}

.game hr {
    margin: 2em 0;
}
.game .cta-gallery {
    border: 2px solid #fff;
    background-color: #ad5d3b;
    border-radius: 2vw;
    font-family: 'Noteworthy';
    font-size: 2vw;
    margin-top: 1em;
    padding: 15px;
    color: #fff;
    text-align: center;
}


/* GALLERY
--------------------------------------------------*/
.gallery .gallery-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 10px;
}
.gallery .gallery-wrapper .image-wrapper {
    width: 20%;
    padding: 10px;
}


/* APP
--------------------------------------------------*/
.app .container {
    min-height: 100vh;
    padding: 20px;
    text-align: center;
}


@media screen and (max-width: 960px) {
    
    :root {
        --size-body: 6vw;
        --line-body: 1.2em;

        --size-big: 8vw;
        --line-big: 1.2em;
    }

    
    body.home {
        overflow: hidden;
    }
    
    .home {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }
    .home .entry {
        justify-content: flex-start;
        padding: 15vw;
        background-position: -65vw center;
    }

    .home .entry .title {
        font-size: 10vw;
    }
    
    .home .entry .content {
        display: flex;
        flex-direction: column;
        margin-top: 4vw;
        position: fixed;
        bottom: 0;
        padding-bottom: 10vw;
    }
    .home .entry .content a {
        padding: 0.2em 2em;
        margin-top: 20px;
        margin-bottom: 0;
    }

    
    /**********************************/
    .game .entry {
        padding: 20px;
    }
    .game h2 {
        font-size: 8vw;
    }
    .game h3 {
        font-size: 4.5vw;
    }
    
    
    .game .entry button {
        border: 2px solid #000000;
        background-color: #fff;
        border-radius: 6vw;
        font-family: 'Satisfy';
        font-size: 7vw;
        margin-top: 1em;
        padding: 5px;
        color: #000;
    }
    
    .game .entry div#message {
        padding: 0;
    }
    
    
    .game .cta-gallery {
        border-radius: 15vw;
        font-size: 7vw;
        margin-bottom: 20vw;
    }
    
    
    
    /* GALLERY
    --------------------------------------------------*/
    .gallery .gallery-wrapper {
        
    }
    .gallery .gallery-wrapper .image-wrapper {
        width: 50%;
    }
    .gallery .gallery-wrapper .image-wrapper img {
        display: block;
    }
    
    


}