body {
    margin: 0;
}

a {
    text-decoration: none;
}

img {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#bg {
    background-color: #19222B;
}

#login_grid {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
}

#login_screen {
    min-height: calc(100vh - 85px);
    display: inline-grid;
}

#login_box {
    width: 350px;
    display: inline-grid;
    justify-self: center;
    margin: 100px 0;
    align-content: start;
}

#login_box > p {
    width: 337px;
    text-align: center;
    color: white;
    font-family: monospace;
    font-size: 21px;
}

.login_row {
  margin-bottom: 20px;
}

.login_input {
  width: 330px;
  border-radius: 5px;
  font-size: 17px;
  background-color: #253443;
  color: white;
  border: 1px solid #268bd2;
  padding: 5px 10px;
}

.login_button {
  width: 350px;
  background-color: #268bd2;
  border: 1px solid #268bd2;
  padding: 5px 10px;
  color: white;
  font-size: 19px;
  border-radius: 5px;
  margin: 5px 0;
  cursor: pointer;
}

#back_btn {
    font-size: 40px;
    color: #268bd2;
    margin: 0;
    cursor: pointer;
    height: 35px;
    line-height: 20px;
    text-align: center;
    font-family: monospace;
}

.port {
    width: 50px !important;
}

.port::-webkit-outer-spin-button,
.port::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.port[type=number] {
  -moz-appearance: textfield;
}

@media only screen and (max-width:400px) {
    #login_screen {
      min-height: calc(100vh - 85px);
    }

    #login_box {
        width: 94%;
        margin: 40px 0;
    }

    .login_input {
      width: 94%;
      padding: 5px 2%;
    }

    .login_button {
      width: 98%;
      padding: 5px 2%;
    }
}