@import "project-bg.css";

/* VARIABLES */
:root {
  --color-checkbox-bg: #888888 !important;
  --header-title-opacity: .5!important;

  /*CTA*/
  --cta-border-radii: 40px !important;
  --cta-bg-color: var(--color-text-default) !important;
  --cta-bg-hover-color: #111 !important;
  --cta-text-color: var(--color-bg-default) !important;
  --cta-text-hover-color: #ffffff !important;

  /*ss landing page colors*/
  --color-white: #FFFFFF;
  --color-lightgray: #F1F1EF;
  --color-tan:#C7A47E;
  --color-darkpurple: #31273A;
  --color-darkgray: var(--color-bg-default);
  --color-black: #000000;
  
  /*bg colors*/
  --color-asset-background: #13110F;
  --color-asset-bg-blue: #DEE2F2; 
  --color-asset-bg-green: #8E9381;
  --color-asset-bg-purple: #998CA4;
  --color-asset-bg-tan: #A98C6C;
  --color-asset-bg-gray: #94908D;
  /* make all bg default */
  /* --color-asset-bg-blue: var(--color-asset-background); */
  /*--color-asset-bg-green: var(--color-asset-background); */
  /*--color-asset-bg-purple: var(--color-asset-background); */
  /*--color-asset-bg-tan: var(--color-asset-background); */
  /*--color-asset-bg-gray: var(--color-asset-background); */
  
  /* more colors */
  --color-ui-hover-bg: var(--color-card-bg-hover) !important;
  --color-text-gray: var(--color-text-default-light) !important;
  /*--color-border-default: var(--color-text-default-light) !important*/
  --color-border-dark: #33302e !important; /*(Neutral 20)*/
  
  /*spacing*/
  --site-title-font-font-size-value: 1.5;
  --mobile-site-title-font-font-size-value: 1.1;
  --padding-mobile: 6vw;

  /* typography */ /*only uncomment if needed*/
  /* --title-size: 2.5rem;  */
  /* --quote-size: 1.36rem; */
  /* --quote-size-large: 1.4rem; */
  /* --heading-size: 1.5rem; */ 
  /* --primary-font: Syne,Syne-fallback,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif; */
  /* --secondary-font: Space Grotesk,Space Grotesk-fallback,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif; */
  /* --text-weight: 400; */
  /* --heading-weight: 600; */
  /* --heading1-size: calc(var(--heading-size) * 1.875); */
  /* --heading2-size: calc(var(--heading-size) * 1.5); */
  /* --heading3-size: calc(var(--heading-size) * 1.25); */
  /* --heading4-size: calc(var(--heading-size) * 1); */
  /* --heading5-size: calc(var(--heading-size) * 0.8125); */
}

.theme-dark {
  --color-bg-gray-light: #101010 !important;
  --color-pill-default: #101010 !important;
  --card-content-bg-color: rgba(0, 0, 0, .6) !important;
  /* --color-border-default: rgba(255, 255, 255, .12) !important; */
  --navbar-background-color: var(--sidebar-background-color)  !important;
  --color-code-bg: var(--color-bg-gray-light) !important;
  --color-ui-hover-bg: #202020 !important;

  /* --color-border-default: var(--color-text-default-light) !important */
  --select-highlight-color: rgba(234, 225, 218, .4);
}

.theme-light {
  --card-content-bg-color: rgba(255, 255, 255, .6) !important;
  --color-border-default: rgba(204, 204, 204, .4) !important;
  --navbar-background-color: rgba(246, 246, 246, .8) !important;
  --color-ui-hover-bg: #F2F2F2 !important;

  
  --select-highlight-color: rgba(249, 187, 114, .4);
}

/* OPTIONS */
.theme-dark .notion-code code {
  color: var(--color-text-default) !important;
}

.parent-page__posts .max-width,
.parent-page__blog .max-width,
#page-blocks .max-width {
  --layout-max-width: 900px !important;
}

/* PAGE-SPECIFIC */
#page-index .notion-header, 
#page-staging .notion-header {
  display: none !important;
}

#page-index .notion-root, 
#page-staging .notion-root {
  max-width: calc(1800px + var(--padding-left) + var(--padding-left)) !important;
  margin: 0 auto !important;
}

#page-index .notion-heading, 
#page-staging .notion-heading {
  text-align: center;
  padding-top: calc(var(--column-spacing)*4) !important;
}



/* THEME SPECIFIC */
.theme-dark .notion-collection-card__property span .date {
  color: var(--color-text-default) !important;
}

/* .theme-dark .notion-collection-gallery .pill-default {
  background: transparent!important;
  border: 1px solid var(--color-text-default);
  color: var(--color-text-default)!important;
} */

.theme-dark .notion-collection-card__content {
  color: var(--color-text-default)!important;
}

/* MAIN STYLES BEGIN */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

::-moz-selection {
  background: var(--select-highlight-color) !important;
}

::selection {
  background: var(--select-highlight-color) !important;
}

.notion-toggle.bg-brown {
  display: none !important;
}

/* TYPOGRAPHY */
.notion-text p {
  margin-bottom: 12px !important;
}

/* XL H1 */
h1.notion-heading strong,
strong h1.notion-heading {
  /* margin-bottom: 12px !important; */
  letter-spacing: -4px !important;
  line-height: 1 !important;
  /* font-size: clamp(2.6rem, 6vw, 5rem) !important; */
  font-size: 4.2rem !important;
}

h1.notion-heading {
  letter-spacing: -1px!important;
  /* margin-top: 2em!important; */
  /* margin-bottom: 1.5em!important; */
  margin-top: 60px !important;
  margin-bottom: 4px !important;
}

h2.notion-heading:not(.toggle) {
  margin-bottom: 12px !important;
}

h2.notion-heading * {
  letter-spacing: -1px !important;
  line-height: 1 !important;
}

h3.notion-heading * {
  letter-spacing: -.6px !important;
  line-height: 1 !important;
}

.notion-header__title {
  font-size: clamp(2.3rem, 5vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -1.6px !important;
  opacity: var(--header-title-opacity)!important;
}

/* HIDDEN CONTENT */
.notion-callout.bg-pink-light:has(.notion-toggle) {
  display: none!important ;
}
.notion-divider {
  border-bottom: none!important;
  margin: 6em 0!important;
}


/* NAVBAR */
.super-navbar {
  width: 100%!important;
  height: auto !important;
  /* backdrop-filter: blur(8px) !important; */
  border-bottom: none;
  background:none !important;
}

.super-navbar__content {
  max-width: 1800px;
  margin: 0 auto !important;
  padding-top: 3vw !important;
  padding-bottom:3vw !important;
  padding-left: 3vw !important;
  padding-right: 3vw !important;
  height:auto;
}

.super-navbar__menu {
  background: var(--color-bg-default)!important;
}

.super-navbar__item-list {
  gap: 12px !important;
}

.super-navbar__item {
  padding: 8px 12px !important;
  height: auto !important;
  border-radius: none !important;
  border: none !important;
  transition: background .16s ease-in-out, border .16s ease-in-out !important;
  padding: 0 !important;
  padding-left: 1.6vw !important;
}

.super-navbar__item:hover, 
.super-navbar__theme-toggle:hover, .super-navbar__list:hover {
  border: none !important;
  background: none !important;
  color: var(--color-tan);
}

.super-navigation-menu__items .notion-link[href ="https://farheen.design"] svg {
  display:none;
}

a.super-navbar__item[target="_blank"]:after {
    font-family: 'Material Symbols Outlined' !important;
    content: "arrow_outward" !important;
    margin-left: 0.2em !important;
    vertical-align: middle !important;
    display: inline-block !important;
    font-size: 0.9em !important;
    line-height: 1 !important;
}

.super-navbar__logo {
  padding-left: 0 !important;
  padding-right: 1.6vw !important;   
}

.super-navbar__logo-text {
  font-weight: 500!important;
  font-size: calc(var(--site-title-font-font-size-value) * 1rem) !important;
  line-height:1.5em !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

.super-navbar__theme-toggle {
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  width: 42px !important;
  height: 42px !important;
  transition: background .16s ease-in-out, border .16s ease-in-out !important;
}

.super-navbar__theme-toggle svg {
  stroke-width: 1.5px !important;
}

.super-navbar__viewport.single-column {
  position: absolute;
  top: 0;
  right: 10px;
}


/* HEADER */
.notion-header {
  margin-bottom: 0px!important;
  overflow: hidden!important;
}

.notion-header__cover {
  min-height:75vh;
  margin: 0px 2rem !important;
  border-radius: var(--border-radii-layout)!important;
  /*max-height:75vh;*/
  /*max-height: 880px !important;*/
  /*height: 880px !important;*/
}

.notion-header__title-wrapper {
  display: none!important;
}


/* GALLERY */
.notion-collection__header-wrapper {
  flex-direction: column!important;
  align-items: flex-start!important;;
}

/* GALLERY COLS */

/* SMALL */
.notion-collection-gallery.small {
  grid-template-columns: 1fr 1fr 1fr!important;
}

@media all and (max-width: 764px) { 
  .notion-collection-gallery.small {
    grid-template-columns: 1fr!important;
  }
}

/* MEDIUM */
.notion-collection-gallery.medium {
  grid-template-columns: 1fr 1fr 1fr 1fr!important;
}

.notion-collection-gallery.medium .notion-collection-card {
  min-height: 420px!important;
}

@media all and (max-width: 1200px) { 
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr 1fr!important;
  }
  
  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
  grid-column: 2 / -1;
}
}

@media all and (max-width: 968px) { 
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr!important;
  }
  
  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
  grid-column: 1 / -1;
}
}


@media all and (max-width: 764px) { 
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr!important;
  }
}

/* LARGE */
.notion-collection-gallery.large {
  grid-template-columns: 1fr 1fr!important;
}


@media only screen and (min-width: 1440px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media only screen and (max-width: 767px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
  }
}

/* MEDIUM – SOME BIGGER CARDS */
@media only screen and (min-width: 992px) {
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 2):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 8):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 12):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 20):not(:last-child) {
    grid-column: span 2 / auto;
    grid-row: span 2 / auto;
  }
  
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 11):not(:last-child),   .notion-collection-gallery.medium .notion-collection-card:nth-child(26n + 16):not(:last-child) {
    grid-column: span 2 / auto;
  }
}
/* LARGE – SOME BIGGER CARDS */
@media only screen and (min-width: 992px) {
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n + 2),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n + 2),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n + 8),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n + 12),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n + 20) {
    grid-column: span 2 / auto;
    grid-row: span 2 / auto;
  }
}
.notion-collection-gallery,
.notion-collection-list {
  border-top: 0 !important;
}

.notion-collection-gallery.large {
  display: grid !important;
  grid-auto-flow: row dense !important;
  grid-auto-columns: 1fr !important;
  grid-column-gap: 24px !important;
  grid-row-gap: 24px !important;
  grid-template-rows: auto !important;
}

.notion-collection-card__cover img {
  padding: 0 !important;
  height: 100%!important;
}

.notion-collection-card__cover div {
  height: 100%!important;
}

.notion-collection-card {
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border-default) !important;
  position: relative !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0)
}

.notion-collection-card__cover {
  height: 100% !important;
  position: relative !important;
}

.notion-collection-card__cover img {
  transition: transform .2s ease-in-out !important;
}

.notion-collection-card:hover .notion-collection-card__cover img {
  transform: scale(1.05) !important;
  -webkit-transform: scale(1.05)!important;
  -ms-transform: scale(1.05)!important;
}

/* CONTENT VISIBLE ARROW ON HOVER */
.notion-collection-card__content {
  position: absolute !important;
  bottom: 0 !important;
  color: var(--color-bg-default) !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100% !important;
}

.notion-collection-card:hover .notion-property__title::after {
  opacity: 1 !important;
}

.notion-property__title::after {
  transition: opacity .2s ease-in-out !important;
}

.notion-property__title::after {
  content: '→';
  opacity: 0 !important;
  margin-left: 6px !important;
}




.notion-collection-card.no-click {
  cursor: pointer !important;
}

/* PROPERTIES */
.notion-property__title .notion-semantic-string {
  font-weight: 200 !important;
}

.notion-collection-card__property-list {
  margin-top: 0 !important;
}

.notion-collection-card picture {
  height: 100%!important;
}

.notion-collection-card__property span .date {
  color: var(--color-bg-default) !important;
}

.notion-property__text {
  font-size: 14px !important;
  font-weight: 300 !important;
}

.notion-collection-card__property-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

.notion-collection-card__property .notion-semantic-string {
  white-space: pre-wrap !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.notion-pill {
  font-size:0.6rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 500 !important;
  padding: 1px 7px 0px 7px !important;
  
}

.notion-pill.pill-default {
  border-radius: 50px !important;
  background: none !important;
  color: var(--color-text-default-light) !important;
  border: 1px var(--color-border-default) solid;
}

.notion-property .notion-pill {
  font-size:0.8rem !important;
  padding: 0.1rem 0.5rem !important;
}
.notion-collection-card__property .notion-pill, 
.notion-collection-list__item-content .notion-pill {
  margin-top: 0.3rem !important;
  font-size: 0.675rem !important;
  padding: 0.01rem 0.5rem !important;
}

.notion-page__properties .notion-property:has(.notion-pill) {
  padding-left: 0px !important;
}

/* LIST */
.notion-collection-list__item:first-child {
  border-top: 1px solid var(--color-border-default) !important;
}

.notion-collection-list__item .notion-property.notion-property__title .notion-semantic-string>span {
  white-space: pre-wrap!important;
}

.notion-collection-list__item {
  border-bottom: 1px solid var(--color-border-default) !important;
  padding: 24px !important;
  min-height: 38px !important;
  border-radius: 0px !important;
  transition: background-color .15s ease !important;
  margin: 0 !important;
}

.notion-collection-list__item .notion-property__title .notion-semantic-string>span {
  border-bottom: 0px !important;
}

.notion-collection-list__item .notion-property__title .notion-semantic-string {
  white-space: pre-wrap !important;
}

.notion-page__property-name {
  align-self: flex-start !important;
  margin-top: 0 !important; 
}

.notion-page__property-name>span, .notion-page__property p {
  /* font-size: 16px !important; */
  font-size: 0.9rem!important;
}

.notion-page__properties .notion-divider {
  margin: 32px 0px !important;
  /* display:none; */
}

.notion-collection-card__property-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important
}



.notion-property__date .date {
  opacity: .6;
}

.notion-property__person>.notion-semantic-string>span {
  display: flex !important;
}



.notion-page__properties {
  /* padding: 1em!important;
  border: var(--border-thickness-layout) solid var(--color-border-default)!important;
  border-radius: var(--callout-border-radii)!important;
  margin-bottom: 3em!important;
   */
  border: none !important;
  padding: 36px 0 36px !important;
  border-radius: 0px !important;
  border-bottom: var(--divider-border) !important;
  margin-bottom: 28px !important;
  transition: 0.3s!important;
}
/* Reorder article page elements */
.notion-root {
  display: grid !important;
  grid-template-rows: auto auto;
}
.notion-root h1 {
  grid-row: 1;
}
.notion-root .notion-page__properties-layout {
  grid-row:2;
}



/* CTA BUTTON */
.super-navbar__cta {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  /* font-weight: 100 !important; */
  display: inline-flex !important;
  justify-content: center !important;
  transition: background .2s ease-in-out !important;
  background: var(--color-bg-default) !important;
  color: var(--color-text-default) !important;
  border: 1px solid var(--color-text-default) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
}

.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;
  justify-content: center !important;
  transition: background .2s ease-in-out !important;
  background: var(--color-bg-default) !important;
  color: var(--color-text-default) !important;
  margin: -2px !important;
  border: 1px solid var(--color-text-default) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
  text-decoration: none!important;
}

.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong:hover,
.super-navbar__cta:hover {
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  opacity: 1 !important;
}

/* NEW 3.1 */

.notion-root .notion-text strong .notion-link,
.notion-root .notion-text .notion-link strong {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;  
  justify-content: center !important;
  transition: background .2s ease-in-out !important;
  background: var(--color-bg-default) !important;
  color: var(--color-text-default) !important;
  margin: -2px !important;
  border: 1px solid var(--color-text-default) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
  text-decoration: none!important;
  font-family: var(--primary-font);
}

.notion-root .notion-text strong .notion-link:hover,
.notion-root .notion-text .notion-link strong:hover {
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  opacity: 1 !important;
}

/* FOOTER */
.super-footer {
  /* border-top: 1px solid var(--color-border-default) !important; */
  border-top: none !important;
}

.super-footer.corners {
  padding: 40px 26px !important;
  gap: 60px !important
}

.super-footer.floating {
  border: 1px solid var(--color-border-default) !important;
}

.super-footer__links, .super-footer__footnote{
  font-size:0.85em!important;
}

.super-footer__footnote {
  font-weight: 300 !important;
}

.super-footer__links {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; 
  
}
.super-footer__link {
  padding: 5px 0; 
}


/* TOGGLES */
.notion-toggle {
  border: 1px solid var(--color-border-default) !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  text-align: left !important;
  transition: all .3s ease-in-out !important;
}

.notion-toggle__summary {
  margin: 0 !important;
  margin-left: 0px !important;
  padding: 18px !important;
  padding-right: 30px !important;
}

.notion-heading.toggle {
  padding: 0px !important;
}

.notion-toggle.open {
  background: var(--color-ui-hover-bg) !important;
  padding-bottom: 16px !important;
}

.notion-toggle.open .notion-toggle__content {
  border-top: 1px solid var(--color-border-default) !important;
}

.notion-toggle__content {
  padding-inline-start: 0px !important;
  border-top: 1px solid var(--color-border-default) !important;
  margin: 0px 20px 0px 20px !important;
  padding-top: 16px !important;
  transition: all .05s ease-in-out !important;
}

.notion-toggle__trigger {
  display: none !important;
}

.notion-toggle__content .notion-text__content {
  margin-bottom: 0px !important;
}

.notion-toggle:hover {
  background: var(--color-ui-hover-bg) !important;
}

.notion-toggle:before {
  position: absolute !important;
  font-weight: 100 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: .4 !important;
  content: "+" !important;
  top: 20px !important;
  right: 18px !important;
}

.notion-toggle.open:before {
  position: absolute !important;
  font-weight: 100 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: .4 !important;
  content: "-" !important;
  top: 20px !important;
  right: 18px !important;
}

.notion-toggle.open .notion-toggle__content {
  opacity: 1 !important;
  height: auto !important;
}

.notion-toggle.closed .notion-toggle__content {
  opacity: 0 !important;
  height: 0px !important;
  padding: 0 !important;
  display: block !important;
}

/*Toggles with TOC*/
.notion-toggle .notion-table-of-contents {
  border: none!important;
  /*padding:0!important;*/
}
.notion-toggle:has(.notion-table-of-contents) { /*TODO: not sure if this is needed*/
  box-shadow: none!important;
  border: none;  
  background: transparent;
}
.notion-table-of-contents .notion-link:has(.notion-semantic-string[style="margin-inline-start: 48px;"]) {
  display:none !important;
}


/* CALLOUT */
.notion-callout {
  min-height: auto !important;
}
.notion-callout-content {
  min-height: auto !important;
  overflow: visible !important;
}
.notion-callout.color-default {
  border:none !important;
  padding:0;
}
.notion-callout__content:has(h3), .notion-callout__content:has(h2), .notion-callout__content {
  margin-inline-start: 0 !important;
}

/*Callouts with toggles*/
.notion-callout .notion-toggle{
  padding:0.5em!important;
  border:none!important;
}
.notion-callout .notion-toggle .notion-semantic-string, 
.notion-callout .notion-toggle span {
  color: var(--color-gray)!important;
}
.notion-callout .notion-toggle.open {
  /*padding:1em!important;*/
  border: var(--border-thickness-layout) solid var(--color-border-default)!important;
}



/* BOOKMARK */
.notion-bookmark {
  width: 100%; 
  max-width: 100%;
  overflow: hidden;
  min-height: auto !important;
}


/* TODO */
.notion-checkbox,
.notion-checkbox svg {
  border-radius: 2px !important;
}

.notion-to-do__title.checked del {
  text-decoration: none !important;
}

.notion-checkbox.checked>svg {
  fill: var(--color-bg-default) !important;
}

/* DB View switcher code*/

.notion-dropdown__menu-header,
.notion-dropdown__button svg:first-of-type {
  display: none !important;
}

.notion-dropdown {
  width: 100% !important;
}

.notion-dropdown__button {
  justify-content: space-between !important;
  width: 100% !important;
  border: 1px solid var(--color-border-default) !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

.notion-dropdown__menu-wrapper {
  margin-bottom: 8px !important;
}

.notion-dropdown__menu {
  width: 100% !important;
  border-radius: 8px !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 12%) !important;
  background: var(--color-bg-default) !important;
  border: 1px solid var(--color-border-default) !important;
  margin-top: 5px !important;
}

.notion-dropdown__option-list {
  padding: 0px !important;
  flex-wrap: wrap !important;
}

.notion-dropdown__option {
  padding: 5px 16px !important;
  height: 50px !important;
}

.notion-dropdown__option p,
.notion-dropdown__button-title {
  font-size: 16px !important;
  font-weight: 300 !important;
}

.notion-dropdown__button:hover {
  background: transparent !important;
}

.notion-dropdown__option-icon {
  display: none !important;
}


/* CODE */
.notion-code pre {
  border: 1px solid var(--color-border-default) !important;
}

.token.selector {
  color: #2a2a2a !important;
}

.token.property {
  color: #909090 !important;
}

.token.important {
  color: var(--primary-color) !important;
}


/* LIGHTBOX */
.lightbox-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.close-lightbox {
  position: absolute;
  top: 0;
  right: 0;
  width: 67px;
  padding: 8px;
  padding-bottom: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  font-size: 2rem;
  background: var(--navbar-background-color);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-default);
  border-radius: 500px;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.close-lightbox:hover {
  background: var(--color-ui-hover-bg);
}

.lightbox-image {
  width: auto;
  max-height: 90%;
  max-width: 80%;
  height: auto;
  z-index: 100;
  border-radius: 12px;
}




/* QUOTES */
.notion-quote {
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
  margin-top: 25px !important;
  padding-left: 24px !important;
  letter-spacing: -.3px !important;
  border-color: var(--color-border-default) !important;
}
.notion-quote h3 { 
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.5em 0;
  color: inherit;
  font-style: normal; 
}
.notion-quote .notion-heading {
  color: inherit; 
  font-style: normal;
}


/* VIDEOS */
.notion-video__content video {
  /*margin-left: 0% !important;*/
  width: 100% !important;
  max-width: 150% !important;
  border-radius: var(--border-radii-layout) !important;
}


/* IMAGES */
img {
  background-color: var(--color-asset-background) !important;
}
article .notion-image img  {
 border-radius: var(--border-radii-layout) !important;
}

/*Captions*/
.notion-caption,
.notion-video-caption,
.notion-image-caption {
 text-align: left !important; 
 padding-left:8px !important;
 padding-right:8px !important;
}
.notion-caption {
 font-size:0.8rem;
 line-height: 1.25rem;
}
.notion-caption,
figcaption.notion-caption,
.notion-image-caption {
 background-color: transparent !important;
 padding: 0 !important;
 margin-top: 8px !important;
}

/*Hover*/
.notion-image.page-width {
 position: relative !important;
 cursor: pointer;
}
.close-lightbox {
 padding: 0;
}

/* EMBEDS */

.notion-embed {
  padding: 1rem !important;
  border-radius: var(--border-radii-layout) !important;
  background: var(--color-asset-background) !important;
}

/* Desktop styles */
@media all and (min-width: 624px) {

  /* Hide default dropdown */
  .notion-dropdown__button,
  .notion-dropdown__menu-header {
    display: none !important;
  }

  /* Dropdown Initial State */
  .notion-dropdown__menu.initial-state {
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Remove animations */
  .notion-dropdown__menu.animate-in.animate-out,
  .notion-dropdown__menu.animate-in,
  .notion-dropdown__menu.animate-out {
    animation: none !important;
  }

  /* Restyle menu */
  .notion-dropdown__menu {
    background: transparent !important;
    box-shadow: unset !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
    border: none !important;
  }

  /* Menu wrapper */
  .notion-dropdown__menu-wrapper {
    margin-bottom: 12px !important;
    position: relative !important;
  }

  /* Item hover */
  .notion-dropdown__option:hover {
    background: var(--color-text-default) !important;
    border: 1px solid var(--color-text-default) !important;
  }

  /* Text hover style*/
  .notion-dropdown__option:hover p,
  .notion-dropdown__option:hover svg {
    color: var(--cta-text-hover-color) !important;
  }

  /* Item margin*/
  .notion-dropdown__option {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--cta-border-radii) !important;
    transition: all .2s ease-out !important;
    height: auto !important;
    padding: 8px 12px !important;
  }

  /* Item text */
  .notion-dropdown__option p {
    transition: color .2s ease-in-out !important;
    color: var(--color-text-default) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }

  .notion-dropdown__option-list {
    display: flex !important;
    padding: 0px !important;
    height: auto !important;
    gap: 8px !important;
  }

  .notion-dropdown__option.active {
    background: var(--color-bg-gray) !important;
    border: 1px solid transparent !important;
  }

  .notion-dropdown__option.active p {
    color: var(--color-text-default) !important;
  }
}


/* UPDATED ARTICLE LAYOUT STYLES */
#page-utc, 
#page-android-studio-system-trace, 
#page-android-studio-charting-colors, 
#page-android-compose-components {
  .notion-page__properties {
    border-bottom: none !important;
    padding: 48px 0 36px !important;
  }
  
  .notion-divider {
      border-bottom: var(--border-layout) !important;
      margin-top: 8rem !important;
      margin-bottom: 0 !important; 
  }
  .notion-column-list .notion-column .notion-divider {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    border-color: var(--color-border-dark) !important;
  }

  .notion-root > div:nth-child(5).notion-toggle   {
      margin-top: calc(var(--column-spacing)*2) !important;
      margin-top: var(--column-spacing) !important;
  
  }
  
  .notion-toggle-heading-2, .notion-column .notion-toggle {
      transition-property: background !important;
      transition-duration: 1.2s !important;
  }
  
  
  .notion-toggle-heading-2 {
      background-color: var(--color-card-bg) !important;
      border: none !important;
      padding: 1rem !important;
  }
  .notion-column .notion-toggle {
    background-color: var(--cta-bg-hover-color) !important;
    border: none !important;
    margin-top:calc(var(--column-spacing)/2);
  }

  .notion-toggle-heading-2.open, 
  .notion-column .notion-toggle.open {
      border: none !important;
      border-radius: 0 !important;
      border-top: var(--border-layout) !important;
      background-color: transparent !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
  .notion-toggle-heading-2 h2 {
      transition: text-transform 0.3s ease-in-out !important;
  }
  
  .notion-toggle-heading-2.open h2 {
      text-transform: uppercase !important;
      font-weight: 700 !important;
      letter-spacing: -2%;
  }

  .notion-column .notion-toggle .notion-toggle__summary {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .notion-column .notion-toggle .notion-toggle__summary span {
    font-size: 0.875rem !important;
  }
  
  .notion-toggle-heading-2 .notion-toggle__summary,
  .notion-column .notion-toggle .notion-toggle__summary {
      transition: padding 0.3s ease-in-out !important;
  }
  .notion-toggle-heading-2.open .notion-toggle__summary, 
  .notion-column .notion-toggle.open .notion-toggle__summary {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
  .notion-toggle-heading-2.open .notion-toggle__content, 
  .notion-column .notion-toggle.open .notion-toggle__content {
      border-top: none !important;
      margin: 0 !important;
  }
  .notion-toggle-heading-2 .notion-toggle__content > .notion-divider {
      margin-top: 4rem !important;
  }
  .notion-toggle-heading-2 .notion-toggle__content > div:nth-child(2).notion-divider {
      border-bottom: none !important;
  }
  .notion-toggle-heading-2 .notion-toggle__content {
      /* margin: 0 !important; */
  }
  
  .notion-quote {
      border-inline-start: none !important;   
      text-align: center; 
  }
  .notion-quote h3 {
      font-size: 1.6rem;
      padding-left: 1rem;
      padding-right: 1rem;
  }

  
  @media (max-width: 880px) {
    .notion-quote h3 {
      font-size: 1.4rem !important;
      padding-left: 0;
      padding-right: 0;
    }
    .notion-column-list .notion-column .notion-divider {
      display: none !important;
    }
  }
}