the copy of css:
:root {
--column-spacing: 3rem !important;
--lift-radius: 20px !important;
--body-font: 16px !important;
--color-bg-default: #0E1012 !important;
--lrc-color-white: #F2F2F7;
--lrc-color-white2: #EBEBF0;
--lrc-color-white3: #E5E5EA;
--lrc-color-white4: #D8D8DC;
--lrc-color-white5: #D1D1D6;
--lrc-color-white6: #BCBCC0;
--lrc-color-white7: #AEAEB2;
--lrc-color-white8: #636366;
--lrc-color-white9: #363638;
--lrc-color-fullwhite: #FFFFFF;
--lrc-color-green: #BBF6D0;
--lrc-color-blue: #3C7EFF;
--lrc-color-grey: #1C1C1E;
--color-border-default: var(--lrc-color-white9) !important;
--color-bg-gray: var(--lrc-color-white9) !important;
--color-text-default: var(--lrc-color-white7) !important;
--color-text-blue: var(--lrc-color-blue) !important;
--collection-card-cover-size-small: calc(20%) !important;
--collection-card-cover-size-medium: calc(30%) !important;
--collection-card-cover-size-large: calc(45%) !important;
--lift-width: 1480px;
--layout-max-width: var(--lift-width)!important;
}
html.theme-light {
--footer-background-color: #24282B !important;
--footer-text-color: var(--main-light)!important;
}
html {
font-size: var(--body-font) !important;
}
body {
font-size: var(--body-font) !important;
font-style: normal;
}
.color-gray{
color: var(--lrc-color-white6);
}
.color-green{
color: var(--lrc-color-green);
}
/*------------------------*/
.super-content.max-width {
max-width: 1450px !important;
margin: auto !important;
}
.super-content {
padding-bottom: 4em !important;
}
/*------------------------*/
.notion-page {
border-radius: var(--lift-radius) !important;
align-content: stretch!important;
}
.notion-page > div {
border-radius: var(--lift-radius) !important;
display: flex;
transition: 300ms ease-in !important;
padding: 0.5em !important;
border: 1px solid var(--color-border-default) !important;
}
.notion-page__title.notion-semantic-string {
border-bottom: none !important;
}
/*------------------------*/
h1 {
font-family: Poppins !important;
font-size: 3.25rem !important;
line-height: 120% !important;
font-weight: 600 !important;
font-size: 4.5rem!important;
letter-spacing: -0.01em !important;
margin-top:2rem;
margin-bottom: 3rem !important;
max-width: var(--lift-width) !important;
color: var(--lrc-color-white3);
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
-webkit-animation: fadeIn 0.5s !important;
-moz-animation: fadeIn 0.5s !important;
-ms-animation: fadeIn 0.5s !important;
-o-animation: fadeIn 0.5s !important;
animation: fadeIn 0.5s !important;
}
h2 {
font-size: 2rem !important;
font-family: Poppins !important;
line-height: 1.5em !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
max-width: 900px !important;
margin-left: auto;
margin-right: auto;
color: var(--lrc-color-white3);
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
}
h3 {
font-style: normal !important;
font-size: 1.375rem !important;
font-family: Poppins !important;
line-height: 135% !important;
letter-spacing: 0.02em !important;
margin-bottom: 0.5rem;
max-width: 900px !important;
margin-bottom: 1.8em!important;
text-align: left !important;
font-weight: 600!important;
color: var(--lrc-color-blue) !important;
-webkit-animation: fadeIn 1s !important;
-moz-animation: fadeIn 1s !important;
-ms-animation: fadeIn 1s !important;
-o-animation: fadeIn 1s !important;
animation: fadeIn 1s !important;
}
p.notion-text{
line-height: 190% !important;
margin-bottom: 3rem !important;
margin-top:0.75rem !important;
padding-left:0.2rem;
font-family: mulish;
font-weight:400;
font-size:1.125rem!important;
letter-spacing: 0.02em!important;
color:var(--lrc-color-white7);
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
-webkit-animation: fadeIn 1.25s !important;
-moz-animation: fadeIn 1.25s !important;
-ms-animation: fadeIn 1.25s !important;
-o-animation: fadeIn 1.25s !important;
animation: fadeIn 1.25s !important;
}
img {
border-radius: var(--lift-radius) !important;
-webkit-animation: fadeIn 1.5s !important;
-moz-animation: fadeIn 1.5s !important;
-ms-animation: fadeIn 1.5s !important;
-o-animation: fadeIn 1.5s !important;
animation: fadeIn 1.5s !important;
}
.notion-image {
margin-bottom: 0rem !important;
margin-top:0rem!important;
}
video {
border-radius: var(--lift-radius) !important;
-webkit-animation: fadeIn 1.5s !important;
-moz-animation: fadeIn 1.5s !important;
-ms-animation: fadeIn 1.5s !important;
-o-animation: fadeIn 1.5s !important;
animation: fadeIn 1.5s !important;
}
.notion-image img {
width:100%!important;
object-fit: cover!important;
}
.notion-image:hover img{
transform:scale(1.01) !important;
opacity: 0.96 ;
}
.notion-image:hover img{
transition: all 0.2s ease-in-out !important;
}
.notion-embed__container iframe {
transition: transform 0.2s ease-in-out !important
}
.notion-embed__container iframe:hover {
transform: scale(1.01);
opacity: 0.96 ;!important
}
.notion-image.page-width{
width: 100% !important;
margin:auto;
max-width:900px!important;
}
.notion-column-list .notion-embed {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius:24px!important;
padding:4px;
}
.notion-embed__content {
border-radius: var(--lift-radius) !important;
overflow: hidden !important;
margin-bottom: 2rem !important;
}
/*------------------------*/
.notion-page {
border-radius: var(--lift-radius) !important;
}
.notion-page > div {
border-radius: var(--lift-radius) !important;
display: flex;
transition: 300ms ease-in !important;
padding: 0.5em !important;
border: 1px solid var(--color-border-default) !important;
}
.notion-heading {
padding: 0 !important;
}
.notion-embed__content {
border-radius: var(--lift-radius) !important;
overflow: hidden !important;
margin-bottom: 0rem !important;
}
/*------------------------*/
.bg-brown {
background-color: var(--color-bg-brown);
display: none;
}
.highlighted-background {
transition: 0.3s ease-in-out !important;
border-radius: 2px !important;
}
.highlighted-background.bg-green:hover {
opacity: 0.8 !important;
}
.highlighted-background a {
display: block !important;
text-align: center !important;
margin-top: 1em;
padding: 0.7em !important;
border: none !important;
opacity: 1 !important;
border-radius: var(--lift-radius) !important;
border: 2px solid var(--lrc-color-green) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.highlighted-background.bg-green a {
color: var(--lrc-color-green) !important;
background-color: transparent !important;
text-decoration:none!important;
}
.bg-green {
background-color: var(--lrc-color-grey) !important;
display:flex;
width:800px!important;
justify-content: space-between;
border-radius:100px;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
margin-top:4rem!important;
align-items:flex-start;
padding-left:5rem!important;
padding-right: 5rem!important;
padding-top:0.75rem!important;
padding-bottom:0.75rem!important;
}
.bg-green a {
display:block;
color:var(--lrc-color-white8)!important;
text-decoration: none !important;
font-size:1rem!important;
letter-spacing:0.01em;
line-height: 160%;
transition:background-color:0.2s ease-in-out, color 0.2s ease-in-out;
}
.bg-green a:hover {
color:var(--lrc-color-fullwhite)!important;
}
/*------------------------*/
.notion-bulleted-list,
.notion-numbered-list {
padding-bottom: 2em !important;
line-height: 160% !important;
margin-bottom: 1rem !important;
font-family: "mulish",Sans-Serif !important;
font-size:1rem!important;
letter-spacing: 0.01rem!important;
color:var(--lrc-color-white7);;
}
.notion-callout {
border-radius: var(--lift-radius) !important;
border: 0px solid var(--color-border-default) !important;
padding-left: 1.5em;
padding-right: 1.5em;
overflow: visible !important;
margin-bottom: 2em !important;
margin-top:0.5em;
}
.notion-callout__icon {
display:none!important;
}
.notion-callout.bg-blue-light.border {
display: flex;
align-items: flex-start;
background-color: var(--lrc-color-grey) !important;
text-align: left !important;
padding-left:2.125rem!important;
padding-right:1.875rem!important;
padding-top:2rem!important;
padding-bottom:2.25rem!important;
min-width: 200px;
}
.notion-callout.bg-blue-light.border h3 {
margin:0!important;
padding-top: 0.5rem!important;
}
.notion-callout.bg-blue-light.border p {
margin:0!important;
margin-top:0.875rem!important;
font-size:1rem!important;
letter-spacing: 0.04em!important;
line-height: 1.6em!important;
}
.notion-callout.bg-blue-light .notion-image img {
margin: auto;
margin-left:0!important;
padding-bottom:1rem;
width: 15%!important;
}
.notion-heading.notion-semantic-string .highlighted-color.color-default {
color: var(--lrc-color-blue) !important;
}
.notion-callout__content{
margin-inline-start:0px!important;
}
/*select all purple background callout*/
.bg-purple-light {
background-color: var(--color-bg-default)!important;
}
.notion-column{
justify-content:center;
}
.notion-callout.bg-purple-light.border {
display:flex;
justify-content:center!important;
}
.notion-callout.bg-purple-light.border .notion-callout__content {
display: flex;
flex-direction: column;
justify-content: center!important;
}
.notion-callout.bg-purple-light.border h3.notion-heading.notion-semantic-string {
font-family: Poppins !important;
font-size: 1.75rem!important;
letter-spacing: 0 !important;
font-weight: 600!important;
line-height: 1.5em!important;
color:var(--lrc-color-white3)!important;
margin-bottom:0!important;
padding-left: 0.625rem!important;
}
.bg-purple-light.border .notion-text {
font-family: mulish!important;
padding: 0.625rem!important;
margin-top: 0.5rem!important;
font-size: 1.125rem !important;
font-weight: 400;
letter-spacing:0.02em!important;
line-height: 1.6em !important;
color:var(--lrc-color-white7);
}
/*select all pink background callout - the styling for the project by and designer name*/
.bg-pink-light {
background-color: var(--color-bg-default)!important;
}
.notion-callout.bg-pink-light.border {
margin-bottom:2rem !important;
margin-top:2rem !important;
}
.notion-callout.bg-pink-light.border h3.notion-heading.notion-semantic-string {
background-color: var(--color-bg-default)!important;
}
.notion-callout.bg-pink-light.border .notion-callout__content .notion-semantic-string {
margin-left: 2rem;
font-size: 1rem;
letter-spacing: 0.03rem !important;
color: var(--lrc-color-white6);
font-weight: 300;
font-family: mulish!important;
line-height: 1.6;
display: block;
}
.notion-column:first-child .notion-callout.bg-pink-light.border .notion-callout__content {
display: flex;
justify-content: flex-end; /* Align the container to the right */
}
.notion-column:first-child .notion-callout.bg-pink-light.border .notion-callout__content .notion-semantic-string {
text-align: left; /* Keep the text inside left aligned */
margin-left: auto; /* Automatically determine left margin */
}
.notion-column:last-child .notion-callout.bg-pink-light.border .notion-callout__content .notion-semantic-string {
text-align: left;
margin-left: 0rem;
}
.notion-callout.bg-yellow-light.border {
background-color: transparent!important;
}
.notion-callout.bg-yellow-light.border .notion-column-list {
align-items: flex-start!important;
}
/*--------------------------*/
.notion-quote {
display: flex !important;
border-radius: var(--lift-radius) !important;
border: 0px solid var(--color-border-default) !important;
}
.notion-quote.bg-green{
letter-spacing:0.09em;
}
.notion-quote.bg-gray{
padding-bottom: 2.9em !important;
}
.notion-quote.bg-gray p {
margin-bottom: 0px !important;
font-size: 1.1em!important;
color:var(--lrc-color-white7);
}
.notion-caption{
margin-bottom: 0.1rem !important;
font-size: 0.8rem;
align-self: center!important;
color:var(--lrc-color-white8);
}
.notion-quote.bg-red {
background-color: var(--lrc-color-grey) !important;
border: none !important;
border-radius: 20px !important;
padding: 1.5rem !important;
/*select all quote with red background*/
}
.notion-quote.bg-red .notion-image img {
border-radius: 12px!important;
}
.notion-quote.bg-red .notion-column {
display: flex;
flex-direction: column!important;
justify-content: center!important;
padding-top:1.5rem!important;
/*center align vertically*/
}
.highlighted-color.color-red {
color: var(--lrc-color-fullwhite) !important;
font-family: Poppins;
font-weight: 500;
font-size: 2rem;
letter-spacing: 0.02em;
line-height: 1.5em;
/*select the h3 in red background quote*/
}
.notion-quote.bg-red .notion-heading {
padding-left:0.2rem!important;
}
.notion-quote.bg-red .notion-column:first-child {
padding-left:3.25rem!important;
padding-right:4rem!important;
gap:0rem!important
}
/* .notion-quote.bg-red .notion-image img {
min-height: 300p;*/
.notion-quote.bg-red .notion-text__content .highlighted-color.color-red {
/*select p in red background quote*/
color: var(--lrc-color-white7) !important;
font-family: mulish;
font-weight:400!important;
font-size: 1.18rem;
line-height:1.6em;
text-align: left !important;
}
.highlighted-color.color-blue .notion-link {
font-weight: 800;
text-decoration: none!important;
}
.notion-text.bg-green.notion-text__content.notion-semantic-string .notion-link {
color: var(--lrc-color-white7);
opacity:0.9;
transition: opacity;
}
.notion-text.bg-green.notion-text__content.notion-semantic-string .notion-link:hover{
color: var(--lrc-color-white5)!important;
opacity:1;
}
.notion-semantic-string .link {
text-decoration: none !important;
color:var(--lrc-color-blue);
font-weight: 600;
opacity:1;
transition: opacity!important;
}
.notion-semantic-string .link:hover {
opacity:0.8;
}
.notion-semantic-string .code {
color: var(--lrc-color-blue);
background-color: transparent;
font-size: 1.125rem; /* Responsive font size */
padding: 0;
text-decoration: none;
}
.highlighted-color.color-green {
color: var(--lrc-color-fullwhite);
}
.notion-heading.color-red.notion-semantic-string {
color:var(--lrc-color-white3)!important;
}
/*--------------------------*/
.notion-divider {
margin-bottom:3rem !important;
margin-top:2rem !important;
color: var(--lrc-color-white9);
width: 900px!important;
margin:auto;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
vertical-align: middle; /* Align icon with text */
}
/*-------------------*/
@media only screen and (max-width: 900px) {
.notion-column {
width: 100% !important;
margin-inline-start: 0 !important;
}
@media screen and (max-width: 900px) {
:root {
--body-font: 16px !important;
}
h1 {
font-size: 2rem !important;
}
h2 {
font-size: 1.5rem !important;
}
h3 {
font-size: 1.25rem !important;
}
.notion-quote.bg-red .notion-column:first-child {
padding: initial !important;
}
p {
font-size: initial !important;
padding-left: 0.625rem !important;
}
.bg-green {
display: none !important;
}
.notion-quote.bg-red h3 .highlighted-color.color-red {
font-size: 1.25rem !important;
padding-left: 0.4rem !important;
}
.notion-quote.bg-red p .highlighted-color.color-red {
font-size: initial !important;
}
.notion-quote.bg-red h3 {
padding: initial !important;
font-size: 1.25rem !important;
}
.notion-callout.bg-blue-light.border p {
padding: initial !important;
}
.notion-callout.bg-blue-light.border h3 {
padding: initial !important;
font-size: 1.25rem !important;
}
.notion-callout.bg-purple-light.border h3.notion-heading.notion-semantic-string {
font-size: 1.25rem !important;
}
}
.notion-heading {
padding-left: 0.625rem !important;
}
.notion-callout.bg-purple-light.border h3.notion-heading.notion-semantic-string {
padding: initial !important;
padding-left: 0.625rem !important;
font-size: 1.25rem !important;
}
.notion-callout.bg-purple-light.border .notion-callout__content p {
font-size: initial !important;
}
.notion-callout.bg-pink-light.border .notion-callout__content .notion-semantic-string {
margin: auto !important;
text-align: center !important;
padding: 0 !important;
font-size: initial !important;
}
.notion-callout.bg-pink-light.border {
margin: 0 !important;
padding: 0 !important;
}
.notion-column .bg-yellow-light.border {
margin-left:0!important;
}
@media screen and (min-width: 1000px) {
.super-footer.floating {
width: calc(100% - 2em) !important;
max-width: calc(var(--lift-width) - 2em) !important;
align-self: center !important;
}
}the selected css:
/*root*/
:root {
--column-spacing: 1rem !important;
--lift-radius: 30px !important;
--body-font: 16px !important;
--lift-width:1480px !important;
--layout-max-width:1480px !important;
--border-radii-layout: var(--lift-radius) !important;
--dark-blue: #303437;
--main-blue: #4f586d;
--main-blue-faded: rgba(79, 88, 109, 0.8);
--orange: #b44f2a;
--icy: #f4f2f2;
--beige: #f2eee9;
--dark-green: #988f7a;
--dark-green-warm: #93865d;
--beige-faded: rgba(189, 178, 152, 0.3);
--blue-faded: rgba(78, 85, 91, 0.3);
--white90: rgba(255, 255, 255, 0.9);
--dark-grey: #2f3030;
--yellow: #e9b956;
--main-light: #edeeee;
}/*base size*/
html {
font-size: var(--body-font) !important;
}
body {
font-size: var(--body-font) !important;
font-style: normal;
}
/*composition*/
.super-content.max-width {
max-width: 1480px !important;
margin: auto !important;
}
.super-content {
padding-bottom: 4em !important;
}
/*typeface and animation*/
/*h1 is the title on the very top*/
h1 {
font-family: Poppins !important;
font-size: 2.986rem !important;
line-height: 115% !important;
font-weight: 700 !important;
letter-spacing: -0.022em !important;
margin-top: 2.25rem;
margin-bottom: 1rem;
max-width: var(--lift-width) !important;
color: var(--lrc-color-white3);
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
-webkit-animation: fadeIn 0.5s !important;
-moz-animation: fadeIn 0.5s !important;
-ms-animation: fadeIn 0.5s !important;
-o-animation: fadeIn 0.5s !important;
animation: fadeIn 0.5s !important;
}
/*h2 is the section title*/
h2 {
font-size: 2.488rem !important;
font-family: Mulish !important;
line-height: 115% !important;
font-weight: 700 !important;
letter-spacing: -0.022em !important;
margin-top: 2.25rem !important;
margin-bottom: 1rem !important;
max-width: 900px !important;
color: var(--lrc-color-white3);
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
}
/*h3 is the block content title, or flexible titles, big copies*/
h3 {
font-style: normal !important;
font-size: 1.44rem !important;
font-family: Mulish !important;
line-height: 115% !important;
letter-spacing:-0.022em !important;
margin-bottom: 2.25rem;
margin-bottom: 1rem!important;
text-align: left !important;
font-weight: 700!important;
max-width: 900px !important;
color: var(--lrc-color-blue) !important;
-webkit-animation: fadeIn 1s !important;
-moz-animation: fadeIn 1s !important;
-ms-animation: fadeIn 1s !important;
-o-animation: fadeIn 1s !important;
animation: fadeIn 1s !important;
}
p {
line-height: 160% !important;
margin-bottom: 1rem !important;
margin-top:1rem !important;
font-family: mulish;
font-weight:500;
font-size:1rem!important;
color:var(--lrc-color-white7);
display:block;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-block-start:1em;
margin-block-end:1em;
margin-inline-start:0px;
margin-inline-start:0px;
-webkit-animation: fadeIn 1.25s !important;
-moz-animation: fadeIn 1.25s !important;
-ms-animation: fadeIn 1.25s !important;
-o-animation: fadeIn 1.25s !important;
animation: fadeIn 1.25s !important;
}/*the cover video*/
#block-10dce5f90a3e80db87b1c70f9f1b5bb1 .notion-video__content video {
width: 200%;
margin-left:auto;
margin-right:auto;
}
/*video and image hover effects*/
img, video {
border-radius: var(--lift-radius) !important;
-webkit-animation: fadeIn 1.5s !important;
-moz-animation: fadeIn 1.5s !important;
-ms-animation: fadeIn 1.5s !important;
-o-animation: fadeIn 1.5s !important;
animation: fadeIn 1.5s !important;
}
/* Styles Specific to Images within .notion-image */
.notion-image img {
width: 100% !important;
max-width: 1080px!important;
object-fit: cover !important;
}
.notion-image.page-width > figcaption {
max-width:900px;
padding-top:1rem;
}
.notion-image:hover img {
transform: scale(1.01) !important;
opacity: 0.96;
transition: all 0.2s ease-in-out !important;
}
/* Styles Specific to Videos within .notion-video */
.notion-video video {
width: 100% !important;
object-fit: cover !important;
transition: all 0.2s ease-in-out !important;
}
.notion-video:hover video {
transform: scale(1.01) !important;
opacity: 0.96 !important;
}
/*callout icon and boarder cancel*/
.notion-callout.bg-pink-light.border {
border: none !important;
}
.notion-callout__icon {
display: none;
}
/*toggle switch headings (in article use H3*/
.notion-toggle__trigger_icon {
display:none;
}
.notion-toggle-heading-3 h3 {
font-size: 1.44rem !important;
font-family:Poppins !important;
font-weight: 600 !important;
}
/*grey callout box spacing and heading styles - use h3*/
.notion-callout__content {
margin-inline-start: 1rem;
}
.notion-callout {
margin:1rem;
max-width: 1080px!important;
margin-left:auto;
margin-right:auto;
}
.notion-callout__content p {
font-size: 0.8em;
}
.notion-toggle.open.notion-toggle-heading-3 .notion-callout__content h3 {
font-size:1.44rem !important;
font-family:Mulish !important;
font-weight:700 !important;
}
/*grey callout box color*/
html.theme-light {
--gray-h: 33!important;
--gray-s: 11%!important;
--gray-l: 89%!important;
}
.notion-callout__content p {
font-size: 1em!important;
opacity: 0.8;
}
/*theme and accent colors*/
html.theme-light {
--color-text-default: var(--main-blue) !important;
--color-bg-default: var(--beige) !important;
--color-bg-gray-light: var(--icy) !important;
--color-text-orange: var(--orange) !important;
--color-bg-orange: var(--orange) !important;
--color-text-blue: var(--main-blue) !important;
}
html.theme-dark {
--color-text-default: var(--main-light) !important;
--color-bg-default: var(--dark-blue) !important;
--color-bg-gray-dark: var(--dark-grey) !important;
--color-text-orange: var(--yellow) !important;
--color-bg-orange: var(--yellow);
--color-bg-orange-light: var(--yellow) !important;
--color-text-blue: var(--main-light) !important;
}
html.theme-light {
--color-text-default: var(--main-blue) !important;
--color-bg-default: var(--beige) !important;
--color-bg-gray-light: var(--icy) !important;
--color-text-orange: var(--orange) !important;
--color-bg-orange: var(--orange) !important;
--color-bg-yellow: var(--color-bg-default) !important;
--color-text-blue: var(--main-blue) !important;
--cta-text: var(--white90) !important;
--cta-bg: var(--orange) !important;
--sec-cta-stroke: var(--beige-faded);
--sec-cta-bg: var(--color-bg-default);
--sec-cta-text: var(--dark-green);
--button-stroke: var(--main-blue-faded);
}
html.theme-dark {
--color-text-default: var(--main-light) !important;
--color-bg-default: var(--dark-blue) !important;
--color-bg-gray-dark: var(--dark-grey) !important;
--color-text-orange: var(--yellow) !important;
--color-bg-orange: var(--yellow);
--color-bg-orange-light: var(--yellow) !important;
--color-bg-yellow: var(--color-bg-default) !important;
--color-text-blue: var(--main-light) !important;
--cta-text: var(--dark-grey) !important;
--cta-bg: var(--yellow) !important;
--sec-cta-stroke: var(--blue-faded);
--sec-cta-bg: var(--color-bg-default);
--sec-cta-text: var(--dark-green-warm);
--button-stroke: var(--white90);
}
/*code buttons and link*/
.notion-quote {
border-inline-start: none;
padding:0;
}
.notion-quote p {
margin-top: 0rem!important;
margin-left: 0rem!important;
}
.notion-semantic-string .link {
font-weight: 700;
text-decoration: none!important;
opacity:0.6;
transition: opacity;
color: var(--color-text-orange);
background-color: transparent;
font-size: 0.9rem;
padding: 0;
text-decoration: none;
}
.notion-semantic-string .link:hover {
color: var(--color-text-orange)!important;
opacity:1;
}
.notion-semantic-string .code {
color: var(--color-text-orange);
background-color: transparent;
font-size: 1.125rem; /* Responsive font size */
padding: 0;
text-decoration: none;/*styling of the table*/
.notion-table__cell .notion-semantic-string {
font-size: 0.9rem;
}
.notion-table__wrapper {
margin:2rem;
margin-top:0;
}/*default callout has no boarder, just used for left and right composition*/
.notion-callout.color-default.border {
border:none!important;
padding-top:0;
padding-bottom:0;
}/*further icons buttons added*/
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />