*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: helvetica, sans-serif;
}
body{
    background-color:#360087;

}
#content{
    width:100%;
    height:70vh;
    text-align:center;
}
#login{
    transition: .2s ease-in-out;
    height: 40vh;
    width:40%;
    margin-left:30%;
    margin-right:30%;
    background-color:#fff;
    padding-top:3%;
    margin-top:12%;
    border-radius: 5px;
    box-shadow: 5px 5px 0px #2c006e;
    min-height:350px;
}
#login input,#login button{
    margin-left:25%;
    display:block;
}
.i{
    background-color:rgb(231, 231, 231);
    border: 1px solid rgb(231, 231, 231);
    padding-left:1%;
    width: 50%;
    margin-right:25%;
    height:35px;
    transition: .2s ease-in-out;
    margin-top: 2%;
    color:rgb(32, 32, 32);
}
.i:focus{
    box-shadow: 2px 2px rgba(92, 92, 92, 0.2);
}
.i,#submit{
    border-radius: 2px;
}
#submit{
    margin-top:2%;
    float:left;
    width:15%;
    height:32px;
    background-color:rgb(78, 62, 223);
    border:0;
    color:#fff;
    font-weight: bold;
    transition: .3s ease-in-out;
}
#submit:hover{
    cursor:pointer;
    width:20%;
}
#login h2{
    transition: .2s ease-in-out;
    margin-top:2%;
    font-size:25pt;
    border-left: 4px solid rgb(78, 62, 223);
    padding-left:1%;
    color:rgb(78, 62, 223);
    text-align: left;
    display: block;
    margin-left:25%;
}

@media only screen and (min-height: 500px) {
    #login {
      height:40vh;
      margin-top:13%;
    }
}
@media only screen and (max-height: 500px) {
    #login {
      height:30vh;
      margin-top:8%;
    }
}
@media only screen and (max-width: 1300px) {
    #login {
        width:60%;
        margin-left:20%;
        margin-right:20%;
    }
    #login h2{
        margin-top:5%;
    }
    #submit{
        width:20%;
    }
    #submit:hover{
        width:55%;
    }
}
@media only screen and (max-width: 1000px) {
    #login h2{
        margin-top:5%;
    }
    #submit{
        width:30%;
    }
    #submit:hover{
        width:35%;
    }
    .i{
        width: 70%;
        margin-right:15%;
        margin-left:15%;
    }
    #login h2, #login #submit, #login .i{margin-left:15%;}
    
}

@media only screen and (max-width: 700px) and (min-height: 400px) {
    #login h2{
        margin-top:20%;
    }
    #login h2{
        margin-bottom:5%;
    }
}