CSS responsive bug

Question

I want to make it responsive but it does not work

It's a login page written in php

.

When I use the editor in the browser to check it it just looks like this : not able to see the start of the 2 inputs and the button properly

.

I want to have the responsive design by showing only the form, meaning the 2 inputs, the login button and the text below them. Not sliding to side or anything. Just the form with the white background and the background behind showing a bit.

My css code is the following:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    /* make the body full height*/
    height: 80vh;
    /* set our custom font */
    font-family: 'Roboto',
        sans-serif;
    /* create a linear gradient*/
   /* background-image: linear-gradient(to right, var(--body_gradient_left), var(--body_gradient_right)); 
    background-image:background: linear-gradient(to bottom, #009999 0%, #ccffff 100%); */
    background:  url("../images/index4.png") no-repeat fixed center;
    /*background-image : url("images/delta2.jpg");
    background-repeat: no-repeat;
     background-position: center;  */
   
    background-size : cover; 
    /*opacity : 0.7; */
    display: flex; 
}

This is for the whole body and the code for the form is the following :

#form_wrapper {
    width: 600px;
    height: 400px;
    /* this will help us center it
    margin: auto;*/
    
    margin-left :auto;
    margin-right :auto;
    margin-top: 300px;
    background-color: var(--form_bg);
    border-radius: 50px;
    /* make it a grid container*/
    display: grid;
    /* with two columns of same width*/
    grid-template-columns: 1fr 1fr;
    /* with a small gap in between them*/
    grid-gap: 1vw;
    /* add some padding around */
    padding: 2vh 15px;
    opacity : 0.95;
    
}

#form_left {
    /* center the image */
    display: flex;
    justify-content: center;
    align-items: center;
}

#form_left img {
    position:absolute;
    width: 400px;
    height: 180px;
    z-index:1;
    border-radius: 25px;
    
}

#form_right {
    display: grid;
    /* single column layout */
    grid-template-columns: 1fr;
    /* have some gap in between elements*/
    grid-gap: 5px;
    padding: 10% 5%;
    z-index:2;
}

Finally the media for the responsiveness is :

@media screen and (max-width:768px) {

    /* make the layout  a single column and add some margin to the wrapper */
    #form_wrapper {
        grid-template-columns: 1fr;
        margin-left: 10px;
        margin-right: 10px;
    }
    /* on small screen we don't display the image */
    #form_left {
        display: none;
    }
    
}

I have also the code for the inputs but its a simple flex display and a center alignment with their colors. I tried changing the media like this :

@media (max-width: 576px) {
    #form_wrapper {
      padding: 43px 50px 57px 117px;
    }
}
  
@media (max-width: 480px) {
    #form_wrapper {
      padding: 43px 50px 57px 15px;
    }
}

@media (max-width: 360px) {
    #form_wrapper {
      padding: 43px 50px 57px 15px;
      margin-left: 20px;
      margin-right: 20px;
    }
}

Still it's not working. It doesn't change...