@import 'fonts.css';
@import 'variables.css';


html {
  font-family: 'Monument Grotesk';
  font-family: monospace;
  text-rendering: optimizeSpeed;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.01em;

  color: black;
  background-color: white;
  
  padding: 0.5rem;
  box-sizing: border-box;

  scroll-padding-top: 0.5rem;
}

body {
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

header, main, footer {
  padding: 0.5rem;
  box-sizing: border-box;
}

header h1 {
  font-size: 1.75rem;
  font-feature-settings: "tnum";
}

main {
  display: flex;
  flex-direction: row;
  gap: 1rem
}

section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem
}

article {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  justify-self: flex-start;
  align-self: flex-start;
}

/* menu */

/* index */

.index {
  padding: 0.5em;
  box-sizing: border-box;
  justify-self: flex-start;
  align-self: flex-start;
  min-width: 2em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  position: sticky;
  top: 0.5rem;
  background-color: var(--color-grey);
  font-feature-settings: 'tnum';
  border-radius: 2px;
}

.index.active {
  background-color: var(--color-accent);
}

.index:hover {
  background-color: var(--color-accent);
}

.index::selection {
  background-color: transparent;
}

/* collections */

.component-collection {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* preview */

#preview {
  background-color: var(--color-grey);
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  flex: 1;
  position: fixed;
  top: 0.5rem;
  height: calc(100vh - 1rem);
  width: calc(100% - 14.75rem);
  align-self: flex-start;
  justify-self: flex-start;
  pointer-events: none;
  left: 14.2rem;
  border-radius: 2px;
}

#preview.active {
  pointer-events: all;
}

#preview h1 {
  font-size: 1.5rem;
}

#preview h2 {
  font-feature-settings: 'tnum';
}

#preview .index {
  background-color: var(--color-accent);
}

/* filter */

form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem 0 2rem 0;
}

label {
  width: 5.5em;
  display: inline-block;
}

select {
  text-align: center;
  font-feature-settings: "tnum";
  box-sizing: border-box;
  width: 6.25rem;
  background-color: var(--color-grey);
  cursor: pointer;
  border-radius: 2px;
}

select:has(option:not([value=""]):checked) {
  background-color: var(--color-accent);
}