@import "./resets.css";
@import "./typography.css";
@import "./colors.css";
@import "./lengths.css";
@import "./classes.css";
@import "./roles.css";

body {
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--ff-default);
  font-weight: 155;
  font-size: var(--fs-0);

  & > header,
  & > main,
  & > footer {
    max-width: var(--page-width);
    margin: var(--unit-m-l) auto;
    padding: 0 var(--unit-m-l);
  }
}

header {
  h1 {
    color: transparent;
    user-select: none;
    width: var(--unit-4xl);
    max-width: 100%;
    aspect-ratio: 100 / 35;
    background-image: url("../assets/logo-tenz.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
}

input {
  font-size: var(--fs-1);
  text-align: center;
  width: var(--unit-4xl);
}

strong {
  font-size: var(--fs-2);
}

main {
  min-height: 50vh;
}

button {
  color: white;
  font-size: var(--fs-1);
  cursor: pointer;
}