@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
	--sCyan: hsl(174, 77%, 80%);
	--stCyan: hsl(174, 86%, 45%);
	--dBlue: hsl(174, 90%, 39%);
	--lgRed: hsl(14, 92%, 95%);
	--lRed: hsl(15, 100%, 70%);
	--pBlue: hsl(226, 100%, 87%);
	--vpBlue: hsl(230, 100%, 99%);
	--lgBlue: hsl(224, 65%, 95%);
	--lGBlue: hsl(223, 50%, 87%);
	--gBlue: hsl(225, 20%, 60%);
	--ddBlue: hsl(227, 35%, 25%);
}
body {
	background: var(--vpBlue) url(images/bg-pattern.svg) no-repeat;
	font-family: 'Manrope', sans-serif;
}
body > h1,
body > p,
.attribution {
	min-width: 270px;
}
h1,
.pricing {
	color: var(--ddBlue);
}
body > p {
	color: var(--gBlue);
}
.card {
	width: clamp(270px, 600px, 100%);
}
.views,
.billing {
	color: var(--gBlue);
}
.bar {
	background-color: var(--lGBlue);
	position: relative;
	width: 100%;
}
.barBefore {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--sCyan);
	height: 100%;
}
.slider {
	background-color: var(--stCyan);
	transform: translateY(-50%);
	user-select: none;
	z-index: 1;
	box-shadow: 0 4px 10px hsl(174 86% 45% / 0.7);
}
.slider:hover {
	opacity: 0.9;
}
.slider.dragging {
	background-color: var(--dBlue);
	box-shadow: 0 4px 8px hsl(174 86% 45%);
}
.checker {
	background-color: var(--lGBlue);
	transition: 0.2s;
}
.checker.active {
	justify-content: flex-end;
	background-color: var(--stCyan);
}
.discount {
	background-color: var(--lgRed);
	color: var(--lRed);
	transform: translate(calc(100% + 10px), -50%);
}
.discount.active {
	display: flex;
}
.trial {
	background-color: var(--ddBlue);
	color: var(--pBlue);
	padding-top: 0.85em;
	padding-bottom: 0.85em;
}