@charset "UTF-8";
@font-face {
  font-family: f-medium;
  src: url("../fonts/Roboto-Medium.ttf");
}
@font-face {
  font-family: f-light;
  src: url("../fonts/Roboto-Light.ttf");
}
/*
* Mixin padding
* padding in the 4 sides
*
* @param {$padding} - units/rem
*/
/*
* Mixin margin 
* margin in the 4 sides
*
* @param {$margin} - units/rem
*/
/*
*Add margin top and margin bottom
*@param {$margin} - units/rem
*
*/
/**
* @param{$border-radius} - units/rem
*/
/**
* @param{$size} - units/em
*/
/* Reset básico para garantir que o layout seja consistente */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Estilos para links */
a {
  text-decoration: none;
  color: #b31111;
}
a:focus {
  outline: 2px solid #b31111;
}

/* Definição de fontes e box-sizing */
html {
  font-size: 62.5%;
  box-sizing: border-box;
}

/* Estilos base para o corpo */
body {
  font-size: 1.6rem;
  font-family: f-light;
  line-height: 1.5;
}

p {
  margin-bottom: 1rem;
}

.message {
  min-width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
}
.message .error {
  min-width: 100%;
  margin: 0;
  color: #f40606;
  background-color: #3b020a;
  padding: 0 2rem;
  border-radius: 0.3rem;
  animation: error-messages 0.35s ease-in-out;
}

@keyframes error-messages {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.btn {
  font-family: f-light;
  font-size: 1.6rem;
  padding: 1rem 4rem;
  background-color: #A50000;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 2rem;
  cursor: pointer;
  letter-spacing: 0.2rem;
}
.btn:hover {
  filter: brightness(1.5);
}
.btn:focus {
  outline: 2px solid #9a0e0e;
}

.btn-download {
  display: block;
  width: 18rem;
  font-family: f-light;
  font-size: 1.6rem;
  padding: 1rem 4rem;
  background-color: #6d9121;
  color: #141518;
  border: none;
  border-radius: 4px;
  margin-top: 2rem;
  cursor: pointer;
  letter-spacing: 0.2rem;
}
.btn-download:hover {
  filter: brightness(1.5);
}
.btn-download:focus {
  outline: 2px solid #9a0e0e;
}

.variantes {
  font-size: 1.2rem;
  color: #A50000;
}

body {
  width: 100%;
  height: 100dvh;
  background-color: #141518;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 1rem;
}

.login-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.login-form .login-form__title {
  color: #A50000;
  font-size: 3rem;
  margin: 4rem 0;
  text-align: center;
}
.login-form form {
  border: 0.1rem solid #5c5c5c;
  background-color: #1D1F25;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
.login-form form .labels {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.login-form form .labels label {
  font-size: 2rem;
}
.login-form form input[type=text], .login-form form input[type=password] {
  padding: 1rem;
  border: none;
  font-size: 1.6rem;
  margin: 1rem 0;
  outline: none;
  background-color: rgb(70, 59, 59);
  border-radius: 0.3rem;
  color: #fff;
}
.login-form form input[type=text]:focus, .login-form form input[type=password]:focus {
  background-color: #494949;
}

@media screen and (min-width: 36em) {
  body {
    background-color: rgb(19, 17, 17);
    transition: all 3s ease;
  }
  .login-form {
    max-width: 36rem;
  }
  .login-form .login-form__title {
    font-family: f-medium;
    font-weight: bolder;
  }
  .login-form form {
    border: none;
    background-color: transparent;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*# sourceMappingURL=login.css.map */