@media screen and (width < 1100px){
    .main-container > *{
        width: 80%;
    }

    .score{
        border-radius: 0.5rem;
    }

    .footer{
        justify-content: center;
    }

    .step-2{
        flex-wrap: wrap;

        .result{
            width: 100% !important;
            order: 3;
        }
        .user{
            order: 1;
        }
        .machine{
            order: 2;
        }
    
        .user, .machine{
            width: 50%;
        }
    }
}


@media screen and (width < 500px){
    body{
        overflow: hidden;
    }
    .main-container > *{
        width: 90%;
    }

    .option{
        width: 80px;
        height: 80px;

        img{
            width: 40px;
            height: 40px;
        }
    }

    #userOp, #machineOp{
        width: 100px;
        height: 100px;

        img{
            width: 50px;
            height: 50px;
        }
    }

    .mega-shadow{
        .s-1, .s-2, .s-3{
            top: 66%;
        }

        .s-1{
            width: 230px;
            height: 230px;
        }

        .s-2{
            width: 320px;
            height: 320px;
        }

        .s-3{
            width: 410px;
            height: 410px;
        }
    }

    .rule-modal{
        header{
            justify-content: center !important;

            .title{
                font-size: 40px;
            }
        }

        .content{
            width: 100% !important;
            height: 100% !important;

            .img-rules{
                width: 300px !important;
                height: 280px !important;
            }
        }
    }
}