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;

}

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

h2 {
  font-size: clamp(
    2.1rem,
    3 vw,
    3 rem
  ) !important; 
  font-family: Lexend !important;
  line-height: 140% !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;

  margin-left: auto;
  margin-right: auto;
  color: var(--text-color-default);

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

body {
	color: var(--color-text-default);
	
	font-family: poppins;
	font-size: 1rem;
	font-weight:400;
	line-height:1.6em
}

.notion-text__content {
	font-size: 1rem;
	line-height:1.6em;
}

.notion-callout.bg-orange-light.border {
	background-color: var(--cta-bg);
	padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem);
	display:flex;
	justify-content: flex-end;
	align-items: center;
	border-radius: var(--lift-radius);
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
	gap:0.75rem;
  margin-top: clamp(1rem, 2vw, 2rem); /* Top margin */
  margin-bottom: clamp(1rem, 2vw, 2rem); /* Bottom margin */
}
.notion-callout__icon {
  display: none!important;
}
.bg-orange-light.border.notion-callout .notion-callout__content .notion-semantic-string{
  display:inline!important;
}


.notion-callout.bg-orange-light.border {
	-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;
  cursor: pointer; /* Change cursor to pointer */
  transition: opacity 0.3s ease-in-out;
 }
 
 .notion-callout.bg-orange-light.border:hover {
  opacity: 0.85; /* Change transparency on hover */
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle; /* Align icon with text */
}

.notion-semantic-string .code {
  color: var(--color-text-default);
  background-color: transparent;
  font-size: clamp(0.875rem, 1.1vw, 1.1rem); /* Responsive font size */
  padding: 0;
}

.bg-orange-light.border.notion-callout .notion-semantic-string .code {
  color: var(--cta-text)!important;
  background-color: var(--cta-bg)!important;
}

.notion-callout.bg-orange-light .notion-callout__content {
  display: inline-flex;
  color: var(--cta-text);
  font-family: Lexend;
  font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  margin-inline-start: 0;
}

:root {
    --layout-max-width: 1440px !important;
    --lift-radius: 14px;
    --image-border-radii: 30px!important;
}



.notion-callout.bg-gray-light.border {
  border-color: var(--color-bg-gray-light);
  display: flex;
  width: clamp(20rem, 50vw, 80rem);
  padding: clamp(3rem, 4vw, 6rem) clamp(3rem, 4vw, 6rem); /* Responsive padding */
  justify-content: center;
  border-radius: 1.875rem;
  align-items: center;
  flex-shrink: 0;
  margin: auto;
}

.notion-image.page-width > figcaption {
  padding-left:16px;
  padding-right:8px;
  padding-top:12px;
}