notion.css

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

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

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

@media only screen and (max-width: 920px) {
  .index-page.notion-page {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media only screen and (max-width: 720px) {
  .notion-page {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

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

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

.notion-title {
  display: block;
  text-align: center;
}

.notion-collection-row {
  padding-bottom: 1em;
}

.notion-collection-page-properties .notion-collection-column-title {
  display: none;
}

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

.notion-collection-row-value {
  display: flex;
  align-items: center;
  padding: 0;
  min-height: 23px;
}

.notion-page-cover-wrapper,
.notion-page-cover-wrapper span,
.notion-page-cover-wrapper img {
  max-width: 1200px !important;
  border-radius: 24px;
}

.notion-page-cover-wrapper {
  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
}

@media only screen and (max-width: 1200px) {
  .notion-page-cover-wrapper,
  .notion-page-cover-wrapper span,
  .notion-page-cover-wrapper img {
    border-radius: 0;
  }
}

.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-page-link {
  justify-content: center;
  padding: 2em;
}

.notion-code {
  background: rgba(249, 250, 251, 1);
  border: 1px solid rgba(229, 231, 235, 1);
  border-radius: 0.375rem;
}

.notion-link {
  position: relative;
  transition: unset;
  opacity: 1;
  border-bottom-width: 0.1rem;
  background: transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0 0.1rem;
}

.notion-link:focus,
.notion-link:hover {
  border-bottom-color: transparent;

  background-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.1rem;

  transition-property: background-position, background-size;
  transition-duration: 300ms;
}

.notion-red_background,
.notion-pink_background,
.notion-blue_background,
.notion-purple_background,
.notion-teal_background,
.notion-yellow_background,
.notion-orange_background,
.notion-brown_background,
.notion-gray_background {
  padding: 0 0.5rem;
  margin: 0 -0.5rem 0 -0.25rem;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0.125rem;
  box-decoration-break: clone;
  background-color: none;
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #fdeed2 10.5%,
    #fde4b5 85.29%,
    var(--bg-color)
  );
}

.notion-purple_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #e4d3fd 10.5%,
    #d3b6ff 85.29%,
    var(--bg-color)
  );
}
.notion-pink_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #ffd2e7 10.5%,
    #ffadd3 85.29%,
    var(--bg-color)
  );
}

.notion-blue_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #d9eafd 10.5%,
    #b3d6ff 85.29%,
    var(--bg-color)
  );
}

.notion-gray_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #cfcfcf 10.5%,
    #a0a0a0 85.29%,
    var(--bg-color)
  );
}

.notion-red_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #ffc3c3 10.5%,
    #fba6a3 85.29%,
    var(--bg-color)
  );
}
.notion-orange_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #ffe6b1 10.5%,
    #ffd09b 85.29%,
    var(--bg-color)
  );
}

.notion-teal_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #d4eabc 10.5%,
    #d2eabc 85.29%,
    var(--bg-color)
  );
}

.notion-brown_background {
  background-image: linear-gradient(
    119deg,
    var(--bg-color),
    #cab7ae 10.5%,
    #b1998d 85.29%,
    var(--bg-color)
  );
}

/* disable highlighting in dark mode */
.dark-mode .notion-red_background,
.dark-mode .notion-pink_background,
.dark-mode .notion-blue_background,
.dark-mode .notion-purple_background,
.dark-mode .notion-teal_background,
.dark-mode .notion-yellow_background,
.dark-mode .notion-orange_background,
.dark-mode .notion-brown_background,
.dark-mode .notion-gray_background {
  /* padding: 0;
  margin: 0;
  border-radius: 0; */
  color: var(--bg-color);
  /* background: none !important; */
}

/* if you don't want rounded page icon images, remove this */
.notion-page-icon-hero.notion-page-icon-image {
  border-radius: 50%;
  box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
}
.notion-page-icon-hero.notion-page-icon-image span,
.notion-page-icon-hero.notion-page-icon-image img {
  border-radius: 50%;
}

.notion-header {
  background: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: saturate(180%) blur(16px);
}

.dark-mode .notion-header {
  background: transparent;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Workaround for Firefox not supporting backdrop-filter yet */
@-moz-document url-prefix() {
  .dark-mode .notion-header {
    background: hsla(203, 8%, 20%, 0.8);
  }
}

.notion-bookmark:hover {
  border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
  border-image-slice: 1;
}

.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-column {
  padding: 0;
}

.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
  display: none;
}