@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800");

html {
    background-color: white;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #121212;
}

a {
    text-decoration: none !important;
}

i,
span,
a {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #121212;
    margin: 0px;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

article li, p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #121212;
    margin: 0px;
}

/*===== All Section Title Style =====*/
.section-title .title {
    font-size: 44px;
    font-weight: 600;
    color: #121212;
    line-height: 55px;
}

@media (max-width: 767px) {
    .section-title .title {
        font-size: 30px;
        line-height: 35px;
    }
}

.section-title .text {
    font-size: 16px;
    line-height: 24px;
    color: #6c6c6c;
    margin-top: 24px;
}


html {
	/* font */
	--font-sans: 'Manrope', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	/* dark */
	--brand-dark: var(--orange-3);
	--text-1-dark: var(--gray-3);
	--text-2-dark: var(--gray-5);
	--surface-1-dark: var(--gray-12);
	--surface-2-dark: var(--gray-11);
	--surface-3-dark: var(--gray-10);
	--surface-4-dark: var(--gray-9);
	--background-dark: none;
	--border-dark: var(--gray-9);

	/* light */
	--brand-light: var(--blue-5);
	--text-1-light: var(--gray-8);
	--text-2-light: var(--gray-7);
	--surface-1-light: var(--gray-0);
	--surface-2-light: var(--gray-1);
	--surface-3-light: var(--gray-2);
	--surface-4-light: var(--gray-3);
	--background-light: none;
	--border-light: var(--gray-4);
}

:root {
	color-scheme: dark;

	--brand: var(--brand-dark);
	--text-1: var(--text-1-dark);
	--text-2: var(--text-2-dark);
	--surface-1: var(--surface-1-dark);
	--surface-2: var(--surface-2-dark);
	--surface-3: var(--surface-3-dark);
	--surface-4: var(--surface-4-dark);
	--background: var(--background-dark);
	--border: var(--border-dark);
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		--brand: var(--brand-light);
		--text-1: var(--text-1-light);
		--text-2: var(--text-2-light);
		--surface-1: var(--surface-1-light);
		--surface-2: var(--surface-2-light);
		--surface-3: var(--surface-3-light);
		--surface-4: var(--surface-4-light);
		--background: var(--background-light);
		--border: var(--border-light);
	}
}

[color-scheme='dark'] {
	color-scheme: dark;

	--brand: var(--brand-dark);
	--text-1: var(--text-1-dark);
	--text-2: var(--text-2-dark);
	--surface-1: var(--surface-1-dark);
	--surface-2: var(--surface-2-dark);
	--surface-3: var(--surface-3-dark);
	--surface-4: var(--surface-4-dark);
	--background: var(--background-dark);
	--border: var(--border-dark);
}

[color-scheme='light'] {
	color-scheme: light;

	--brand: var(--brand-light);
	--text-1: var(--text-1-light);
	--text-2: var(--text-2-light);
	--surface-1: var(--surface-1-light);
	--surface-2: var(--surface-2-light);
	--surface-3: var(--surface-3-light);
	--surface-4: var(--surface-4-light);
	--background: var(--background-light);
	--border: var(--border-light);
}

html,
body {
	height: 100%;
}

html {
	color: var(--text-1);
	accent-color: var(--link);
	background-image: var(--background);
	background-attachment: fixed;
}

img {
	border-radius: var(--radius-3);
}

ul,
ol {
	list-style: none;
	padding: 0;
}

li {
	padding-inline-start: 0;
}

.surface-1 {
	background-color: var(--surface-1);
	color: var(--text-2);
}

.surface-2 {
	background-color: var(--surface-2);
	color: var(--text-2);
}

.surface-3 {
	background-color: var(--surface-3);
	color: var(--text-1);
}

.surface-4 {
	background-color: var(--surface-4);
	color: var(--text-1);
}

.prose :is(h2, h3, h4, h5, h6) {
	margin-top: var(--size-8);
	margin-bottom: var(--size-3);
}

.prose p:not(:is(h2, h3, h4, h5, h6) + p) {
	margin-top: var(--size-7);
}

.prose :is(ul, ol) {
	list-style-type: disc;
	padding-left: var(--size-5);
}

.prose :is(ul, ol) li {
	margin-block: var(--size-2);
	padding-inline-start: var(--size-2);
}

.prose pre {
	max-inline-size: 100%;
	padding: 1rem;
	border-radius: 8px;
	tab-size: 2;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #121212;
}

a {
    text-decoration: none !important;
}

i,
span,
a {
    display: inline-block;
}


h1, h2, h3, p, li {
	max-inline-size: 900px;
}

h1, h2, h3 {
	text-wrap: pretty;
}

pre {
	cursor: text;
}