@import "./reset.css";
@import "./variables.css";

html {
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: var(--spacing-lg);
  font-size: var(--font-base);
}

hr {
  border-color: var(--color-text);
  border-width: 1px;
  width: 100%;
}

h1, h2 {
  color: var(--color-text-darker);
  font-weight: bold;
}

h1 {
  font-size: var(--font-xl);
}

h2 {
  font-size: var(--font-lg);
}

h3 {
  font-size: var(--font-lg);
  color: var(--color-text-dark);
}

h4 {
  font-size: var(--font-lg);
}

.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form {
  background-color: var(--color-section);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);

  .ticketWrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .ticket {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
  }

  .ticketDetails {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
}