11/14 css

the mona version 2:

:root {
  --column-spacing: 1em !important;
  --lift-radius: 20px !important;
  --body-font: 16px !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;
  
  --accent-blue: #3385ff;
  --color-bg-blue: var(--main-blue-faded)!important;

  --color-bg-default: #0E1012 !important;
  
	--layout-max-width: 1440px !important;
	--reading-max-width:720px !important;
	--reading-min-width:490px !important;


	
	
    }


html.theme-light {
  --color-text-default: var(--main-light) !important;

  --color-bg-gray-light: 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);
  
  
  --color-text-default-light: var(--main-light)!important;
  --color-bg-gray: var(--dark-grey) !important;
  --color-text-gray: rgb(164,167,168) !important;
  

  --navbar-text-color: #EDEEEE !important;
  
  
  
}


html.theme-dark {
  --color-text-default: var(--main-light) !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);
  
  --color-text-gray: rgb(164,167,168) !important;



}

/*navbar */
.super-navbar {
  background: rgba(25, 25, 25, .7) !important;
}

.super-footer {
  background: #24282B !important;
}






/*fonts and media*/

h1 {
  
  font-family: Poppins !important;
  line-height: 115% !important;
  font-weight: 600 !important;
  font-size: 2.9rem!important;
  letter-spacing: -0.02em !important;
  margin-top:2rem;
  margin-bottom: 3rem !important;
  max-width: var(--lift-width) !important;
  color: var(--lrc-color-white3);
  text-align: left !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.02em !important;
  text-align:center;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  max-width: var(--reading-max-width) !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(--main-light)!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: 180% !important;
  margin-bottom: 0rem !important;
  margin-top:0rem !important;
  padding-left:0rem;
  font-family: mulish;
  font-weight:400;
  font-size:1.04rem!important;
  letter-spacing: 0.03em!important;
  max-width: var(--reading-max-width) !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;
}

figcaption {
  padding:2px 8px!important;
  opacity:60%;
  font-size:1rem;
  letter-spacing: 0.02em;
  
}




img {
  border-radius: var(--lift-radius) !important;
  width:100%;
  max-width: var(--reading-max-width)!important;
  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;
  max-width: var(--reading-max-width)!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-video {
  margin:0;
  text-align:left;
}



/*media hover style*/
img:hover {
  transition: all 0.2s ease-out !important; 
  transform: scale(1.01) !important;
  opacity: 0.96; 
}

video:hover {
  transition: all 0.2s ease-out !important; 
  transform: scale(1.01) !important;
  opacity: 0.96; 
}



/*all callouts*/

.notion-callout {
  border-radius: var(--lift-radius) !important;
  border: transparent!important;
}
  

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

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

.notion-callout__content {
  margin:0;
}

.notion-callout.bg-brown-light .notion-callout__content p {
  opacity:0.8;
}



/*limit all reading content width*/
.notion-column {
  max-width: var(--reading-max-width);
}
/*keep toc to the edge*/
.notion-root .notion-column-list {
  justify-content:center;

}


/*utility callouts*/

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

/*brown callout center aligned*/
.notion-callout.bg-brown-light .notion-callout__content .notion-column-list .notion-column {
  flex-direction: row!important;
  align-items: stretch !important;
}

/*text in grey callout in center*/
.notion-callout.bg-brown-light .notion-callout__content .notion-column-list .notion-column .notion-callout.bg-gray-light .notion-callout__content {
    justify-content: ;
}

/*margin of grey callout*/
.bg-gray-light .notion-callout__content {
  margin:0.8rem 0.8rem 1rem 0.8rem;
}
.bg-gray-light .notion-callout__content h3 {
  margin-top: 8px;
}

/* list p*/
.notion-list-item {
  margin:0;
  padding:0;
  opacity:0.8;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
}

.notion-bulleted-list .notion-list-item.notion-semantic-string {
  margin-bottom:1rem;
}

.notion-numbered-list .notion-list-item.notion-semantic-string {
  margin-bottom:1rem;
}

.notion-numbered-list .notion-list-item.notion-semantic-string:last-child {
  margin:0;
}

.notion-bulleted-list .notion-list-item.notion-semantic-string:last-child {
  margin:0;
}




/*ToC and title position*/

#block-13ece5f90a3e8042b12bdec41eddf958 {
  z-index: 19; 
  position: sticky!important;
  position: -webkit-sticky;
  top:25vh;
  height:8vh;
}


#block-6aaa487186e64ca0801c60f675e288e7 {
  position:relative;
}

/*Toc disable first child*/
.notion-table-of-contents.color-gray .notion-table-of-contents__item:first-child {
  display:none!important;
}

.notion-table-of-contents.color-gray .notion-table-of-contents__item:not(:first-child) .notion-semantic-string{
  margin-inline-start:3.5vw!important;
  display:inline-block;
}



/*ToC no underline*/
.notion-table-of-contents__item .notion-link .notion-semantic-string{
  text-decoration:none;
  letter-spacing: 0.02em;
  
}
/*toc no warp*/
#block-3399767ed6024c33979b5ca25e5a56bf .notion-text, #block-3399767ed6024c33979b5ca25e5a56bf .notion-table-of-contents .notion-semantic-string{
  white-space: nowrap;

}



/*Toc animation*/
.notion-table-of-contents__item {
  transition:none;
  margin:1% 0% !important;
}
.notion-table-of-contents__item:hover {
  background-color: initial;
}

.notion-table-of-contents__item .notion-semantic-string {
  transition: background-color 0.1s;
  border-radius: var(--lift-radius);
  padding-inline: 16px!important;
}

.notion-table-of-contents__item .notion-semantic-string:hover{
  background-color: var(--icy);
}

/*Toc title*/
#block-4101862186f4412b8e859990bfd0e370 {
  margin-left:3.5vw!important;
  margin-right:0!important;
}

#block-4101862186f4412b8e859990bfd0e370 .bg-gray {
  padding:8px 16px;
  border-radius: var(--lift-radius);
}


/*footer*/
.super-footer__links .notion-link, .super-footer__links .super-footer__list-heading{
  color: var(--color-text-default);
}



/*limit for responsive use*/
#block-6aaa487186e64ca0801c60f675e288e7 .notion-column{
  min-width: va(--reading-min-width);
}




/* mobile*/
@media only screen and (max-width:860px) {


/*adjust typeface*/
h1 {
  font-size:2rem!important;
}

h2 {
  font-size:1.5rem !important;
  text-align:left;
  margin-left:0;
}

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

p {
  font-size:1rem!important;
  margin-bottom:0rem!important;
}

/*none sticky toc*/
#block-552d48ffc132459abc5707fa9c22ee07 {
  display:none!important;
}

#block-13ece5f90a3e8042b12bdec41eddf958 {
  position: relative!important;
  top:10vw!important;
  height:240px;
}

#block-13ece5f90a3e8042b12bdec41eddf958.notion-column-list {
  display:initial!important;
  
}





/*toc location */
#block-4101862186f4412b8e859990bfd0e370 {
  margin-left:0!important;
  margin-right:0!important;
}

.notion-table-of-contents.color-gray .notion-table-of-contents__item:not(:first-child) .notion-semantic-string{
  margin-inline-start:0!important;
}

/*lists paddings*/
.notion-numbered-list, .notion-bulleted-list {
  padding-inline-start:calc(1rem + 0px)!important;
}

    

:root {
  --column-spacing: 1em !important;
  --lift-radius: 20px !important;
  --body-font: 16px !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;
  
  --accent-blue: #3385ff;
  --color-bg-blue: var(--main-blue-faded)!important;

  --color-bg-default: #0E1012 !important;
  
	--layout-max-width: 1440px !important;
	--reading-max-width:720px !important;
	--reading-min-width:490px !important;


	
	
    }


html.theme-light {
  --color-text-default: var(--main-light) !important;

  --color-bg-gray-light: 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);
  
  
  --color-text-default-light: var(--main-light)!important;
  --color-bg-gray: var(--dark-grey) !important;
  --color-text-gray: rgb(164,167,168) !important;
  

  --navbar-text-color: #EDEEEE !important;
  
  
  
}


html.theme-dark {
  --color-text-default: var(--main-light) !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);
  
  --color-text-gray: rgb(164,167,168) !important;



}

/*navbar */
.super-navbar {
  background: rgba(25, 25, 25, .7) !important;
}

.super-footer {
  background: #24282B !important;
}






/*fonts and media*/

h1 {
  
  font-family: Poppins !important;
  line-height: 115% !important;
  font-weight: 600 !important;
  font-size: 2.9rem!important;
  letter-spacing: -0.02em !important;
  margin-top:2rem;
  margin-bottom: 3rem !important;
  max-width: var(--lift-width) !important;
  color: var(--lrc-color-white3);
  text-align: left !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.02em !important;
  text-align:center;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  max-width: var(--reading-max-width) !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(--main-light)!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: 180% !important;
  margin-bottom: 0rem !important;
  margin-top:0rem !important;
  padding-left:0rem;
  font-family: mulish;
  font-weight:400;
  font-size:1.04rem!important;
  letter-spacing: 0.03em!important;
  max-width: var(--reading-max-width) !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;
}

figcaption {
  padding:2px 8px!important;
  opacity:60%;
  font-size:1rem;
  letter-spacing: 0.02em;
  
}




img {
  border-radius: var(--lift-radius) !important;
  width:100%;
  max-width: var(--reading-max-width)!important;
  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;
  max-width: var(--reading-max-width)!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-video {
  margin:0;
  text-align:left;
}



/*media hover style*/
img:hover {
  transition: all 0.2s ease-out !important; 
  transform: scale(1.01) !important;
  opacity: 0.96; 
}

video:hover {
  transition: all 0.2s ease-out !important; 
  transform: scale(1.01) !important;
  opacity: 0.96; 
}



/*all callouts*/

.notion-callout {
  border-radius: var(--lift-radius) !important;
  border: transparent!important;
}
  

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

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

.notion-callout__content {
  margin:0;
}

.notion-callout.bg-brown-light .notion-callout__content p {
  opacity:0.8;
}



/*limit all reading content width*/
.notion-column {
  max-width: var(--reading-max-width);
}
/*keep toc to the edge*/
.notion-root .notion-column-list {
  justify-content:center;

}


/*utility callouts*/

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

/*brown callout center aligned*/
.notion-callout.bg-brown-light .notion-callout__content .notion-column-list .notion-column {
  flex-direction: row!important;
  align-items: stretch !important;
}

/*text in grey callout in center*/
.notion-callout.bg-brown-light .notion-callout__content .notion-column-list .notion-column .notion-callout.bg-gray-light .notion-callout__content {
    justify-content: ;
}

/*margin of grey callout*/
.bg-gray-light .notion-callout__content {
  margin:0.8rem 0.8rem 1rem 0.8rem;
}
.bg-gray-light .notion-callout__content h3 {
  margin-top: 8px;
}

/* list p*/
.notion-list-item {
  margin:0;
  padding:0;
  opacity:0.8;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
}

.notion-bulleted-list .notion-list-item.notion-semantic-string {
  margin-bottom:1rem;
}

.notion-numbered-list .notion-list-item.notion-semantic-string {
  margin-bottom:1rem;
}

.notion-numbered-list .notion-list-item.notion-semantic-string:last-child {
  margin:0;
}

.notion-bulleted-list .notion-list-item.notion-semantic-string:last-child {
  margin:0;
}




/*ToC and title position*/

#block-13fce5f90a3e81428d1cdeb8dbe0a0af {
  z-index: 19; 
  position: sticky!important;
  position: -webkit-sticky;
  top:25vh;
  height:8vh;
}


#block-13fce5f90a3e81318e71c24f694b2465 {
  position:relative;
}

/*Toc disable first child*/
.notion-table-of-contents.color-gray .notion-table-of-contents__item:first-child {
  display:none!important;
}

.notion-table-of-contents.color-gray .notion-table-of-contents__item:not(:first-child) .notion-semantic-string{
  margin-inline-start:3.5vw!important;
  display:inline-block;
}



/*ToC no underline*/
.notion-table-of-contents__item .notion-link .notion-semantic-string{
  text-decoration:none;
  letter-spacing: 0.02em;
  
}
/*toc no warp*/
#block-13fce5f90a3e81b2980cceb27ec4ba14 .notion-text, #bblock-13fce5f90a3e81b2980cceb27ec4ba14 .notion-table-of-contents .notion-semantic-string{
  white-space: nowrap;

}



/*Toc animation*/
.notion-table-of-contents__item {
  transition:none;
  margin:1% 0% !important;
}
.notion-table-of-contents__item:hover {
  background-color: initial;
}

.notion-table-of-contents__item .notion-semantic-string {
  transition: background-color 0.1s;
  border-radius: var(--lift-radius);
  padding-inline: 16px!important;
}

.notion-table-of-contents__item .notion-semantic-string:hover{
  background-color: var(--icy);
}

/*Toc title*/
#block-13fce5f90a3e81c59c4bd4ade9a5c928 {
  margin-left:3.5vw!important;
  margin-right:0!important;
}

#block-13fce5f90a3e81c59c4bd4ade9a5c928 .bg-gray {
  padding:8px 16px;
  border-radius: var(--lift-radius);
}


/*footer*/
.super-footer__links .notion-link, .super-footer__links .super-footer__list-heading{
  color: var(--color-text-default);
}



/*limit for responsive use*/
#block-13fce5f90a3e81318e71c24f694b2465 .notion-column{
  min-width: va(--reading-min-width);
}




/* mobile*/
@media only screen and (max-width:860px) {


/*adjust typeface*/
h1 {
  font-size:2rem!important;
}

h2 {
  font-size:1.5rem !important;
  text-align:left;
  margin-left:0;
}

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

p {
  font-size:1rem!important;
  margin-bottom:0rem!important;
}

/*none sticky toc*/
#block-13fce5f90a3e813e9dd4c3a86c99fe63 {
  display:none!important;
}

#block-13fce5f90a3e81428d1cdeb8dbe0a0af {
  position: relative!important;
  top:10vw!important;
  height:240px;
}

#block-13fce5f90a3e81428d1cdeb8dbe0a0af.notion-column-list {
  display:initial!important;
  
}





/*toc location */
#block-13fce5f90a3e81c59c4bd4ade9a5c928 {
  margin-left:0!important;
  margin-right:0!important;
}

.notion-table-of-contents.color-gray .notion-table-of-contents__item:not(:first-child) .notion-semantic-string{
  margin-inline-start:0!important;
}

/*lists paddings*/
.notion-numbered-list, .notion-bulleted-list {
  padding-inline-start:calc(1rem + 0px)!important;
}