@media screen and (max-width:500px) {
    body {
        background-color: rgb(212, 212, 212);
    }
    
    .container {
        background-color: rgba(55, 223, 49, 0.39);
        width: 92.5vw;
        height: 112vw;
        border-radius: 4vw;
        border: 0.4vw groove rgb(58, 50, 4);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 0 2.2px 4px 1px rgba(0, 0, 0, 0.6);
    }
    
    h1 {
        text-align: center;
        font-family: arial;
        font-size: 9vw;
        line-height: 9.6vw;
        color: transparent;
        background: url(../gambar/background_text.jpeg);
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: cover;
        filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.692));
    }
    
    form {
        text-align: center;
        height: 74vw;
        width: fit-content;
        background-image: linear-gradient(to bottom,rgba(55, 223, 49, 0), rgba(3, 70, 6, 0.39));
        border: 0.4vw groove rgb(105, 91, 11);
        border-top: unset;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin: auto;
        margin-top: -1vw;
        padding-top: 0.3vw;
    }
    
    form div {
        text-align: left;
        margin: 3vw 4vw 7vw 4vw;
    }
    
    form div input {
        font-size: 4.4vw;
        width: 65vw;
        height: 8vw;
        outline: unset;
        border: 0.6vw groove gray;
        border-radius: 2vw;
    }
    
    form div input:focus{
        outline: unset;
        border: 0.6vw groove rgb(18, 112, 9);
    }
    
    form div label {
        font-family: arial;
        font-size: 4.6vw;
        font-weight: 600;
        margin-left: 0.8vw;
    }

    form .password,
    form .password2 {
        position: relative;
    }

    form .lihatSembunyikanPassword1,
    form .lihatSembunyikanPassword2 {
        width: 6.6vw;
        height: 6.6vw;
        position: absolute;
        top: 4vw;
        right: -1vw;
        background-size: contain;
        cursor: pointer;
    }

    form .sembunyikanPassword {
        background-image: url(../gambar/hidePassword.png);
    }

    form .lihatPassword {
        background-image: url(../gambar/showPassword.png);
    }

    button {
        font-size: 4vw;
        font-family: arial;
        font-weight: 600;
        line-height: 2.4vw;
        color: rgb(102, 102, 102);
        width: 24vw;
        height: 10vw;
        background-color: rgb(219, 219, 219);
        border-radius: 0.4vw;
        position: absolute;
        top: 90vw;
        right: 16vw;
        cursor: pointer;
    }
    
    .login {
        font-size: 4vw;
        font-family: arial;
        font-weight: 600;
        text-decoration: none;
        line-height: 9vw;
        color: rgb(102, 102, 102);
        width: 24vw;
        height: 10vw;
        background-color: rgb(219, 219, 219);
        border: 2px outset black;
        border-radius: 0.4vw;
        display: inline-block;
        box-sizing: border-box;
        position: absolute;
        top: 90vw;
        left: 16vw;
        cursor: pointer;
    }

    button:hover,
    .login:hover {
        text-shadow: 0 0 6px  rgba(11, 26, 70, 0.7);
    }
    
    .login:hover {
        text-shadow: 0 0 6px  rgba(11, 26, 70, 0.7);
    }
    
    .pesan {
        font-size: 3.2vw;
        text-align: center;
        color: rgb(255, 0, 0);
        font-style: italic;
        position: absolute;
        right: 0;
        left: 0;
        transform: translateY(-6vw);
        animation: getar .4s;
    }
    
    @keyframes getar{
        0%{
            transform: translateY(-6vw);
        }
        25% {
            transform: translate(-6px, -6vw); 
        }
        50%{
            transform: translate(6px, -6vw); 
        }
        75% {
            transform: translate(-5px, -6vw); 
        }
        100% {
            transform: translate(5px, -6vw); 
        }
    }
}

@media screen and (min-width:500px) {
    body {
        background-color: rgb(212, 212, 212);
    }
    
    .container {
        background-color: rgba(55, 223, 49, 0.39);
        width: 34.5vw;
        height: 34.5vw;
        border-radius: 1.6vw;
        border: 0.2vw groove rgb(58, 50, 4);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        box-shadow: 0 2.2px 4px 1px rgba(0, 0, 0, 0.6);
    }
    
    h1 {
        text-align: center;
        font-family: arial;
        font-size: 3vw;
        line-height: 4vw;
        color: transparent;
        background: url(../gambar/background_text.jpeg);
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: cover;
        filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.692));
    }
    
    form {
        text-align: center;
        height: 23vw;
        width: fit-content;
        background-image: linear-gradient(to bottom,rgba(55, 223, 49, 0), rgba(3, 70, 6, 0.39));
        border: 0.2vw groove rgb(105, 91, 11);
        border-top: unset;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin: auto;
        margin-top: -1vw;
        padding-top: 0.3vw;
    }
    
    form div {
        text-align: left;
        margin: 2vw;
    }
    
    form div input {
        font-size: 1.2vw;
        width: 22vw;
        height: 2.4vw;
        outline: unset;
        border: 0.26vw groove gray;
        border-radius: 0.6vw;
    }
    
    form div input:focus{
        outline: unset;
        border: 0.28vw groove rgb(17, 90, 11);
    }
    
    form div label {
        font-family: arial;
        font-size: 1.2vw;
        font-weight: 600;
        margin-left: 0.4vw;
    }

    form .password,
    form .password2 {
        position: relative;
    }

    form .lihatSembunyikanPassword1,
    form .lihatSembunyikanPassword2 {
        width: 1.8vw;
        height: 1.8vw;
        position: absolute;
        top: .06vw;
        right: -1vw;
        background-size: contain;
        cursor: pointer;
    }

    form .sembunyikanPassword {
        background-image: url(../gambar/hidePassword.png);
    }

    form .lihatPassword {
        background-image: url(../gambar/showPassword.png);     
    }
    
    button {
        font-size: 1.25vw;
        font-family: arial;
        font-weight: 600;
        line-height: 2.4vw;
        color: rgb(102, 102, 102);
        width: 6.2vw;
        height: 2.6vw;
        background-color: rgb(219, 219, 219);
        border-radius: 0.4vw;
        position: absolute;
        top: 29vw;
        right: 9vw;
        cursor: pointer;
    }

    .login {
        font-size: 1.25vw;
        font-family: arial;
        font-weight: 600;
        text-decoration: none;
        line-height: 2.5vw;
        color: rgb(102, 102, 102);
        width: 6.2vw;
        height: 2.62vw;
        background-color: rgb(219, 219, 219);
        border: 2px outset black;
        border-radius: 0.4vw;
        display: inline-block;
        box-sizing: border-box;
        position: absolute;
        top: 29vw;
        left: 9vw;
        cursor: pointer;
    }
    
    button:hover,
    .login:hover {
        text-shadow: 0 0 6px  rgba(11, 26, 70, 0.7);

    
    .pesan {
        font-size: 1vw;
        text-align: center;
        color: rgb(255, 0, 0);
        font-style: italic;
        position: absolute;
        right: 0;
        left: 0;
        transform: translateY(-2vw);
        animation: getar .4s;
    }
    
    @keyframes getar{
        0%{
            transform: translateY(-2vw);
        }
        25% {
            transform: translate(-2px, -2vw); 
        }
        50%{
            transform: translate(2px, -2vw); 
        }
        75% {
            transform: translate(-1px, -2vw); 
        }
        100% {
            transform: translate(1px, -2vw); 
        }
    }
}