@font-face {
	font-family: "ArgentumSans";
	src: url("../font/ArgentumSans-Regular.ttf");
}
@font-face {
	font-family: "Fontspring";
	src: url("../font/Fontspring-DEMO-aestetico-extraboldit.otf");
}

@font-face {
	font-family: "Comic_Impact";
	src: url("../font/Comic_Impact.ttf");
}

#juego, #gameOver{
    display: none;
}

.pl {
    padding-left: 4rem;
}

:fullscreen{
    zoom: 100%;
    margin: auto !important;
    display: block !important;
}

.btn-screen{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 4rem;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    border-radius: 50%;
    color: #e02e32;
    background-color: #ffffff9e;
    z-index: 101;
}

.btn-screen:hover{
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px #e02e32;
}
body{
    overflow: hidden;
}

.instrucciones{
    object-fit: contain;
    height: 100vh;
}
.fondoJuego {
    background: url("../img/fondo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
}

.fondoInstrucciones{
    background-color: black;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
}
.fondoTiempo{
    background: url('../img/fondoTiempo.png');
    background-size: 55% 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.palo{
   /* display: none;*/
}
.telon {
    position: relative;
    z-index: 100;
}

#score, #tiempo {
    text-align: center;
    font-family: 'Comic_Impact';
    width: 100%;
    display: block;
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    filter: drop-shadow(-4px -4px 0px #fff);
    -webkit-text-stroke: 4px black;
}
.btn-jugar {
    margin-top: -32vh !important;
    margin-left: calc(50% - 150px) !important;
    position: relative;
    font-size: 1.5rem;
    font-weight: 900;
    border-radius: 15px 5px 15px 5px;
    box-shadow: 2px 2px 4px 1px black;
}

.plato img {
    width: 125px;
    position: absolute;
    transition: top 0.5s, height 0.5s, opacity 0.5s;
    z-index: 2;
}
img#plato1, img#palo1 {
    left: 20vw;
}
img#plato2, img#palo2 {
    left: 32vw;
}
img#plato3, img#palo3 {
    left: 44vw;
}
img#plato4, img#palo4 {
    left: 56vw;
}
img#plato5, img#palo5 {
    left: 68vw;
}
.plato{
    cursor: url('https://duramax3.alejolondono.com/img/cursor.png'), move;
    z-index: 5 !important;
}
.clean {
    filter: drop-shadow(0px 0px 10px #ffce00);
}

#cursor{
    width: 120px;
    height: 120px;
    background-color:rgba(250, 128, 114, 0.774);
    background: url('../img/cursor.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    /*border-radius: 50%;*/
    /*border: 2px solid #fa8072;*/
    transform: translate(-50%,-50%);
    z-index: 99;
    opacity: 0.9;
}

@media (max-width: 1180px){
    .plato img{
        max-width: 7%;
    }
    #cursor{
        width: 50px;
        height: 50px;
        display: none;
    }

    .btn-jugar {
        margin-left: calc(50% - 12vw) !important;
    }

    :fullscreen{
        zoom: 100%;
        margin: auto !important;
        display: block !important;
    }

    #score, .labelTiempo, #tiempo{
        font-size: 2.2rem;
        filter: drop-shadow(-2px -2px 0px #fff);
        -webkit-text-stroke: 2px black;
    }

  }