final css 0618

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

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

.super-navbar {
  display: none;
}


/*------------------------*/
.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: 1.75rem !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!important;
  font-family: mulish !important;
  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;
}



/* select all the yellow color background callouts */
.notion-callout.bg-yellow-light.border {
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  text-align:left!important;
}



.notion-column-list .notion-column:first-child .bg-yellow-light.border {
  margin-left: auto;
}

.notion-column-list .notion-column:last-child .bg-yellow-light.border {
  margin-right: calc((100vw - 76vw) / 2);
}


.notion-callout.bg-yellow-light.border .notion-callout__content .notion-semantic-string:first-child {
    font-size: 1.25rem; 
    color:var(--lrc-color-blue);
    font-family: mulish;
    letter-spacing: 0.04em !important;
    font-weight: 400; 
    
}


.notion-callout.bg-yellow-light.border .notion-callout__content .notion-heading {
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    font-family: mulish !important;
    letter-spacing: 0.02em !important;
    margin-bottom:1.5rem!important;
}

.bg-yellow-light.border .notion-text {
  text-align: left !important;
  margin-left:0!important;
  margin-bottom: 0!important;
}

#block-06046c5631a44ae18a0fc6f5c95b935c {
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    margin: 0; /* Remove any auto margin that might be centering the block */
    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: bold; 
    text-decoration: none; 
}

.notion-semantic-string .link{
  text-decoration: none!important;
}






/*--------------------------*/
.notion-divider {
  margin-bottom:3rem !important;
  margin-top:2rem !important;
  color: var(--lrc-color-white9);
  width: 900px!important;
  margin:auto;
}





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


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



}