@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap");
:root {
	font-family: "Montserrat", sans-serif;
	padding: 0px;
	margin: 0px;
	font-size: 62.5%;
	box-sizing: border-box;
	--primary-color: #21b0f2;
	--header-bg-light-color: #fff;
	--header-boxshadow-light-color: rgba(0, 0, 0, 0.3);
	--seperator: #8a8a8f;
	--code-highlight: #ffa07a;
	--success-color: #47ffa9;
	--warning-color: #fde047;
	--error-color: #d87a7a;
}

/* component css */

/* repalce name */
.list-snippet {
	font-size: 2rem;
	font-weight: 500;
	margin-top: 1rem;
}

/* lists heading */
.list-heading {
	font-size: 3rem;
	font-weight: 500;
}

/* lists description */
.list-description {
	margin-top: 3rem;
	margin-bottom: 3rem;
	font-size: 1.5rem;
	width: 90%;
}

/* list wrapper */
.list-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* list item styling */
.scl-list-item {
	margin: 2rem;
	padding: 1rem;
	width: 10rem;
	cursor: pointer;
}

/* list item hover  */
.scl-list-item:hover {
	background-color: #f1f1f1;
}

/* various list styling */
.scl-list-numbers {
	list-style: decimal;
}

.scl-list-roman {
	list-style: lower-roman;
}

.scl-list-alphabet {
	list-style: lower-alpha;
}

.scl-list-none {
	list-style: none;
}

/* stacked list styling */
.scl-stacked-item {
	font-size: 1.5rem;
	list-style: none;
	padding: 1rem;
	width: 30rem;
	margin: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

/* stacked list item styling */
.scl-primary {
	background-color: var(--primary-color);
	/* color: white; */
	font-weight: 500;
}

.scl-success {
	background-color: var(--success-color);
	font-weight: 500;
}

.scl-warning {
	background-color: var(--warning-color);
	font-weight: 500;
}

.scl-error {
	background-color: var(--error-color);
	font-weight: 500;
}

img {
	cursor: pointer;
}