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

html {
	height: 100%;
	background-color: #1d292c;
	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: #1d292c;
	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: 87vh;
    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: 12vh;
    color: #000000;
    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: 14vh;
    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: 14vh;
    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: 45vh;
    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: 45vh;
    right: 0;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: #000000;
    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: #000000;
    font-size: 4vh;
}
.enter-your-name-input {
	border-radius: 0.5vh;
    padding: 1vh;
    border: solid 0.2vh #000000;
    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: 34vh;
    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: 57vh;
    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;
    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: 57vh;
    left: 44vh;
    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;
}