*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}

/* layar kecil */
@media only screen and (max-width: 980px) {

    body{
        height: 100vh;
        background-image: url(../file/ImageSecurity.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        font-size: 8vw;

    }

    .container-login {
        width: 95vw;
        height: none;
        position: absolute;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%,-50%);
        padding: 1vw 1vw;
        border-radius: 1vw;
        background-color: rgba(0,0,0,.7);
        box-shadow: 0vh 0vh 2vh rgba(255,255,255,.3);
        
    }

    .container-login h1{
        text-align: center;
        color: #fafafa;
        margin-bottom: none;
        text-transform: uppercase;
        border-bottom: 0.3vw solid #2979ff;
    }

    .container-login label {
        text-align: left;
        color: #90caf9;
    }

    .container-login input{
        width: calc(100% - 2vw);
        padding: 1vw 1vw;
        margin-bottom: 2vw;
        border: none;
        background-color: transparent;
        border-bottom: 0.2vw solid #2979ff;
        color: #fff;
        font-size: 100%
    }

    .container-login button{
        width: 100%;
        padding: 0.5vw 0.5vw;
        border: none;
        border-radius: 1vw;
        background-color:#2979ff;
        font-size: 100%;
        color: #fafafa;
    }
}

/* layar lebar */
@media only screen and (min-width: 980px) {

    body{
        height: 100vh;
        background-image: url(../file/ImageSecurity.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        font-size: 1.2vw;

    }

    .container-login {
        width: 25vw;
        height: none;
        position: absolute;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%,-50%);
        padding: 1vw 1vw;
        border-radius: 1vw;
        background-color: rgba(0,0,0,.7);
        box-shadow: 0 0 10px rgba(255,255,255,.3);
        
    }

    .container-login h1{
        text-align: center;
        color: #fafafa;
        margin-bottom: 3vw;
        text-transform: uppercase;
        border-bottom: 0.3vw solid #2979ff;
    }

    .container-login label {
        text-align: left;
        color: #90caf9;
    }

    .container-login input{
        width: calc(100% - 2vw);
        padding: 1vw 1vw;
        margin-bottom: 1vw;
        border: none;
        background-color: transparent;
        border-bottom: 0.2vw solid #2979ff;
        color: #fff;
        font-size: 100%
    }

    .container-login button{
        width: 100%;
        padding: 0.5vw 0.5vw;
        border: none;
        border-radius: 0.7vw;
        background-color:#2979ff;
        font-size: 100%;
        color: #fafafa;
    }
}