@media (max-width: 700px) {
    #cardTitle {
        background-size: 500px;
    }

    #cardInteraction {
        .interaction {
            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.90);
                margin-bottom: 14px;
                margin-right: 10px;
            }

            #textInsertName {
                margin-top: 0px;
                font-size: 11px;
            }
        }

        .isisImg {
            width: 500px;
            height: 500px;
        }
    }
}

@media (max-width: 600px) {
    #cardTitle {
        background-size: 400px;
    }

    #cardInteraction {
        .interaction {
            margin-top: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.75);
                margin-bottom: 5px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 10px;
                font-size: 10px;
            }
        }

        .isisImg {
            width: 400px;
            height: 400px;
        }
    }
}

@media (max-width: 470px) {
    #card {
        gap: 0px;
    }

    #cardTitle {
        background-size: 300px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            margin-top: 5px;
            margin-right: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.55);
                margin-bottom: -10px;
                margin-right: 10px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -15px;
            }

            #textInsertName {
                margin-top: 20px;
            }
        }

        .isisImg {
            width: 300px;
            height: 300px;
            margin-left: 20px;
        }
    }
}

@media (max-width: 350px) {
    #cardTitle {
        background-size: 250px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            margin-top: -0px;
            margin-right: 15px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.45);
                margin-bottom: -18px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -22px;
            }

            #buttonBack {
                margin-bottom: -5px;
            }

            #textInsertName {
                margin-top: 25px;
            }
        }

        .isisImg {
            width: 250px;
            height: 250px;
            margin-left: 15px;
        }
    }
}

@media (max-width: 285px) {
    #cardTitle {
        background-size: 170px;
    }

    #cardInteraction {
        height: 300px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}



@media (max-height: 850px) {
    #cardTitle {
        background-size: 500px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.90);
                margin-bottom: 14px;
                margin-right: 10px;
            }

            #textInsertName {
                margin-top: 0px;
                font-size: 11px;
            }
        }

        .isisImg {
            width: 500px;
            height: 500px;
        }
    }
}

@media (max-height: 750px) {
    #card {
        gap: 0px;
    }

    #cardTitle {
        background-size: 400px;
    }

    #cardInteraction {
        .interaction {
            margin-top: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.75);
                margin-bottom: 5px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 10px;
                font-size: 10px;
            }
        }

        .isisImg {
            width: 400px;
            height: 400px;
        }
    }
}

@media (max-height: 510px) {
    #cardTitle {
        background-size: 300px;
        height: 150px;
    }

    #cardInteraction {
        height: 300px;

        .interaction {
            margin-top: 5px;
            margin-right: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.55);
                margin-bottom: -10px;
                margin-right: 10px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -15px;
            }

            #textInsertName {
                margin-top: 20px;
            }
        }

        .isisImg {
            width: 300px;
            height: 300px;
            margin-left: 20px;
        }
    }
}

@media (max-height: 385px) {
    #cardTitle {
        background-size: 250px;
        height: 100px;
    }

    #cardInteraction {
        height: 200px;

        .interaction {
            margin-top: -0px;
            margin-right: 15px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.45);
                margin-bottom: -18px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -22px;
            }

            #buttonBack {
                margin-bottom: -5px;
            }

            #textInsertName {
                margin-top: 25px;
            }
        }

        .isisImg {
            width: 250px;
            height: 250px;
            margin-left: 15px;
        }
    }
}

@media (max-height: 315px) {
    #card {
        gap: 20px;
    }

    #cardTitle {
        background-size: 170px;
        height: 60px;
    }

    #cardInteraction {
        height: 130px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-height: 235px) {
    #card {
        gap: 0px;
    }
}


@media (max-width: 470px) and (max-height: 850px) {
    #card {
        gap: 0px;
    }

    #cardTitle {
        background-size: 300px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            margin-top: 5px;
            margin-right: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.55);
                margin-bottom: -10px;
                margin-right: 10px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -15px;
            }

            #textInsertName {
                margin-top: 20px;
            }
        }

        .isisImg {
            width: 300px;
            height: 300px;
            margin-left: 20px;
        }
    }
}

@media (max-width: 470px) and (max-height: 480px) {
    #cardTitle {
        background-size: 250px;
        height: 100px;
    }

    #cardInteraction {
        height: 200px;

        .interaction {
            margin-top: -0px;
            margin-right: 15px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.45);
                margin-bottom: -18px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -22px;
            }

            #buttonBack {
                margin-bottom: -5px;
            }

            #textInsertName {
                margin-top: 25px;
            }
        }

        .isisImg {
            width: 250px;
            height: 250px;
            margin-left: 15px;
        }
    }
}

@media (max-width: 470px) and (max-height: 330px) {
    #card {
        gap: 20px;
    }

    #cardTitle{
        background-size: 170px;
        height: 60px;
    }

    #cardInteraction {
        height: 130px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-width: 470px) and (max-height: 240px) {
       #card {
        gap: 0px;
    }
}

@media (max-width: 285px) and (max-height: 850px) {
    #cardTitle {
        background-size: 170px;
    }

    #cardInteraction {
        height: 300px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-width: 285px) and (max-height: 340px) {
   #card {
        gap: 20px;
    }

    #cardTitle {
        background-size: 170px;
        height: 60px;
    }

    #cardInteraction {
        height: 130px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-width: 285px) and (max-height: 285px) {
   #card {
        gap: 0px;
    }
}



@media (max-height: 850px) and (max-width: 570px) {
    #card {
        gap: 0px;
    }

    #cardTitle {
        background-size: 300px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            margin-top: 5px;
            margin-right: 20px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.55);
                margin-bottom: -10px;
                margin-right: 10px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -15px;
            }

            #textInsertName {
                margin-top: 20px;
            }
        }

        .isisImg {
            width: 300px;
            height: 300px;
            margin-left: 20px;
        }
    }
}

@media (max-height: 850px) and (max-width: 350px) {
       #cardTitle {
        background-size: 250px;
    }

    #cardInteraction {
        height: 400px;

        .interaction {
            margin-top: -0px;
            margin-right: 15px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.45);
                margin-bottom: -18px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -22px;
            }

            #buttonBack {
                margin-bottom: -5px;
            }

            #textInsertName {
                margin-top: 25px;
            }
        }

        .isisImg {
            width: 250px;
            height: 250px;
            margin-left: 15px;
        }
    }
}

@media (max-height: 850px) and (max-width: 285px) {
    #cardTitle {
        background-size: 170px;
    }

    #cardInteraction {
        height: 300px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-height: 385px) and (max-width: 570px) {
     #cardTitle {
        background-size: 250px;
        height: 100px;
    }

    #cardInteraction {
        height: 200px;

        .interaction {
            margin-top: -0px;
            margin-right: 15px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.45);
                margin-bottom: -18px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -22px;
            }

            #buttonBack {
                margin-bottom: -5px;
            }

            #textInsertName {
                margin-top: 25px;
            }
        }

        .isisImg {
            width: 250px;
            height: 250px;
            margin-left: 15px;
        }
    }
}

@media (max-height: 385px) and (max-width: 285px) {
    #cardTitle {
        background-size: 170px;
    }

    #cardInteraction {
        height: 300px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}

@media (max-height: 235px) and (max-width: 570px) {
    #cardTitle {
        background-size: 170px;
        height: 60px; 
    }

    #cardInteraction {
        height: 130px;

        .interaction {
            margin-top: -10px;
            margin-right: 10px;

            button, #buttonPlay, #inputPlayerName, #textInsertName {
                transform: scale(0.30);
                margin-bottom: -30px;
            }

            #buttonPlay, #inputPlayerName {
                margin-bottom: -33px;
            }

            #buttonBack {
                margin-bottom: 0px;
            }

            #textInsertName {
                margin-top: 32px;
            }
        }

        .isisImg {
            width: 170px;
            height: 170px;
            margin-left: 10px;
        }
    }
}