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

/* component css */

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

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

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

.scl-input {
	border: 0.2rem solid rgba(0, 0, 0, 0.3);
	width: 20rem;
	height: 3rem;
}

.scl-input:focus {
	border: 0.2rem solid black;
}

.scl-input-validation {
	border: 0.2rem solid rgba(255, 0, 0, 0.5);
	width: 20rem;
	height: 3rem;
}

.scl-input-validation-text {
	color: red;
	font-size: 1.2rem;
	font-weight: 500;
}