::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

body {
  font-family: "Fraunces", serif;
}

#menu-button {
  anchor-name: main-menu;
}

#menu {
  position-anchor: main-menu;
}

.tags-popover {
  position: fixed;
  left: anchor(left);
  top: anchor(self-end);
}

.dialog {
  box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  position: fixed;
  max-height: 90dvh;

  opacity: 0;
  display: none;
  translate: 0 25vh;
  margin: auto;
  transition-property: display opacity translate;
  transition-duration: 0.5s;
  transition-behavior: allow-discrete;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.dialog[open] {
  display: flex;
  opacity: 1;
  translate: 0 0;
  @media (max-width: 768px) {
    max-width: 100vw;
    max-height: 100dvh;
  }

  @starting-style {
    opacity: 0;
    translate: 0 25vh;
  }
}

.dialog-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1;
}

.dialog::backdrop {
  transition-property: opacity display overlay;
  transition-duration: 0.5s;
  transition-behavior: allow-discrete;
  opacity: 0;
}

.dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;

  @starting-style {
    background: rgba(0, 0, 0, 0);
  }
}

.photo-viewer {
  width: max-content;
  img {
    max-height: 90dvh;
  }
  @media (min-width: 768px) {
    display: flex;
    flex: 1;

    .photo-viewer-image {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .photo-viewer-content {
      padding: 32px;
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: 320px;
    }
  }

  .photo-viewer-content {
    padding: 32px;
  }
}

.empty-state {
  display: none;
}

.empty-state:only-child {
  display: revert;
}

.photo-frame {
  position: relative;
  overflow: hidden;
}

.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.edit-image-container {
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 24px;
    grid-template-areas:
      "image content content"
      "image content content"
      "image content content";
  }
}

.edit-image-content {
  grid-area: content;
}

.edit-image-image {
  grid-area: image;
}

.photos_new,
.photos_create {
  .form-file-input {
    min-height: 500px;
    aspect-ratio: 12 / 7;
  }
}

.notice {
  display: none;
  opacity: 0;

  text-align: center;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  top: -25vh;
  translate: 0 25vh;

  transition-property: display opacity translate height;
  transition-duration: 1s;
  transition-behavior: allow-discrete;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.notice-open {
  display: block;
  opacity: 1;
  top: 0;
  translate: 0 0;
}