@font-face {
    font-family:Josefin Slab;font-style:normal;font-weight:400;src:url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.eot');src:local("Josefin Slab Regular"),local("JosefinSlab-Regular"),url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.eot#iefix') format("embedded-opentype"),url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.woff2') format("woff2"),url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.woff') format("woff"),url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.ttf') format("truetype"),url('https://happymo.re/resources/fonts/josefin-slab-v13/josefin-slab-v13-latin-regular.svg#JosefinSlab') format("svg")
    }
    #game * {
    font-family:Josefin Slab
}
body {
    margin:0
}
#game,body,html {
    overflow:hidden;width:100%;height:100%
}
#game {
    position:fixed;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-size:cover;max-width:530px;max-height:740px;margin:0;background-image:url('../img/table-bg.png')
}
#main #drop-zone:after,#main #models #search #searched-model,.finished .plate {
    background-image:url('../img/plate.svg')
}
.start {
    display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center
}
.start h1 {
    font-size:4rem;color:#fff;padding-bottom:1.5rem
}
@media screen and (max-width:512px) {
    .start h1 {
    font-size:2rem;margin-top:-2rem
}

}
.start img {
    width:75%
}
.start .button {
    margin-top:1.5rem
}
.start .overlay {
    top:0;right:0;left:0;bottom:0;background-color:#af3428;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center
}
.start .overlay,.start .overlay .explanation {
    position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center
}
.start .overlay .explanation {
    -ms-flex-pack:distribute;justify-content:space-around;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#fff;border-radius:.25rem;max-width:512px;padding:1.5rem
}
.start .overlay .explanation h2 {
    margin-bottom:0
}
.start .overlay .explanation p {
    margin-top:0;margin-bottom:0;padding:2rem;line-height:1.75rem;font-size:1.25rem
}
.start .overlay .explanation .button {
    margin-top:0;margin-bottom:1rem
}
.button {
    margin:.5rem;background-color:#af3428;padding:2.25rem 1rem;border-radius:.25rem;-webkit-box-shadow:.25rem .25rem .125rem rgba(0,0,0,.3);box-shadow:.25rem .25rem .125rem rgba(0,0,0,.3);display:inline-block
}
.button a.btn {
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;font-size:1.5rem;border:.25rem solid #e2c477;padding:1.25rem 2.25rem;border-radius:.25rem;cursor:pointer
}
.button:hover {
    background-color:#751a11;-webkit-box-shadow:unset;box-shadow:unset
}
@media screen and (max-height:960px) {
    .button {
    margin:1rem;padding:1.5rem .75rem
}
.button a.btn {
    font-size:1rem;padding:1rem 1.75rem
}

}
@media screen and (max-width:959px) {
    .button {
    margin:1rem;padding:1.5rem .75rem
}
.button a.btn {
    font-size:1rem;padding:1rem 1.75rem
}

}
@media screen and (max-width:768px) {
    .button {
    margin:1rem;padding:1.125rem .5rem
}
.button a.btn {
    font-size:1rem;padding:.625rem 1.125rem
}

}
#main #drop-zone {
    position:absolute;left:calc(50% - 4rem);bottom:0;width:8rem;height:8rem;z-index:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center
}
#main #drop-zone:after {
    position:absolute;background-position:top;top:0;width:50vw;content:"";height:40vh;background-repeat:no-repeat;background-size:contain
}
@media screen and (max-width:768px) {
    #main #drop-zone:after {
    top:-5rem
}

}
@media screen and (max-width:512px) {
    #main #drop-zone:after {
    top:.5rem
}

}
#main #models,#main #models .model {
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
#main #models .model {
    cursor:pointer;position:absolute;width:120px;height:120px;z-index:100;-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear
}
@media screen and (max-width:768px) {
    #main #models .model {
    width:120px;height:120px
}

}
@media screen and (max-width:512px) {
    #main #models .model {
    width:120px;height:120px
}

}
@-webkit-keyframes rotate {
    0% {
    -webkit-transform:rotate(0deg);transform:rotate(0deg)
}
to {
    -webkit-transform:rotate(1turn);transform:rotate(1turn)
}

}
@keyframes rotate {
    0% {
    -webkit-transform:rotate(0deg);transform:rotate(0deg)
}
to {
    -webkit-transform:rotate(1turn);transform:rotate(1turn)
}

}
#main #models #search {
    width:100%;height:100%;left:0;right:0;top:0;bottom:0;z-index:150;background-color:#af3428
}
#main #models #search,#main #models #search #searched-model {
    display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute
}
#main #models #search #searched-model {
    -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-position:50%;width:50%;height:50%;top:25%;left:25%;z-index:200
}
#main #models #search #searched-model .model {
    position:relative;left:unset!important;top:unset!important;z-index:250;width:7.5rem;height:7.5rem
}
@media screen and (max-width:512px) {
    #main #models #search #searched-model {
    width:75%;height:75%;left:12.5%;top:12.5%
}
#main #models #search #searched-model .model {
    width:120px;height:120px;
}

}
#counter {
    top:0
}
#counter,#counter #timer {
    position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center
}
#counter #timer {
    width:100%;z-index:200;top:1rem;color:#fff;font-size:3rem;left:-1rem
}
.finished {
    display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column
}
.finished h2 {
    font-size:2rem;color:#fff
}
.finished p {
    color:#fff;font-size:1.25rem;padding:.5rem
}
.finished .plate {
    position:relative;background-repeat:no-repeat;background-position:50%;width:20rem;height:20rem
}
.finished .plate .model {
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:120px;height:120px;
}
@media screen and (max-width:512px) {
    .finished h2 {
    margin-top:-1rem
}
.finished .plate {
    width:12.5rem;height:12.5rem
}
.finished .plate .model {
    width:120px;height:120px;
}

}