html {
    height: 100%;
}
body {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: rgb(240, 240, 240);
}
li {
    list-style: none;
}
@media screen and (min-width: 1280px) {
    .login-back {
        width: 25%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fade;
        animation-duration: 1s;
    }
    .login-btn {
        width: 25%;
    }
    .back {
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fadeAndSlide;
        animation-duration: 1s;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1280px) {
    .login-back {
        width: 65%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fade;
        animation-duration: 1s;
    }
    .login-btn {
        width: 25%;
    }
    .back {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fadeAndSlide;
        animation-duration: 1s;
    }
}
@media only screen and (min-width: 320px) and (max-width: 600px) {
    .login-back {
        width: 90%;
        position: absolute;
        top: 50%;
        left: 54%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fade;
        animation-duration: 1s;
    }
    .login-back input,
    .back input {
        width: 75%;
    }
    .login-btn {
        width: 50%;
    }
    .back {
        width: 95%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 1px 1px 2px;
        padding: auto;
        animation-name: fadeAndSlide;
        animation-duration: 1s;
    }
}
@media (min-width: 1000px) {
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: "M+ 1p";
    }
    .login-back a:hover,
    .back a:hover {
        text-decoration: none;
    }
}
@media (max-width: 1000px) {
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: "M+ 1p";
    }
    .login-back input,
    .back input {
        width: 75%;
    }
    .login-back a:hover,
    .back a:hover {
        text-decoration: none;
    }
}