/*computador*/
@media   (max-width: 1920px) and (max-height: 1080px ){
    body{
        display: flex;
        justify-content: center;
    }
    .firstPage{
        display: flex;
        background-image: url("imagenes/fondoo.png") ;
        height: 100vh;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
    }
    .celebracion {
        width: 35%;
        height: 50%;
        position: fixed;
        top: 50%; 
        left: 43%;
        margin-top: -150px;
        margin-left: -170px;
        box-shadow: 0px 10px 70px #FFEC5E;
        border-radius: 5%;
    }
    .burns {
        bottom: -580px;
        width: 20%;
        position: relative;
        border-radius: 10%;
    }
    .puerco {
        width: 20%;
        position: relative;
        bottom: -580px;
    }
}
/*ipad pro*/
@media   (max-width: 1024px) and (max-height: 1366px ){
    body{
        display: flex;
        justify-content: center;
    }
    .firstPage{
        display: flex;
        background-image: url("imagenes/fondoo.png") ;
        height: 100vh;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
    }
    .title1 {
        width: 100%;
        align-items: center;
    }
    .instructions {
        height: 70%;
    }
    p {
        font-size: 2rem ;
    }
    .gif{
        width: 30%;
        height: 40%;
        bottom: -40px;
    }
    :root {
        --w: calc(45vw /2);/*ancho */
        --h: calc(45vh /4);/*alto */
    }
    .celebracion {
        width: 60%;
        height: 40%;
        margin-left: -240px;
    }
    .puerco {
        width: 50%;
        position: absolute;
        bottom: 75px;
        margin-left: -260px;
        background-color: rgb(168, 10, 155);
        border-radius: 5%;
    }
    nav{
        display: flex;
        justify-content: center;
    } 
    .cronometro {
        margin-top: -100px;
        font-size: 40px;
    }
    .tv {
        margin-top: -95px;
        width: 200px;
    }
    .burns {
        width: 50%;
        position: absolute;
        bottom: 75px;
        margin-left: -260px;
        border-radius: 5%;
    }
    .p1 {
        font-size: 1.5rem;
        margin-left: 30px;
    }
}
/*iphone x*/
@media   (max-width: 375px) and (max-height: 812px ) {
    body{
        display: flex;
        justify-content: center;
    }
    .firstPage{
        display: flex;
        background-image: url("imagenes/fondoo.png") ;
        height: 100vh;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
    }
    .title1 {
        width: 100%;
        align-items: center;
    }
    .instructions {
        height: 80%;
    }
    p {
        font-size:100%;
    }
    .gif{
        width: 50%;
        height: 35%;
        bottom: -30px;
    }
    .celebracion{
        width: 70%;
        top: 50%; 
        left: 60%;
        margin-top: -50px;
        margin-left: -170px;
    }
    .finalMsn1 {
        font-size: 20px;
        width: 35%;
        height: 50%;
        position: fixed;
        left: 29%;
        top: 35%;
    }
    .puerco {
        margin-left: -95px;
        bottom: 55px;
    }
    .finalMsn2 {
        font-size: 20px;
        width: 35%;
        height: 50%;
        position: fixed;
        left: 29%;
        top: 35%;
    }
    .burns {
        margin-left: -95px;
        bottom: 55px;
    }
    .cronometro {
        margin-top: -100px;
        font-size: 26px;
    }
    .tv {
        margin-top: -3px;
        width: 120px;
    }
    .cara-superior {
        background-image: url('imagenes/dona-responsive.png');
        background-size: cover;
        background-color: #FFEC5E;
    }
    .p1 {
        font-size: 0.8rem;
        margin-left: 30px;
    }
}
/*galaxy*/
@media   (max-width: 360px) and (max-height: 640px ){
    body{
        display: flex;
        justify-content: center;
    }
    .firstPage{
        display: flex;
        background-image: url("imagenes/fondoo.png") ;
        height: 100vh;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        align-items: center;
    }
    .title1 {
        width: 100%;
        align-items: center;
    }
    .instructions {
        height: 80%;
    }
    p {
        font-size:100%;
    }
    .gif{
        width: 50%;
        height: 35%;
        bottom: -30px;
    }
    .finalMsn1 {
        left: 27%;
        top: 30%;
    }
    .puerco {
        margin-left: -95px;
        bottom:45px;
    }
    .finalMsn2 {
        left: 27%;
        top: 30%;
    }
    .burns {
        margin-left: -95px;
        bottom:45px; 
    }
    .cronometro {
        margin-top: -20px;
        font-size: 21px;
    }
    .tv {
        margin-top: -10px;
        width: 100px;
    }  
    .cara-superior {
        background-image: url('imagenes/dona-responsive2.png');
        background-size: cover;
        background-color: #FFEC5E;
    }
    .p1 {
        font-size: 0.8rem;
        margin-left: 30px;
    }
    .audioIntro {
        width: 50px;
    }
}