body{
    display: block;
    background-color: rgb(32, 32, 32);
    color: white;
    margin: 0%;
    font-family: Arial, Helvetica, sans-serif;
}
#text{
    margin-top: 100px;
    width: 90%;
    padding: 5%;
    text-align: center;
    font-size: x-large;
}
#form{
    background-color: rgb(44, 44, 44);
    margin-left: 20%;
    margin-right: 20%;
    width: 50%;
    margin-top: 100px;
    margin-bottom: 100px;
    overflow: hidden;
    padding: 5%;
    border-radius: 10px;
}
#form h6{
    font-size: x-large;
}
#form input{
    overflow: hidden;
    float: left;
    margin-right: 100%;
    margin-bottom: 5%;
}

#form input[type="submit"]{
    background-color: rgb(34, 34, 34);
    color: rgb(255, 255, 255);
    border: 0px;
    font-size: large;
    border-radius: 10px;
    padding: 2%;
}
#form input[type="submit"]:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.text-danger{
    color: red;
    font-size: large;
}
#form input[type="password"], #form input[type="username"]{
    border-radius: 10px;
    padding: 2%;
    border: 0px;
    font-size: medium;
    background-color: rgb(34, 34, 34);
    width: 96%;
    color: rgb(255, 255, 255);
}

@media only screen and (max-width: 600px) {
    #text{
        margin-top: 0%;
    }
    #form p{
        width: 100%;
    }
    #form{
        border-radius: 0px;
        margin-left: 0%;
        margin-right: 0%;
        width: 90%;
        margin-bottom: 0%;
        margin-top: 0%;
    }
    #form input[type="password"]{
        width: 90%;
        padding: 5%;
    }
    #form input[type="submit"]{
        width: 100%;
        padding: 5%;
    }
}