Background Image

• Use custom image
Copy

html, body {
		background-image: url('your-img-link.png') !important; /* Background image */
		/* Image stretched based on screen size */
		background-repeat: no-repeat !important;
		background-size: cover !important; 
}

• Use custom color
Copy

body {
		background-color: #eff4fe !important; /* Change color */
}

Main Card

• Use custom color
Copy

#__next > div {
		/* Card decoration */
		background-color: #F7F7F7 !important; /* Main card color */
		box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.1) !important; /* Main card shadow */
}

• Change card size
Copy

#__next > div {
    /* Card width */
		/* 1vw = 1% of viewport wide */
		/* 1vh = 1% of viewport height */
		/* 1vw of 50 cm viewport device wide is 0.5 cm */	
		/* 1vh of 100 cm viewport device height is 1 cm */				
		width: calc(225px + 25vw) !important; /* Responsive card width */
		margin-top: 5vh !important; /* Main card top margin */
		margin-bottom: 5vh !important; /* Main card bottom margin *?
}

• Use squared card
Copy

#__next > div {
		border-radius: 0px !important; /* Rounded main card */
}

Button

• Change color
Copy

:root {
		/* CTA bg color using gray light callout  */
		--color-bg-gray-light: rgba(10, 36, 64, 1) !important;
		/* Callout color */
		--color-bg-brown-light: rgba(233,229,227,0.75) !important;
		--color-bg-orange-light: rgba(250,235,221,0.75) !important;
		--color-bg-yellow-light: rgba(251,243,219,0.75) !important;
		--color-bg-green-light: rgba(221,237,234,0.75) !important;
		--color-bg-blue-light: rgba(221,235,241,0.75) !important;
		--color-bg-purple-light: rgba(234,228,242,0.75) !important;
		--color-bg-pink-light: rgba(244,223,235,0.75) !important;
		--color-bg-red-light: rgba(251,228,228,0.75) !important;
		--color-pill-default: rgba(206,205,202,0.75) !important;
}

• Use squared button
Copy

.notion-callout {
       border-radius: 0px !important; /* Rounded callout */
   }

Font

• Change font
Copy

@font-face {
		font-family: 'your-font-name';
		src: url('your-font-link.otf') format('truetype');
}

• Change font color
Copy

:root {
		/* Primary text color */
		--color-text-default: rgba(10, 36, 64, 1) !important;
}