@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bungee&family=Oswald:wght@200..700&family=Protest+Strike&family=Rubik+Mono+One&family=Staatliches&display=swap');

body {
	font-size: clamp(12px, calc(100vw/26.875), 35px);
}


.rate-wrapper {
	display: block;
	position: absolute;
	margin: auto;
	/*font-family: "komet", sans-serif;*/
	font-family: "Anton", sans-serif;
	font-style: normal;
	font-weight: 900;
}

.rate-wrapper span,
.rate-wrapper p {
/*	background: linear-gradient(#6d0101 20%, #ba1414 30%, #ff2020 40%, #ff6262 45%, #ff8181 50%, #ff5d5d 55%, #ee3030 60%, #820b0b 70%, #360404 75%);
*/

background: linear-gradient(135deg,
			#6a4b00 10%,
			#b88a00 28%,
			#ffd24a 40%,
			#ffe27a 48%,
			#fff2b0 52%,
			#ffd96a 58%,
			#e6b800 68%,
			#a87900 82%,
			#5a3f00 90%);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/*-webkit-text-stroke: 2px #fff;*/
	display: inline;
	position: relative;
}

.hero-rate .rate-wrapper {
	top: 60%;
	left: -4%;
	right: 0;
	width: 10em;
}

.hero-rate .rate-wrapper span {
/*	font-size: 5.8em;*/
font-size: 7.4em;

	background-color: #FFF !important;
	-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		letter-spacing: 0.05em;
	}

.hero-rate .rate-wrapper p {
	font-size: 4em;
	position: absolute;
	top: -85%;
}

.hero-rate .rate__percent {
	font-size: 2.2em;
	position: absolute;
	bottom: 0;
	right: -0.4em;
	/*
	background: linear-gradient(#6d0101 20%, #ba1414 30%, #ff2020 40%, #ff6262 45%, #ff8181 50%, #ff5d5d 55%, #ee3030 60%, #820b0b 70%, #360404 75%);
	*/
background: linear-gradient(135deg,
			#6a4b00 10%,
			#b88a00 28%,
			#ffd24a 40%,
			#ffe27a 48%,
			#fff2b0 52%,
			#ffd96a 58%,
			#e6b800 68%,
			#a87900 82%,
			#5a3f00 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/*
	-webkit-text-stroke: 1px #fff;
	*/
}

.rate-list-inner {}

.line-ribbon {
	width: 100%;
	max-width: 8em;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 24%;
}

.rate-list .rate-wrapper {
	height: 100%;
	margin-top: .8em;
	transform: unset;
	width: 7.5em;
	height: auto;
	left: 0;
	right: 0;
	top: 46%;
}

.rate-list .rate-wrapper span {
	/*font-size: 4.5em;*/
	font-size: 5em;
	/*
	letter-spacing: 2px;
	*/
	letter-spacing: 3px;}

.rate-list .rate-wrapper p {
	font-size: 2.5em;
	position: absolute;
	top: -75%;
	letter-spacing: 2px;
}

.rate-list .rate__percent {
	font-size: 1.5em;
	position: absolute;
	/*
	bottom: -10%;
	*/
	bottom: 10%;
	right: 0%;
	/*
	background: linear-gradient(#6d0101 20%, #ba1414 30%, #ff2020 40%, #ff6262 45%, #ff8181 50%, #ff5d5d 55%, #ee3030 60%, #820b0b 70%, #360404 75%);
	*/
background: linear-gradient(135deg,
			#6a4b00 10%,
			#b88a00 28%,
			#ffd24a 40%,
			#ffe27a 48%,
			#fff2b0 52%,
			#ffd96a 58%,
			#e6b800 68%,
			#a87900 82%,
			#5a3f00 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/*
	-webkit-text-stroke: 1px #fff;
	*/
}