Diane Portfolio
  • About Me
  • Contact

css

D1 original (L) original mona version 1 css(R)

now we should use

/*utilities*/
/*grey callout used for icy blocks if light theme*/


/*brown callout has only vertical distancing, transparent callout has only horizontal distancing*/

.notion-callout.bg-brown-light {
  background-color: transparent;
  padding:0;
  margin:0;
  margin: 1vh 0
    1vh 0
}
.notion-callout.color-default.border {
  border:none!important;
  padding-top:0;
  padding-bottom:0;
}
/*callout with special styles*/

/*for all callouts*/

.notion-callout__content p {
	font-size: 1em!important;
	opacity: 0.8;
}

.notion-callout__icon {
  display: none!important;
}
/*navbar blur*/

.super-navbar {
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  max-width: 900px !important;
  min-width: 20rem;
  font-famil

  width: calc(80% - var(--column-spacing)) !important;
  border-radius: 100px;
  top: 0.5rem !important;
  padding: 0 1rem;
  margin: auto;
}

Home

Work

Case Studies

Gallery

About Me

Contact Me

ruochen0421@yahoo.com

Designed by Diane Liu 2024

XDribbble

: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: 900pxpx) {
    .notion-column {
        width: 100% !important;
        margin-inline-start: 0 !important;
    }


@media screen and (max-width: 900pxpxpx) {
  :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;
}

.notion-callout.bg-gray-light.border {
  margin:0rem;
}






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



}
:root {
    --column-spacing: 2em !important;
    --lift-radius: 30px !important;
    --body-font: 18px !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-green: #BBF6D0;
    --lrc-color-blue: #89B8FF;
    
    
    --color-border-default: var(--lrc-color-white9) !important;
    
    --color-bg-gray: var(--dark-grey) !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: 1080px;
    --layout-max-width: var(--lift-width)!important;
  }
  


html { 
  font-size: var(--body-font) !important;
}

body { 
  font-size: var(--body-font) !important;
  font-family: "Poppins", sans-serif!important;
  font-weight: 400;
  font-style: normal;
}


.color-gray{
  color: var(--lrc-color-white6);
}
.color-green{
  color: var(--lrc-color-green);
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font  font-style: normal;
}


.mulish-regular {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}




/*------------------------*/

.super-content.max-width {
  max-width: var(--lift-width) !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-style: normal !important;
  font-family: Poppins!important;
  font-size: 3.25rem !important;
  line-height: 120% !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.5em !important;
  max-width: 900px !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: 1.8rem !important;
  font-family: poppins !important;
  line-height: 105% !important;
  letter-spacing: -0.01em !important;
  margin-top: 2.5em !important;
  margin-bottom: 1em !important;
  max-width: 900px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !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 {
  font-size: 1.375rem !important;
  font-family: poppins !important;
  line-height: 135% !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.5em !important;
  max-width: 900px !important;
  margin-bottom: 1.8em!important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--lrc-color-green);
  
  -webkit-animation: fadeIn 1s !important;
  -moz-animation: fadeIn 1s !important;
  -ms-animation: fadeIn 1s !important;
  -o-animation: fadeIn 1s !important;
  animation: fadeIn 1s !important;
  font-weight: 600 !important;
}

p.notion-text {
  line-height: 160% !important;
  margin-bottom: 1rem !important;
  padding-left:0.2em!important;
  font-family: mulish !important;
  font-size:1rem!important;
  letter-spacing: 0.01rem!important;
  color:var(--lrc-color-white6);
  max-width: 900px !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: 2rem !important;
  margin-top:0.5rem!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__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: 2rem !important;
}



/*------------------------*/

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


/*------------------------*/
.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: 1px 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__content{
  margin-inline-start:0px!important;

}

h3.notion-heading.notion-semantic-string{
  color:var(--lrc-color-green)!important;
  margin-bottom:1.5em!important;
}

/*-
.notion-heading.color-green.notion-semantic-string{
  margin-bottom: 0.5em !important;
}
  
.notion-text__content.notion-semantic-string{
  padding-bottom:0em !important;
}
*/

/*--------------------------*/
.notion-quote {
  font-size: 0.8em !important;
  font-family: var(--body-font);
  width: 100% !important;
  margin: 1rem auto !important;
  padding: 1em 1em 1em 1em !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-radius: var(--lift-radius) !important;
  border: 1px 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;
  font-weight: 500;
  letter-spacing: 0.02em!important;
  align-self: center!important;
  color:var(--lrc-color-white8);
}


.notion-root {
  margin-bottom:0!important;
  padding-bottom:0!important;
}


html.theme-light {
  --footer-background-color: #24282B !important;
  --footer-text-color: var(--main-light)!important;
  


/*-------------------*/

@media screen and (max-width: 880px) {
  :root {
    --body-font: 16px !important;
    --collection-card-cover-size-small: 100% !important;
    --collection-card-cover-size-medium: 100% !important;
    --collection-card-cover-size-large: 100% !important;
  }

h1 {
  font-size: 2rem !important;
}

h2 {
  font-size: 1.5rem !important;
}

h3 {
  font-size: 1.25rem !important;
}

.notion-column {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.notion-quote {
  padding: 1em !important;
}




@media screen and (min-width: 880px) {
.super-footer.floating {
  width: calc(100% - 2em) !important;
  max-width: calc(var(--lift-width) - 2em) !important;
  align-self: center !important;
}

:root {
  --column-spacing: 3em !important;
  --lift-radius: 24px !important;
  --body-font: 16px !important;
  
  --color-bg-default: #0E1012 !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;
    
    --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;      
    
		--layout-max-width: 1440px !important;
	  --reading-max-width: 700px !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-text-blue: var(--main-blue) !important;
}



html.theme-light {
  --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);
}


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);

}
    
    
    /*page width*/
    
.super-content.max-width {
  max-width: 1450px !important;
  margin: auto !important;
}

    
    /*fonts titles*/
/*the article title*/

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 {
  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;
  width:100%;
  margin:0;
  -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;
}


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


/*media hover style*/

.notion-image:hover img{
  transform:scale(1.01) !important;
  opacity: 0.96 ;
}
.notion-image:hover img{
  transition: all 0.2s ease-in-out !important;
}
/* mobile*/
@media (max-width:880px) {


/*adjust font sizes and paddings*/
  h1 {
    font-size:2rem!important;
  }
  
  h2 {
    font-size:1.5rem !important;
  }
  
  h3 {
    font-size:1.25rem !important;
    margin-bottom:0.5rem!important;
  }  
  
  p {
    margin-bottom:2rem!important;
  }
  
  .notion-divider {
    margin: 1em 0 !important;
  }
  .notion-column {
    margin-bottom:0!important;
    padding: 0!important;
  }
  

.notion-callout {
  padding: 0!important;
  padding-top:2rem;
  padding-bottom:2rem;
  margin:0!important;
  margin-top:1rem;
  margin-bottom:1rem;
  margin-inline-start:0px;
  margin-inline-end:0px;
  
}

.notion-callout__content {
  margin:0;
}

.notion-callout.bg-gray-light.border {
  padding:1.25rem!important;
  padding-top:2rem!important;
  padding-bottom:1rem!important;
  margin-top:1rem!important;
}

  :root {
      --lift-radius: 24px !important;
      --body-font: 16px !important;
      
}