*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    height: 100%;
    background-color: #15ceda;
    box-sizing: border-box;
}

canvas {
    width: 100% !important;
    height: 100% !important;
}

body {
    font-family: 'Lalezar';
    margin: 0;
    padding: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #15ceda;
    position: relative;
    width: 100%;
}

#app {
    height: 100%;
    max-height: 100%;
}

canvas:focus {
    outline: none;
}

.main {
    width: 100vw;
    height: 114.28vw;
    /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 87.50vh;
    /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    /* vertical center */
    left: 0;
    right: 0;
    /* horizontal center */
}

.black-bg {
    background: rgba(0, 0, 0, 0.60);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.send-score {
    width: 100%;
    height: 100%;
    z-index: 100;
    position: absolute;
    display: none;
}

.send-score-modal {
    background: url(img/send-score-background.png) no-repeat;
    max-height: 82vh;
    max-width: 78vh;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 20;
}

.top-text {
    text-align: center;
    margin-top: 10vh;
    color: #491d00;
    font-size: 6vh;
}

.cevki-score1 {
    max-width: 27vh;
    float: left;
    max-height: 26vh;
    background: url(img/cevki-score1.png) no-repeat;
    position: absolute;
    top: 21vh;
    left: 11vh;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.cevki-score0 {
    max-width: 27vh;
    float: left;
    max-height: 26vh;
    background: url(img/cevki-score0.png) no-repeat;
    position: absolute;
    top: 21vh;
    left: 11vh;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.user-score {
    max-width: 22vh;
    max-height: 8vh;
    background: url(img/user-score.png) no-repeat;
    position: absolute;
    top: 29vh;
    left: 40vh;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    color: #fff;
    font-size: 5vh;
}

.your-score {
    max-width: 21.6vh;
    max-height: 5vh;
    position: absolute;
    top: 23vh;
    bottom: 0;
    left: 41vh;
    right: 0;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: #491d00;
    font-size: 4vh;
}

.enter-your-name {
    max-width: 100vh;
    max-height: 13vh;
    position: absolute;
    top: 48vh;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: #491d00;
    font-size: 4vh;
}

.enter-your-name-input {
    border-radius: 0.5vh;
    padding: 1vh;
    border: solid 0.2vh #491d00;
    font-size: 2vh;
    font-family: 'Lalezar';
    direction: rtl;
}


/*
.submit-form {
    max-width: 100vh;
    max-height: 5.5vh;
    background: url(img/submit-form.png) no-repeat;
    position: absolute;
    top: 63vh;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    color: #fff;
    font-size: 3.6vh;
    text-shadow: 2px 2px 0 #491d00, -1px -1px 0 #491d00, 1px -1px 0 #491d00, -1px 1px 0 #491d00, 1px 1px 0 #491d00;
}
*/

.submit-form .submit-button {
    max-width: 50vh;
    min-width: 20vh;
    max-height: 8vh;
    background: url(img/submit-form.png) no-repeat;
    position: absolute;
    top: 62vh;
    left: 31vh;
    bottom: 0;
    right: 0;
    padding: 1vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    color: #fff;
    font-size: 4.2vh;
    text-shadow: 2px 2px 0 #491d00, -1px -1px 0 #491d00, 1px -1px 0 #491d00, -1px 1px 0 #491d00, 1px 1px 0 #491d00;
    border: none;
    font-family: 'Lalezar';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.play-again {
    max-width: 28vh;
    min-width: 20vh;
    max-height: 8vh;
    background: url(img/submit-form.png) no-repeat;
    position: absolute;
    top: 62vh;
    left: 27vh;
    bottom: 0;
    right: 0;
    padding: 1vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    color: #fff;
    font-size: 4.2vh;
    text-shadow: 2px 2px 0 #491d00, -1px -1px 0 #491d00, 1px -1px 0 #491d00, -1px 1px 0 #491d00, 1px 1px 0 #491d00;
    border: none;
    font-family: 'Lalezar';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

.score-list {
    max-width: 28vh;
    min-width: 20vh;
    max-height: 8vh;
    background: url(img/submit-form.png) no-repeat;
    position: absolute;
    top: 62vh;
    left: 40vh;
    bottom: 0;
    right: 0;
    padding: 1vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    color: #fff;
    font-size: 4.2vh;
    text-shadow: 2px 2px 0 #491d00, -1px -1px 0 #491d00, 1px -1px 0 #491d00, -1px 1px 0 #491d00, 1px 1px 0 #491d00;
    border: none;
    font-family: 'Lalezar';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

.form-send-before {
    display: none;
}