@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: 100vw;
        border-radius: 4vw;
        border: 0.4vw 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: 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: 64vw;
        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 5vw 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(99, 73, 4);
    }
    
    form div label {
        font-family: arial;
        font-size: 4.6vw;
        font-weight: 600;
        margin-left: 0.8vw;
    }

    form .password {
        position: relative;
    }

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

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

    form .password .lihatPassword {
        background-image: url(../gambar/showPassword.png);
    }
    
    button {
        font-size: 4.6vw;
        font-family: arial;
        font-weight: 600;
        color: rgb(102, 102, 102);
        width: 20vw;
        height: 9vw;
        background-color: rgb(219, 219, 219);
        border-radius: 2vw;
        margin-top: 3vw;
        cursor: pointer;
    }
    
    button:hover {
        text-shadow: 0 0 10px rgba(110, 110, 110, 0.803);
    }
    
    .register {
        font-size: 3vw;
        font-weight: 600;
        margin-top: 15vw;
    }

    .register a {
        text-decoration: none;
        color: rgb(0, 0, 255);
    }

    .register a:hover {
        text-shadow: 0 0 6px  rgba(0, 64, 255, 0.7);
    }
    
    .pesan {
        font-size: 3vw;
        text-align: center;
        color: rgb(255, 0, 0);
        font-style: italic;
        position: absolute;
        right: 0;
        left: 0;
        transform: translateY(-6vw);
        animation: getar .4s;
    }
    
}

@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%);
        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: 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: 22.2vw;
        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 {
        position: relative;
    }

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

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

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

    button {
        font-size: 1.25vw;
        font-family: arial;
        font-weight: 600;
        color: rgb(102, 102, 102);
        width: 6.2vw;
        height: 2.6vw;
        background-color: rgb(219, 219, 219);
        border-radius: 0.6vw;
        margin-top: 1vw;
        cursor: pointer;
    }
    
    button:hover {
        text-shadow: 0 0 10px rgba(110, 110, 110, 0.803);
    }

    .register {
        font-size: 1vw;
        font-weight: 600;
        margin-top: 5.6vw;
    }

    .register a {
        text-decoration: none;
        color: rgb(0, 0, 255);
    }

    .register a:hover {
        text-shadow: 0 0 6px  rgba(0, 64, 255, 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(-6vw);
    }
    25% {
        transform: translate(-6px, -6vw); 
    }
    50%{
        transform: translate(6px, -6vw); 
    }
    75% {
        transform: translate(-5px, -6vw); 
    }
    100% {
        transform: translate(5px, -6vw); 
    }
}