:root {
  
  --red: #B24226;
  --border: #ccc;
  --action: #3c85c6;
  
  --clr-darkblue: #001338;

  --ff-base: system-ui, sans-serif;
  
  line-height: 1.3;
  font-weight: 400;
  font-family: var(--ff-base);
}

body {
  background: linear-gradient(180deg,#ddd,#f2f1f0);
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
}

html,
body {
  height: 100%;
}

main {
  justify-self: center;
  align-self: center;
  max-width: 360px;  
  width: 100%;
  background: white;
  padding: 40px 24px 24px 24px;
  font-size: 1rem;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

svg {
  display: block;
  margin: 0 2%;
  aspect-ratio: 530/56;    
  margin-block-end: 8px;
}


label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  
  & span {
    color: #333;
    font-size: 1rem;
  }
}


input[type="text"],
input[type="password"] {
  background: transparent;
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 0.25ch;
  font-size: 1rem;
  flex-grow: 1;
  overflow: visible;
  -webkit-box-align: baseline;
  
  
  &:hover {
    border-color: #666;
  }
}


:is(a, button, input) {
  --out-offset: -1px;
  --radius: 0.25ch;
  
  transition: 100ms ease-out;
  transition-property: background-color, border-color, box-shadow, outline;
  touch-action: manipulation;

  &:is(a) {
    --out-offset: 1ch;
    --radius: 0;
  }

  &:where(:focus-visible) {
    border-radius: var(--radius);
    outline: 2px solid oklch(from var(--clr-darkblue) 60% c h);
    outline-offset: var(--out-offset);
  }
}


button {
  background: #333;
  border: none;  
  font: 400 1.125rem/1.4 var(--ff-base);
  padding: 8px 20px;
  border-radius: 0.25ch;
  cursor: pointer;
  color: #FFF;

  &:active {
    background-color: #999;
  }
}


p[role=alert] {
  margin: 0.5em 0 0 0;
  color: var(--red);
  font-size: 0.875rem;
  order: 3;
}

.input-field-container:has(p[role=alert]) {
  --border: var(--red);

  span {
    color: var(--red);
  }  
}


form {
  margin: 0;
  gap: 32px;
  display: flex;
  flex-direction: column;  
}

div:has(>button) {
  align-self: end;  
}