html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}


body{
  margin: 0;
}

section {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  height: 100vh;
}

section > .container{
  display: flex; 
  padding-left: 1.5rem;
  padding-right: 1.5rem; 
  padding-top: 2rem;
  padding-bottom: 2rem; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
}

section > .container > a {
  display: flex; 
  margin-bottom: 1.5rem; 
  align-items: center; 
  font-size: 1.5rem;
  line-height: 2rem; 
  font-weight: 600; 
  color: #111827; 
}

section > .container > a > img{
  margin-right: 0.5rem; 
  height: 2rem;  
}


.container-form{
  border-radius: 4px; 
  width: 100%; 
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  border-width: 1px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 
}


.container-form-div{
  padding: 1.5rem; 
}

.container-form-div > h1{
  font-size: 1.25rem;
  line-height: 1.75rem; 
  font-weight: bold; 
  letter-spacing: -0.025em; 
  line-height: 1.25; 
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.container-form-div > form{
  margin-top: 1rem; 
  display: flex;
  flex-direction: column;
  gap: 20px;
}

label{
  display: block; 
  margin-bottom: 0.5rem; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 500; 
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

input{
  display: block; 
  padding: 0.625rem; 
  border-radius: 4px; 
  border-width: 1px;  
  width: 100%; 
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  outline: 0;
  border: 0;
}

button{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; 
  padding-left: 1.25rem;
  padding-right: 1.25rem; 
  border-radius: 4px; 
  width: 100%; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 500; 
  text-align: center; 
  color: #ffffff; 
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem* calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem* var(--tw-space-y-reverse));
  cursor: pointer;
  border:0;
  font-weight: bold;
  outline: 0;
}

button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}



@media (min-width: 768px) { 
  section > .container{
    height: 100vh; 
  }

  .container-form{
    margin-top: 0; 
  }

  .container-form-div > h1{
    font-size: 1.5rem;
    line-height: 2rem; 
  }

  .container-form-div > form{
    margin-top: 1.5rem; 
  }

  button {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem* calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem* var(--tw-space-y-reverse));
  }

}

@media (min-width: 640px) { 
  .container-form{
    max-width: 28rem; 
  }

  .container-form-div{
    padding: 2rem; 
  }

  input{
    font-size: 0.875rem;
    line-height: 1.25rem; 
  }
}

@media (min-width: 1280px) { 
  .container-form{
    padding: 0; 
  }
}


@media (min-width: 1024px) { 
  section > .container{
    padding-top: 0;
    padding-bottom: 0; 
  }
}