:root {
  --spacing: 0;
  --typography-spacing-vertical: 0;
}

body {
  padding: 0;
  margin: 0;
  display: grid;
  height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

header {
  background-color: var(--card-background-color);
  box-shadow: var(--card-box-shadow);
  padding: .5rem 1rem !important;
}

h1 {
  --typography-spacing-vertical: 0;
}

hgroup  {
  display: grid;
  grid-template-columns: 50% 50%;
}

hgroup h1, hgroup h2 {
  align-self: center;
  justify-self: start;
}

hgroup h2 {
  justify-self: end;
}

#drop-zone, #missing, #img, #video {
  display: grid;
  place-items: center;
}

#drop-zone {
  border: 5px dashed;
  border-radius: 30px;
  transition: border-color 0.2s ease-in-out;
  margin: 1rem;
}

#missing {
  margin: 1rem;
}

#missing > p {
  font-size: 10rem !important;
}

#file, #img, #video {
  margin: 1rem auto;
  padding: 0 5rem;
}

#img a img, #video video {
  max-width: 100%;
  max-height: 75vh;
}

#drop-zone[aria-busy='true'] .hover-text,
#drop-zone[aria-busy='true'] .default-text {
  display: none;
}

#drop-zone .hover-text {
  display: none;
}
#drop-zone .default-text {
  display: revert;
}

#drop-zone.hover {
  border-color: var(--primary);
}

#drop-zone.hover .hover-text {
  display: revert;
}

#drop-zone.hover .default-text {
  display: none;
}

#album {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

#album .album-item {
  height: 100%;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: 0 5rem;
}

#album img, #album video {
  max-width: 100%;
  max-height: 75vh;
}

input[type="file"] {
  display: none;
}

.upload-text {
  display: inline-block;
  cursor: pointer;
  margin: 0;
}