body{
    margin:0;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;}

#field{
    width: 100vw;
    height: 100vh;
    background-color: #222222;
}

#player{
    position: absolute;
    width: 10rem;
    height: 1rem;
    bottom: 1rem;
    background-color: #FF3B30;
    box-shadow: 0 0 1rem #111111;
    z-index: 1;
    border-radius: 1rem;
}

#ball{
    position: absolute;
    width: 1vw;
    height: 1vw;
    background-color: whitesmoke;
    box-shadow: 0 0 1rem #111111;
    border-radius: 100%;
    z-index: 1;
}

.item{
    position: absolute;
    width: 1vw;
    height: 1vw;
    background-image: url("./img/double-01.png");
    background-size: cover;
    box-shadow: 0 0 1rem #111111;
    border-radius: 100%;
    z-index: 1;
}

.block{
    position: absolute;
    background-color: #FF3B30;
    z-index: 1;
    box-shadow: 0 0 1rem #111111;
    border-radius: 0.1vw;
}

#gameOver{
    font-family: Lemon-Milk-Medium;
    color: whitesmoke;
    font-size: min(10vw , 10vh);
    text-align: center;
    width: 100vw;
    height: 50vh;
    position: absolute;
    bottom: 0;
    line-height: 50vh;
    z-index: 998;
}

#win{
    font-family: Lemon-Milk-Medium;
    color: whitesmoke;
    font-size: min(10vw , 10vh);
    text-align: center;
    width: 100vw;
    height: 50vh;
    position: absolute;
    bottom: 0;
    line-height: 50vh;
    z-index: 998;

}

#score{
    font-family: Lemon-Milk-Medium;
    color: whitesmoke;
    font-size: 5rem;
    width: 100vw;
    height: 5rem;
    line-height: 5rem;
    padding-left: 1rem;
    position: absolute;
    bottom: 0;
    z-index: 999;

}

#time{
    font-family: Lemon-Milk-Light;
    color: whitesmoke;
    font-size: 1rem;
    width: 100vw;
    height: 1rem;
    line-height: 1rem;
    padding-left: 1rem;
    position: absolute;
    bottom: 5rem;
    z-index: 999;

}

#submitWindow{
    position: absolute;
    width:  min(80vw , 80vh);
    height:  min(80vw , 80vh);
    left: calc(50vw - min(40vw , 40vh));
    background-color: #333333;
    z-index: 1000;
    box-shadow: 0 0 2rem #111111;
    border-radius: 1rem;
    transition: all ease-in-out 0.5s;
}

.SWShown{
    top:  min(10vw , 10vh);

}
.SWHidden{
    top: -100%;
}


#nameInput{
    font-family: Lemon-Milk-Medium-Italic;
    color: whitesmoke;
    background-color: transparent;
    border: none;
    border-bottom: #FF3B30 0.5rem solid;
    width: 20rem;
    height: 5rem;
    font-size: 4rem;
    line-height: 5rem;
    text-align: center;
    position: absolute;
    bottom: calc(50% - 3.5rem);
    left: calc(50% - 10rem);
}


#submitButton{
    position: absolute;
    bottom: 1rem;
    left: calc(50% - 10rem);
}

#startButton{
    position: absolute;
    bottom: 10vh;
    left: calc(50vw - 10rem);
    z-index: 999;
}

.button{
    font-family: Lemon-Milk-Medium-Italic;
    color: whitesmoke;
    background: linear-gradient(to bottom, #FF3B30 0, #FF3B30 100%) no-repeat;
    border: whitesmoke 0.5rem solid;
    background-size:0;
    background-position: center;
    width: 20rem;
    height: 5rem;
    font-size: 4rem;
    line-height: 5rem;
    text-align: center;
    transition: all ease-in-out 0.2s;
}
.button:hover{
    background-size:20rem;
}

#leaderboard{
    position: absolute;
    width:  min(80vw , 80vh);
    height:  30rem;
    left: calc(50vw - min(40vw , 40vh));
    z-index: 1000;
    top:  min(10vw , 10vh);
    background-color: #11111177;
}

#headline{
    height: 5rem;
    font-family: Lemon-Milk-Medium;
    line-height: min(10vw , 8vh);
    font-size: min(10vw , 8vh);
    color: whitesmoke;
    margin: 0.5rem;
    padding-bottom: 2rem;
}

#scoreRow{
    width: 100%;
    height: 2rem;
}

.odd{
    background-color: #333333;
}

.even{
    background-color: #222222;
}

#label{
    height: 1rem;
    font-family: Lemon-Milk-Medium;
    line-height: 1rem;
    color: whitesmoke;
    display: inline;
    position: absolute;
    top:0.5rem;
}

.left{
    left: 0.5rem;
}

.right{
    right: 0.5rem;
}

.rot{
    transform: rotate3d(1,0,0,90deg);
    -webkit-animation: rot 0.2s forwards ease-in-out;
    animation: rot 0.2s forwards ease-in-out;
}

@keyframes rot {
    from {transform: rotate3d(1,0,0,90deg);}
    to {transform: rotate3d(1,0,0,0deg);}
}

@font-face {
    font-family: Roboto-Regular;
    src: url('./Roboto/Roboto-Regular.ttf');
}

@font-face {
    font-family: Roboto-Bold;
    src: url('./Roboto/Roboto-Bold.ttf');
}

@font-face {
    font-family: Lemon-Milk-Medium;
    src: url('./LemonMilk/LEMONMILK-Medium.otf');
}

@font-face {
    font-family: Lemon-Milk-Medium-Italic;
    src: url('./LemonMilk/LEMONMILK-MediumItalic.otf');
}

@font-face {
    font-family: Lemon-Milk-Light;
    src: url('./LemonMilk/LEMONMILK-Light.otf');
}