/* Main Font */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf");
}

/* root */
:root {
  --main-margin-bottom: 12px;
  --main-font: "Roboto";
  --main-color: #fbf5f5;
  --second-color: #363636;
  --padding: 5px;
  --padding-panel: 14px;
  --border-radius: 5px;
  --padding-panel-right: 8px;
}

/* Reset Style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  line-height: 1.8;
}

/* body style */
body {
  font-family: "Roboto";
}

/* Start Form Input */

.login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: center/cover no-repeat url("../imgs/login-img.jpg");
}

.form {
  backdrop-filter: blur(5px);
  width: 400px;
  max-height: 250px;
  padding: 13px;
  border-radius: var(--border-radius);
  box-shadow: 3px 3px 20px #2748b5;
}

/* Title Form */
.text-login {
  text-align: center;
  color: var(--main-color);
  margin-bottom: var(--main-margin-bottom);
}

/* Input Form */
.username,
.password,
.btn {
  display: flex;
  justify-content: center;
}

.input-username,
.input-password {
  font-family: var(--main-font);
  margin-bottom: var(--main-margin-bottom);
  background-color: transparent;
  border: 1px solid var(--second-color);
  border-radius: var(--border-radius);
  width: 70%;
  color: var(--main-color);
  font-family: var(--main-font);
  padding-left: 8px;
}

.input-username::placeholder,
.input-password::placeholder {
  color: var(--main-color);
}

/* Button */
.form-btn {
  border: 1px solid var(--second-color);
  border-radius: var(--border-radius);
  padding: var(--padding);
  width: 70%;
  color: var(--main-color);
  background-color: #ad71713f;
  font-family: var(--main-font);
  cursor: pointer;
  margin-bottom: var(--main-margin-bottom);
}

/* Message */
.message {
  display: none;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  font-size: 14px;
}

@media screen and (max-width: 600px){
  .form {
    margin: var(--padding-panel);
  }
}

/* End Login Form */