@font-face {
    font-family: "Trebuchet MS";
    src: url(../fonts/trebuchet_ms.ttf) format('truetype');
    font-weight : normal;
    font-style : normal;
}
html{
    height: 100%;
}
body {
    color : white;
    margin: 0;
    padding: 0;
    background-color: #16a085;
    display : flex;
    justify-content: center;
    font-family: "Trebuchet MS", serif;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
#smartphone-controls-player1{
    position: fixed;
    bottom: 1%;
    left: 1%;
}
#smartphone-controls-player2{
    position: fixed;
    bottom: 1%;
    right: 1%;
}
.arrow-up, .arrow-down{
    width: 80px;
    height: 80px;
    background-color: rgba(10, 51, 57, 0.3);
    border-radius: 10px;
    margin: 5px;
    position: relative;
}
.arrow-up::after, .arrow-up::before, .arrow-down::after, .arrow-down::before{
    width: 60%;
    height: 10%;
    content : "";
    background-color: #ecf0f1;
    position: absolute;
    border-radius: 20px;
}
.arrow-up::after{
    top: 50%;
    left: 50%;
    transform: translate(-80%, -50%) rotate(-45deg);
}
.arrow-up::before{
    top: 50%;
    right: 50%;
    transform: translate(80%, -50%) rotate(45deg);
}
.arrow-down::after{
    top: 50%;
    left: 50%;
    transform: translate(-80%, -50%) rotate(45deg);
}
.arrow-down::before{
    top: 50%;
    right: 50%;
    transform: translate(80%, -50%) rotate(-45deg);
}
#canvasGame{
    margin:0;
    background-color: white;
    position: relative;
}
#launcher{
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    color : black;
    z-index: 10;
}
#span1{
    color : #27ae60;
}
#span2{
    color: #2980b9;
}
#span3{
    color: #c0392b;
}
#launcher span{
    font-size: 0;
}
@keyframes animationBegin {
    100% { display : block; font-size : 200px }
}
#winner{
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 100px;
    color : black;
    text-align: center;
}
.button-green{
    background-color: #27ae60;
}
.button-orange{
    background-color: #e67e22;
}
.button-red{
    background-color: #c0392b;
}
.button-blue{
    background-color: #2980b9;
}
#black-container{
    color: white;
    z-index : 11;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top : 0;
    bottom : 0;
    left : 0;
    right : 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#black-container button{
    font-size: 25pt;
    padding: 15px 25px;
    color : white;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    margin: 10px 15px;
    transition: 0.1s;
    outline: none;
}
#start, #replay{
    transform-origin: 0 top;
    font-size: 25pt;
    padding: 15px 25px;
    color : white;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.1s;
    outline: none;
}
#black-container button:hover{
    transform: scale(1.1);
}
#start:hover, #replay:hover{
    transform: scale(1.1) translate(-50%, -50%);
}
#start, #replay{
    z-index: 11;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
}
#black-container-sub{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#end-game-text{
    text-align: center;
    font-size: 80pt;
}
#end-game-container{
    text-align: center;
}
@keyframes opacityHide{
    0% {
        opacity : 1;
    }
    100% {
        opacity : 0;
    }
}
@keyframes opacityShow{
    0% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}
.display-flex{
    display: flex;
}
.display-none{
    display: none;
}