/* Centering page */

body {
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}

/* Layout */

header h1 {
  display: grid;
  justify-items: center;
}

main {
  display: grid;
  gap: var(--spacing-0400);
}

#input-section {
  display: grid;
  gap: var(--spacing-0400);
}

.input-wrapper {
  display: grid;
  align-items: center;
}

.input-wrapper div {
  display: flex;
  justify-content: space-between;
}

.input-number div {
  display: flex;
  align-items: center;
}

#tip-percent div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-0200);
}

#custom-tip[hidden] {
  display: none;
}

#output-section {
  display: grid;
  row-gap: var(--spacing-1600);
  align-content: space-between;
}

.amount-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  div {
    display: grid;
  }
}

.amount-amount {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}

@media (min-width: 767px) {
  #tip-percent div {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1023px) {
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}