/**
 * This file contains site-specifc style overrides for Notion elements from
 * react-notion-x.
 * 
 * react-notion-x's goal is to match styling as close as possible to Notion,
 * whereas our goal with this blog is to adjust Notion's styling in a few key
 * places to add some flare and make our site look more like a blog.
 */

.notion {
  --notion-max-width: 720px;
}

.notion-page {
  margin: 0 12px;
  width: 720px;
  padding-bottom: calc(max(5vh, 64px)) !important;
  line-height: 1.65;
}

.index-page {
  width: 900px;
}

.notion-text {
  padding: 0.5em 2px;
}

.notion-asset-caption {
  text-align: center;
}

.notion-asset-wrapper {
  margin-top: 1em;
  margin-bottom: 1em;
}

.notion-header .nav-header {
  max-width: 1100px;
  margin: 0 auto;
}

.notion-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 6vmin;
  gap: 6vmin;
}

.notion-gallery-grid .notion-page-icon {
  display: none;
}

.notion-gallery-grid .notion-page-title-text {
  font-size: 2em;
  white-space: unset;
}

.notion-gallery-grid .notion-collection-card-property {
  white-space: unset;
  text-overflow: unset;
}

.notion-collection-card {
  border-radius: 15%;
  border-top-right-radius: 5%;
  border-bottom-left-radius: 5%;
  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
}

.notion-collection-card-cover img {
  border-radius: 0;
}

.notion-collection-card-cover {
  transition: filter 150ms linear;
  filter: brightness(100%);
}

.notion-collection-card:hover .notion-collection-card-cover {
  filter: brightness(120%);
}

/* only target safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media,
  _:future,
  :root,
  .notion-collection-card-cover {
    transition: none 0ms linear;
  }
}

.notion-quote {
  padding: 0.2em 0.75em;
  font-size: 1.1em;
}

.notion-h1,
.notion-h2,
.notion-h3 {
  margin-bottom: 0.25em;
}

.notion-callout {
  margin: 0.75em 0;
}

.notion-hr {
  margin: 2em 0;
}

.notion-dark .notion-collection-card {
  border: 1px solid var(--fg-color-0);
  box-shadow: unset;
}

@media only screen and (max-width: 900px) {
  .notion-collection {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media only screen and (max-width: 600px) {
  .notion-search-button {
    display: none !important;
  }
}

@media only screen and (max-width: 400px) {
  .notion-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10vmin;
    gap: 10vmin;
  }
}

.notion .notion-page-icon-cover {
  margin-left: auto;
  margin-right: auto;
}

.notion img.notion-page-icon-cover {
  margin-top: -62px;
}

.notion-title {
  display: block;
  text-align: center;
  margin-top: 4vmin;
}

.notion-collection-column-title {
  display: none !important;
}

.notion-collection-row-property .notion-property {
  display: flex;
  justify-content: center;
}

.notion-collection-row-value {
  padding: 0;
}