.rounded {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}


* {
    /* border: none;*/
}

body {
}

.loginform {
    margin: 8rem auto;
    background-color: #556677;
    width: 30rem;
    text-align: center;
    padding: 3rem;
    .rounded;
}

    .loginform > div {
        display: inline-block;
        color: #f4f4f4;
        font-weight: 400;
        margin-bottom: 20px;
        font-size: 2.2rem;
    }

.logininput {
    border: none;
    background: rgba(255, 255, 255, .99);
    color: #556677;
    display: block;
    width: calc(30rem - 6rem);
    height: 4rem;
    margin-bottom: 1.5rem;
    .rounded;
    .trans;
    outline: none;
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
}

    .logininput:focus {
        background: rgba(255, 255, 255, .95);
        .trans;
    }

::-webkit-input-placeholder {
    color: rgba(200,200,200, 0.6);
}

.loginbutton {
    border: none;
    position: relative;
    display: inline-block;
    height: 4rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    width: calc(30rem - 6rem);
    .rounded;
    .trans;
    font-size: 1.8rem;
    background-color: dodgerblue;
    color: #f4f4f4;
    cursor: pointer;
}

    .loginbutton:active {
        top: 1px;
        box-shadow: none;
    }