style.css

div{
    margin: 0;
    padding: 0;
}
#container{
    position: relative;
    display: grid;
    /*grid-auto-rows: minmax(100px,auto);*/
    grid-template-columns: repeat(4,1fr);
    max-width: 49%;
    left: 25%;
    top: 100px;
    grid-template-rows: repeat(3,minmax(158px,auto));  


}
#container1{
    position: relative;
    display: grid;
    /*grid-auto-rows: minmax(100px,auto);*/
    grid-template-columns: repeat(4,1fr);
    max-width: 49%;
    top:115%;
    left: 25%;
    grid-template-rows: repeat(3,minmax(158px,auto));  
    animation: up ease-in forwards 1s 1.5s ;
}
@keyframes up{
    100%{    top: -375px;
        ;}
}
#container div{
    padding: 25px;
    background: #7c8589;
    border: white solid 2px;}
    #container1 div{

        border: white solid 2px;
        padding: 25px;
        background:blueviolet;}
        .win{
            position: absolute;
            width: 100%;
            opacity: 0.8;
            display: grid;
            font-size: 100px;
            height: 100%;
            place-items: center;
            background: antiquewhite;
            left: 0;
            top: 0;
        }
        
        @media(max-width:500px){
            #container1{
                max-width: 100%;
                left:0;

}

           #container{
            left: 0%;
            max-width: 100%;

           }
            }