/** This file contains global styles that apply to the entire application. */

:root {
  font-family: var(--font-body);

  background-color: var(--background);
  color: var(--foreground);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

div,
p {
  font-size: var(--text-sm);
}

a {
  color: inherit;
  text-underline-offset: 4px;
}

button {
  cursor: pointer;
  font: inherit;
}

mark {
  background-color: transparent;
}

* {
  transition-property: none;
  transition-duration: var(--duration);
  transition-timing-function: var(--ease-in-out);
}

.page {
  min-height: 100svh;
  padding: var(--spacing-2xl);

  container-type: inline-size;
  container-name: page;
}

.page__header {
  display: flex;
  align-items: end;
  gap: var(--spacing-lg);
  justify-content: space-between;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border);
  background-color: var(--background);

  @container page (width < 600px) {
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-md);
  }
}

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

.hidden {
  display: none !important;
}

.preserve-linebreaks {
  white-space: pre-wrap;
  word-break: break-word;
}