@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

.example {
	margin: 20px;
	padding: 10px;
	font-size: 16px;
}

@media screen and (min-width: 900px) {
	.example {
		margin: 30px;
		padding: 20px;
		font-size: 20px;
	}
}

@supports (display: grid) {
	.example {
		display: grid;
	}
}

#example-main .example:hover {
	animation-name: kf-example;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

@keyframes kf-example {
	0% {
		opacity: 0;
		left: 0;
	}
	100% {
		opacity: 1;
		left: 10px;
	}
}

:root {
	--add-width: 70px;
}

.example-box {
	margin: 20px;
	width: calc(30px + var(--add-width));
	height: 100px;
	background: blue;
}

.example-circle[class~="logo"] {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden !important;
	z-index: 0;
	font-size: 3vh;
	letter-spacing: 0.08em;
}

h2.example {
	position: absolute;
	left: 600px;
	top: 23px;
	color: #fff;
	text-align: center;
	font-size: 17px;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-weight: 400;
	line-height: 25.002px;
}

.example-triangle div {
	opacity: 0;
	z-index: 0;
	animation-name: kf-example-fade-zoomin;
	animation-duration: 39s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

.example-run .example-slide {
	animation-play-state: running;
}

@keyframes kf-example-fade {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	12.820512820513% {
		opacity: 1;
		transform: scale(1);
	}
	16.666666666667% {
		opacity: 0;
		transform: scale(2);
	}
	96.153846153846% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.example-march {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.example-ground {
	position: absolute;
	background: rgba(255,0,0,0.7);
	animation-iteration-count: infinite;
	animation-duration: 6.5s;
	animation-timing-function: linear;
	animation-play-state: paused;
}

.example-run .example-top {
	animation-play-state: running;
}

.example-bottom {
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	animation-name: kf-example-stop;
}

@keyframes kf-example-rotate {
	0% {
		width: 0;
	}
	76.923066923077% {
		width: 105%;
	}
	76.923076923077% {
		width: 0;
	}
	100% {
		width: 0;
	}
}

#example-text {
	position: absolute;
	z-index: 0;
	font-size: 100%;
	color: white;
	padding: 1% 2%;
	background: linear-gradient(87deg, rgba(255, 80, 80, 0.747) 10%, rgba(211, 0, 0, 0.842) 60%);
}

.example-block {
	width: 100%;
	top: 0;
	left: 0;
	text-align: right;
	animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.example-inline {
	display: inline-block
	top: 0;
	right: 0;
}

@-moz-document url-prefix() {
	.example-html {
		scroll-behavior: smooth;
		font-family: 'Montserrat', sans-serif !important;
	}
}

* .example-all {
	box-sizing: border-box;
}

:-ms-input-placeholder .example-input {
	overflow: hidden;
	color: rgba(130, 99, 50, 0.5);
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* --- End of CSS Obfuscator Example Code --- */