.login-container{
  display: grid;
  width: 100%;
  height: 100vh;
  place-items: center center;
  grid-template-columns: 1fr;
}

.login-box{
  background-color: rgba(0,0,0,0.3);
  background-image: linear-gradient( 165deg, #FFFA 50%, #CCCA 100%);


  padding: 20px;
  border-radius: 10px;
  box-shadow: inset 1px 1px 1px 1px rgba(255,255,255,0.8), 0 0 20px rgba(0,0,0,0.3);

  font-size: 1.2rem;

  display: grid;

  place-items: center center;
  gap: 10px;
}

.login-box .fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  place-items: center center;
}

.login-box input{
  
  border-radius: 10px;
  padding: 10px;
  font-size: 1.2rem;
  text-align: center;
}

.login-box input[type="submit"]{
  background-color: var(--primary-color);
  color: white;
  width:100%;
  
  border-radius: 10px;
  padding: 10px;
  font-size: 1.2rem;
}



.login-box .error{
  color: var(--danger-color);
  font-size: 1.2rem;
}



@media screen and (max-width: 600px){
  .login-box .fields{
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    gap: 5px;
    place-items: center center;
    }
}