superstylesheet.css

/*---------  Root (tweaked) -> added most things to theme blackout  ---------*/


:root {
    --color-card-bg: transparent !important;
    --bg-opacity: .8 !important;
    --max-width: 900px !important;
    --theme-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 90%) !important;
    --border-radius: 15px !important;
    --color-bg-default: #000000 !important;
    --theme-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 98%) !important;
    --color-text-default: #FFFFFF !important;
    --color-hover-default: rgba(125, 125, 125, 0.4) !important;
    --color-bg-glass-default: rgb(34 34 34/70%) !important;
    --color-border-default: #C4C4C4 !important;
    --color-cta-background: #f2f2f2 !important;
    --color-navbar-cta-text: #ffffff !important;
    --color-navbar-cta-bg: #1B8BFF !important;
    --scrollbar-color: #383838 !important;
    --color-text-blue: #121BFA !important;
    --color-text-brown: #ffffff !important;
}



body {
    position: relative !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}


/*---------  Styling (native) ---------*/


.notion-divider {
    border-color: rgba(255, 255, 255, .15) !important;
    margin-bottom: 20px !important;
}

.footer-cover {
    background-color: var(--color-bg-default) !important;
    background: var(--footerCover) !important;
    background-size: cover !important;
    position: absolute !important;
    z-index: -1 !important;
    min-width: 100% !important;
    width: 100% !important;
    min-height: 25% !important;
    height: auto !important;
    opacity: 1 !important;
    bottom: 0 !important;
    left: 0 !important;
    opacity: var(--bg-opacity) !important;
    transform: rotate(180deg) !important;
    border: 0 !important;
}

.super-content {
    padding-bottom: 10px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    max-width: var(--max-width) !important;
}

.super-navbar {
    border-radius: var(--border-radius) !important;
    margin: 10px !important;
    width: auto !important;
    top: 1.4em !important;
    background: var(--color-bg-glass-default) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    width: calc(100% - 40px) !important;
    margin: 20px auto !important;
    height: 70px !important;
    max-width: calc(var(--max-width) + 200px) !important;
}

.super-navbar__menu-wrapper {
    padding-right: 0px !important;
    padding-top: 5px !important;
}

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

.super-navbar__item {
    padding: 15px 20px !important;
}

.super-navbar__menu-wrapper {
    width: auto !important;
}

.super-navbar__cta {
    color: var(--color-navbar-cta-text) !important;
    background: var(--color-navbar-cta-bg) !important;
}

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

.notion-header__cover.has-cover {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    margin-top: -20px !important;
    height: 60vh !important;
    max-height: 60vh !important;
    z-index: -2 !important;
    opacity: var(--bg-opacity) !important;
}

.notion-header__cover.no-cover {
    display: none !important;
}

.notion-header__cover:after, .footer-cover:before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    bottom: -2px !important;
    left: 0 !important;
    background-image: var(--theme-gradient) !important;
    width: 100% !important;
    height: 100% !important;
}


h1.notion-heading {
    font-size: 44px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}



h2.notion-heading {
    font-size: 36px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

h3.notion-heading {
    font-size: 24px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}


.notion-toggle.bg-gray, .notion-collection__header {
    display: none !important;
}

.notion-collection {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.notion-collection-list, .notion-collection-gallery {
    border: 0 !important;
}

.notion-collection-list .notion-property__date {
    margin-right: 10px !important;
    opacity: .4 !important;
}

.notion-collection-list .notion-icon__page {
    display: none !important;
}

.notion-collection-list__item {
    padding: 9px !important;
    border: 1px solid var(--color-border-default);
    border-radius: var(--border-radius) !important;
    transition: background .2s ease !important;
    margin: 5px 0px !important;
}

.notion-collection-list .notion-property__title > .notion-semantic-string {
    max-width: 400px !important;
    white-space: initial !important;
}

.notion-collection-list__item:hover {
    background-color: var(--color-hover-default) !important;
}

.notion-property__title__icon-wrapper {
    margin-right: 20px !important;
}

.notion-property__title__icon-wrapper, .notion-property__title__icon-wrapper * {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 2px !important;
    overflow: unset !important;
}

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

.notion-collection-list__item-property .notion-property__select {
    text-transform: uppercase !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
}

.notion-semantic-string .date {
    color: var(--color-text-default) !important;
}

.notion-collection-gallery .notion-property__title__icon-wrapper {
    display: none !important;
}

.notion-collection-gallery.large {
    display: flex !important;
    flex-direction: column !important;
}

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

.notion-collection-gallery.small {
    display: flex !important;
    color: var(--color-text-default) !important;
}

.notion-collection-gallery.small .notion-collection-card {
    padding: 0px !important;
}

.notion-collection-gallery.small .notion-property__title {
    padding: 12px !important;
    font-size: 14px !important;
}

.notion-collection-gallery.small .notion-collection-card__content {
    padding: 0px !important;
    font-size: 16px !important;
}

.notion-collection-gallery.small .notion-property__date {
    margin-bottom: 15px !important;
    font-size: 14px !important;
    opacity: .6 !important;
}

.notion-collection-gallery.small .notion-property__text .notion-semantic-string {
    overflow: unset !important;
    white-space: pre-wrap !important;
}

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

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

.notion-collection-card__cover.large, .notion-collection-card__cover.large > span, .notion-collection-card__cover.large img {
    height: 300px !important;
    max-height: 300px !important;
}

.notion-collection-card__cover.medium, .notion-collection-card__cover.medium > span, .notion-collection-card__cover.medium img {
    height: 280px !important;
    max-height: 280px !important;
}

.notion-collection-card {
    width: 100%;
    height: 100%;
    box-shadow: none !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--color-border-default) !important;
}

.notion-collection-card:hover {
    background: var(--color-hover-default) !important;
    cursor: pointer !important;
}

.notion-collection-card .notion-property__title {
    padding: 25px !important;
    font-size: 1.2rem !important;
}

.notion-property__title .notion-property__title__icon-wrapper {
    top: 2px !important;
}

@media all and (max-width: 764px) {
    .notion-collection-list__item-content {
        display: none !important;
    }

    .notion-collection-list__item .notion-property__title {
        margin-bottom: 0px !important;
    }

    .super-content {
        padding: 0px 20px !important;
    }

    .notion-collection-list {
        display: flex !important;
    }

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

    .notion-root > h1.notion-heading:first-of-type {
        font-size: 32px !important;
        margin-bottom: 10px !important;
        margin-top: 0px !important;
    }

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

    .notion-collection-list .notion-property__select {
        display: none !important;
    }

    .notion-property__title__icon-wrapper {
        margin-right: 15px !important;
    }

    .notion-collection-list__item .notion-property__title .notion-semantic-string {
        margin-inline-end: 6px !important;
    }

    .notion-collection-card__cover.large, .notion-collection-card__cover.large > span, .notion-collection-card__cover.large img {
        height: 200px !important;
        max-height: 200px !important;
    }

    .notion-collection-card__cover.medium, .notion-collection-card__cover.medium > span, .notion-collection-card__cover.medium img {
        height: 200px !important;
        max-height: 200px !important;
    }
}

.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link, .notion-text .notion-text__content .notion-semantic-string span .notion-link strong {
    margin: 20px 0px !important;
    padding: 10px 15px !important;
    border-radius: var(--border-radius) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    justify-content: center !important;
    transition: background .2s ease-in-out !important;
    background: var(--color-cta-background) !important;
    color: var(--color-cta-text) !important;
}

.notion-caption {
    color: var(--color-text-default) !important;
    opacity: .5 !important;
}

.highlighted-color .color-gray {
    color: var(--color-text-default) !important;
    opacity: .5 !important;
}

pre {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--border-radius) !important;
}

pre, code {
    background: var(--color-bg-default) !important;
    color: var(--color-text-default) !important;
    font-size: 14px !important;
    text-shadow: none !important;
}

code > span {
    font-weight: normal !important;
}

.notion-quote {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--border-radius) !important;
    padding: 20px !important;
}

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

.notion-checkbox.checked {
    background: var(--color-border-default) !important;
}

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

.notion-callout {
    border-radius: var(--border-radius) !important;
    padding-left: 18px !important;
}

.notion-image img, .notion-image {
    border-radius: 5px !important;
}

.notion-header__icon-wrapper.has-icon {
    display: none !important;
}

::-moz-selection {
    background: var(--color-text-default) !important;
    color: var(--color-bg-default) !important;
}

::selection {
    background: var(--color-text-default) !important;
    color: var(--color-bg-default) !important;
}

html ::-webkit-scrollbar {
    width: 10px !important;
    background: var(--color-bg-default) !important;
    padding: 2px !important;
    margin: 3px !important;
}

html ::-webkit-scrollbar-thumb {
    width: 10px !important;
    border-radius: 10px !important;
    margin: 2px !important;
    background: var(--scrollbar-color) !important;
}

html::-webkit-scrollbar-track {
    padding: 2px !important;
    margin: 5px !important;
    margin-right: 2px !important;
}

@-webkit-keyframes dropdown-animation-in {
    0% {
        opacity: 0;
        transform: translateY(-5%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdown-animation-in {
    0% {
        opacity: 0;
        transform: translateY(-5%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes dropdown-animation-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        z-index: -1;
        opacity: 0;
        transform: translateY(-5%) scale(0.95);
    }
}

@keyframes dropdown-animation-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        z-index: -1;
        opacity: 0;
        transform: translateY(-5%) scale(0.95);
    }
}

.notion-dropdown__menu-header, .notion-dropdown__option-icon, .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: 25px !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: 20px !important;
}

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

@media all and (min-width: 624px) {
    .notion-dropdown__button, .notion-dropdown__menu-header, .notion-dropdown__option-icon {
        display: none !important;
    }

    .notion-dropdown__menu.initial-state {
        z-index: 1 !important;
        opacity: 1 !important;
        transform: none !important;
    }

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

    .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;
    }

    .notion-dropdown__menu-wrapper {
        margin-bottom: 0px !important;
        position: relative !important;
    }

    .notion-dropdown__option:hover {
        background: rgba(125, 125, 125, .4) !important;
    }

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

    .notion-dropdown__option {
        margin: 10px 10px;
        border: 1px solid var(--color-border-default) !important;
        border-radius: 15px !important;
        transition: background .2s ease-in-out !important;
    }

    .notion-dropdown__option p {
        transition: color .2s ease-in-out !important;
        color: var(--color-grey) !important;
        font-size: 18px !important;
    }

    .notion-dropdown__option-list {
        display: flex !important;
        padding: 0 !important;
        margin-left: -10px !important;
    }

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

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

.theme-switch {
    cursor: pointer !important;
    opacity: .7 !important;
    width: 22px !important;
    height: 22px !important;
    transition: all .2s ease-in-out !important;
    margin-right: 25px !important;
    margin-left: -10px !important;
}








/*---------  Additions  ---------*/



.notion-text__content { 
      font-size: 20px;
      margin-bottom: 12px;
}

.notion-text-content { font-size: 2px}
.notion-list-item { font-size: 20px}

.notion-embed__container>iframe {

        background: transparent!important;

}


.notion-collection-list__item {
  border: 4px solid var(--color-border-default) ;} 


/*---------  CENTERED FOOTER ---------*/


[id="block-19c5a87a91f7484b80a65caddb5b1638"] {
    text-align: center !important;
}


/*---------  CALLOUT ---------*/

.notion-callout {
  padding: 24px!important;
  overflow: visible!important;
  border: 0px!important;
  margin: 0px!important;
  flex-grow: 1!important;
  background: #222222!important;
}

.notion-callout h1{
  text-align: center!important;

}

.notion-callout h2{
  text-align: center!important;

}

.notion-callout h3{
  text-align: center!important;
}

.notion-callout p{
  text-align: center!important;
}

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


.notion-callout__content {
      margin-inline-start: 0px!important;
      overflow: visible!important;
      width: 100%!important;
      margin: 0px!important;
      opacity:1!important;
}

.notion-image.normal{
  align-self: center !important;
}

/*---------  /Notion pill. stying ---------*/

.notion-pill {
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    margin: 3px 0 !important;
    font-weight: 600 !important;
    -webkit-margin-end: 6px !important;
    margin-inline-end: 6px !important;
    color: #1D1D1D !important;
}

:root {
--color-pill-gray: #e9e9e9 !important;
--color-pill-orange:#FFCB8F !important;
--color-pill-blue: #8C97FF !important; 
--color-pill-green: #9CFFA0 !important;
--color-pill-pink: #FF8957!important;
--color-pill-red: #FF8957!important;
}


/*---------  /Notion table heading color ---------*/

.notion-collection-table__head-cell {
  color: var(--color-text-default) !important
}

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

a.notion-link.link {
  color: #1B8BFF !important;
} 


.notion-collection-list__item {
    padding: 9px !important;
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--border-radius) !important;
    transition: background .2s ease !important;
    margin: 5px 0px !important;
}

.notion-collection-card__content .notion-property__text, .notion-collection-list__item-content .notion-property__text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    padding: 4px;
}

.notion-collection-card__content {
    font-size: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
}

.notion-collection-card .notion-property__title {
    padding: 12px !important; 
    font-size: 1.2rem !important;
}

.notion-image.normal {
    max-width: 100%; 
    align-self: center; !important;
}