@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

body {
   background-image: linear-gradient(to bottom right, #4b0082, #EEE8AA);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.logbox {
  max-width: 25rem;
    position: relative;
  width: 100%;
  height: 24rem;
  margin: 10rem auto;
  display: flex;
    background: #fff;
  box-shadow: 0rem 1.188rem 2.375rem rgba(0,0,0,0.30), 0rem 0.938rem 0.75rem rgba(0,0,0,0.22);
    border-radius: 0.625rem;
    overflow: hidden;
    text-align: center;
    font-size: 1.25rem;

}

.logbox .login-form {
  width: 25rem;
  height: 100%;
  padding: 3.75rem 2rem 0;
  position: absolute;
    border-radius: 0.625rem;
    top: 0;
    right: 0;
      box-sizing: border-box;
}


.login-form .username {
  margin-top: 5.4rem;
  width: 100%;
  padding: 0.5rem;
    height: 2.5rem;
    border: 0.063rem solid #ccc;
    border-radius: 0.313rem;
  background-color: #d6d6d6;
  resize: vertical;
    font-family: sans-serif;
      box-sizing: border-box;
}

.HAEA {
  font-size: 1rem; 
  font-family: 'lato', sans-serif; 
  display: block;
}

.login-form .password {
  margin-top: 0.625rem;
  width: 100%;
  padding: 0.5rem;
    height: 2.5rem;
    border: 0.063rem solid #ccc;
    border-radius: 0.313rem;
  background-color: #d6d6d6;
  resize: vertical;
    font-family: sans-serif;
      box-sizing: border-box;
}

button {
    margin-top: 0.625rem;
        font-family: sans-serif;
        font-size: 1rem;
        color: white;
    background-color: #3466ef;
    box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
    text-align:center;
    width: 100%;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.313rem;
    box-sizing: border-box;
    border: 0;
}

button:hover {
    box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}


.text {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    cursor: default;
    color: #3B3838;
}

.Title {
    text-align: center;
    float: right;
    width: 100%;
    color: #3B3838;
    font-family: 'Open Sans', sans-serif;
    margin-top: 0.625rem;
    font-size: 1.875rem;
    font-weight: 600;
}

.Support {
    margin-top: 18.438rem;
    position: absolute;
    text-align: center;
    float: left;
    color: #3B3838;
    display: block;
    width: 100%;
    font-size: 0.625rem;
}

h1{
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight:100;
    margin-bottom: -0.625rem;
}

.footer {
  background-color: white;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3.125rem;
  line-height: 3.125rem;
  width: 100%;
  display: block;
    border-top: 0.063rem solid #ccc;
}


/* Mobile View */

@media screen and (max-width: 37.5rem) {

body {
    padding: 0rem 0.5rem; 
}

.logbox {
    flex-direction: column;
    height: fit-content;
    position: relative;
    margin: 20vh auto 0;
}  
    
.Title {
    margin-left: 0;
    font-size: 1.125rem;
}
    
.logbox .login-form {
    width: 100%;
      height: 21.25rem;
    padding: 0.625rem 1.563rem ;
    position: relative;
    margin-top: -5.5rem;
}
    
.login-form .input {
    margin-bottom: 0.625rem;
}

.btn {
    margin-top: 1.25rem;
    padding: 0.625rem;
  }
}