Farmingsystem CSS

@import url(https://fonts.cdnfonts.com/css/akrobat);

#processor-frame {
	position: absolute;
	display: grid;
	gap: .7407vh;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	width: 77.1296vh;
	height: -moz-fit-content;
	height: fit-content
}

#processor-frame #main {
	position: relative;
	width: 77.1296vh;
	height: 53.7963vh;
	background: radial-gradient(129.68% 129.68% at 50% 50%, rgba(8, 5, 15, .98) 0, hsla(0, 0%, 7%, .98) 100%);
	border-radius: .9259vh;
	overflow: hidden
}

#processor-frame #main #header {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 6.8519vh;
	margin-top: 2.4074vh
}

#processor-frame #main #header #logo {
	position: relative;
	width: 6.8519vh;
	height: 6.8519vh;
	margin-left: 3.0556vh
}

#processor-frame #main #header #title {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-left: 1.2963vh;
	width: -moz-fit-content;
	width: fit-content
}

#processor-frame #main #header #title h1 {
	position: relative;
	font-family: Akrobat Black;
	font-style: normal;
	font-weight: 800;
	font-size: 3.9815vh;
	background: radial-gradient(104.35% 104.35% at 50% 50%, #00e5ff 0, rgba(0, 149, 254, 0) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-transform: uppercase;
	-webkit-text-stroke: #63bef967;
	-webkit-text-stroke-width: .0926vh;
	margin: 0;
	padding: 0
}

#processor-frame #main #header #title h2 {
	position: relative;
	font-family: Akrobat Bold;
	font-style: normal;
	font-weight: 700;
	font-size: 2.3148vh;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75);
	margin: 0;
	padding: 0;
	margin-top: -.463vh
}

#processor-frame #main #header p {
	position: relative;
	width: 28.5185vh;
	height: 5.2778vh;
	margin-left: 2.4074vh;
	font-family: Akrobat Light;
	font-style: normal;
	font-weight: 500;
	font-size: 1.2963vh;
	color: hsla(0, 0%, 100%, .33)
}

#processor-frame #main #header #close {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 3.0556vh;
	top: .9259vh;
	width: 2.7778vh;
	height: 2.7778vh;
	background: radial-gradient(87.5% 87.5% at 50% 50%, #ff2e2e 0, rgba(255, 46, 46, 0) 100%);
	border-radius: .5556vh;
	cursor: pointer
}

#processor-frame #main #header #close #icon {
	position: relative;
	color: #fff
}

#processor-frame #wheelbarrow,
#processor-frame #wheelbarrow-shadow {
	position: absolute;
	width: 16.0185vh;
	height: 16.0185vh;
	margin-top: -4.6296vh;
	z-index: 1;
	right: 5.9259vh
}

#processor-frame #wheelbarrow-shadow {
	filter: blur(8.287vh);
	transform: rotate(10.61deg)
}

#processor-frame #main #ellipse_1 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 25.0926vh;
	top: 61.3889vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#processor-frame #main #ellipse_2 {
	left: -14.3519vh;
	top: -40.6481vh
}

#processor-frame #main #ellipse_2,
#processor-frame #main #ellipse_3 {
	position: absolute;
	width: 34.7222vh;
	height: 35.6481vh;
	background: #3778a7;
	filter: blur(19.8611vh)
}

#processor-frame #main #ellipse_3 {
	left: 66.5741vh;
	top: 53.7037vh
}

#processor-frame #main #ellipse_4 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 13.5185vh;
	top: -31.4815vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#processor-frame #main #ellipse_5 {
	position: absolute;
	width: 9.9074vh;
	height: 9.9074vh;
	left: 11.1111vh;
	top: 53.6111vh;
	background: #ffea61;
	filter: blur(7.5926vh)
}

#processor-frame #progress-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .5556vh;
	width: 77.1296vh;
	height: 6.7593vh;
	background: radial-gradient(129.68% 129.68% at 50% 50%, rgba(8, 5, 15, .98) 0, hsla(0, 0%, 7%, .98) 100%);
	border-radius: .9259vh;
	overflow: hidden
}

#processor-frame #progress-bar #ellipse_1 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 25.0926vh;
	top: 60.6481vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#processor-frame #progress-bar #ellipse_2 {
	left: -14.3519vh;
	top: -48.7963vh
}

#processor-frame #progress-bar #ellipse_2,
#processor-frame #progress-bar #ellipse_3 {
	position: absolute;
	width: 34.7222vh;
	height: 35.6481vh;
	background: #3778a7;
	filter: blur(19.8611vh)
}

#processor-frame #progress-bar #ellipse_3 {
	left: 56.1111vh;
	top: 25vh
}

#processor-frame #progress-bar #ellipse_4 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 13.5185vh;
	top: -32.2222vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#processor-frame #progress-bar p {
	position: relative;
	width: 73.2407vh;
	font-family: Akrobat;
	font-style: normal;
	font-weight: 700;
	font-size: 1.2963vh;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75);
	margin: 0;
	padding: 0
}

#processor-frame #progress-bar p span {
	position: absolute;
	right: 0
}

#processor-frame #progress-bar #progress-frame {
	position: relative;
	width: 73.2407vh;
	height: 1.0185vh;
	background: radial-gradient(173.81% 173.81% at 50% 50%, #060b0f 0, rgba(14, 3, 17, 0) 100%);
	border-radius: .3704vh;
	padding: .463vh
}

#processor-frame #progress-bar #progress-frame #progress {
	position: relative;
	width: 30%;
	height: .9259vh;
	background: radial-gradient(113.64% 113.64% at 50% 50%, #00e5ff 0, rgba(0, 149, 254, 0) 100%);
	border: .0926vh solid #00e5ff;
	border-radius: .1852vh;
	animation-name: fill-width;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	transition: .2s
}

#processor-frame #main #cards {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: -moz-fit-content;
	height: fit-content;
	top: 12.1296vh;
	gap: 1.7593vh
}

#processor-frame #main #cards #card-frame {
	position: relative;
	width: 22.5vh;
	height: 30.9259vh;
	background: radial-gradient(87.28% 87.28% at 50% 50%, rgba(0, 0, 0, .75) 0, transparent 100%);
	border: .0926vh solid rgba(255, 175, 224, .08);
	border-radius: 1.2963vh;
	overflow: hidden
}

#processor-frame #main #cards #card-frame #ellipse {
	position: absolute;
	width: 25.2778vh;
	height: 25.2778vh;
	left: 8.3333vh;
	top: 18.1481vh;
	background: #fa31aad3;
	filter: blur(14.9537vh)
}

#processor-frame #main #cards #card-frame #stripes {
	position: absolute;
	width: 22.5vh;
	height: 30.9259vh
}

#processor-frame #main #cards #card-frame #icon {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 15.9259vh;
	height: 14.0741vh;
	left: 50%;
	top: 50%
}

#processor-frame #main #cards #card-frame #item {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 12vh;
	height: auto;
	left: 50%;
	top: 50%
}

#processor-frame #main #cards #card-frame h1 {
	top: 2.5vh;
	font-size: 1.8519vh;
	text-transform: uppercase
}

#processor-frame #main #cards #card-frame h1,
#processor-frame #main #cards #card-frame p {
	position: absolute;
	width: 22.5vh;
	height: 2.2222vh;
	font-family: Akrobat;
	font-style: normal;
	font-weight: 600;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0
}

#processor-frame #main #cards #card-frame p {
	bottom: 2.5vh;
	font-size: 1.4815vh
}

@keyframes fill-width {
	0% {
		width: 0
	}

	to {
		width: 100%
	}
}

* img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none
}

#seller-frame {
	position: absolute;
	display: grid;
	gap: .7407vh;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	width: 77.1296vh;
	height: -moz-fit-content;
	height: fit-content
}

#seller-frame #main {
	position: relative;
	width: 77.1296vh;
	height: 53.7963vh;
	background: radial-gradient(129.68% 129.68% at 50% 50%, rgba(8, 5, 15, .98) 0, hsla(0, 0%, 7%, .98) 100%);
	border-radius: .9259vh;
	overflow: hidden
}

#seller-frame #main #header {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 6.8519vh;
	margin-top: 2.4074vh
}

#seller-frame #main #header #logo {
	position: relative;
	width: 6.8519vh;
	height: 6.8519vh;
	margin-left: 3.0556vh
}

#seller-frame #main #header #title {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-left: 1.2963vh;
	width: -moz-fit-content;
	width: fit-content
}

#seller-frame #main #header #title h1 {
	position: relative;
	font-family: Akrobat Black;
	font-style: normal;
	font-weight: 800;
	font-size: 3.9815vh;
	background: radial-gradient(104.35% 104.35% at 50% 50%, #00e5ff 0, rgba(0, 149, 254, 0) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-transform: uppercase;
	-webkit-text-stroke: #31a2ee67;
	-webkit-text-stroke-width: .0926vh;
	margin: 0;
	padding: 0
}

#seller-frame #main #header #title h2 {
	position: relative;
	font-family: Akrobat Bold;
	font-style: normal;
	font-weight: 700;
	font-size: 2.3148vh;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75);
	margin: 0;
	padding: 0;
	margin-top: -.463vh
}

#seller-frame #main #header p {
	position: relative;
	max-width: 28.5185vh;
	margin-left: 2.4074vh;
	font-family: Akrobat Light;
	font-style: normal;
	font-weight: 500;
	font-size: 1.2963vh;
	color: hsla(0, 0%, 100%, .33)
}

#seller-frame #main #header #close {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 3.0556vh;
	top: .9259vh;
	width: 2.7778vh;
	height: 2.7778vh;
	background: radial-gradient(87.5% 87.5% at 50% 50%, #ff2e2e 0, rgba(255, 46, 46, 0) 100%);
	border-radius: .5556vh;
	cursor: pointer
}

#seller-frame #main #header #close #icon {
	position: relative;
	color: #fff
}

#seller-frame #wheelbarrow,
#seller-frame #wheelbarrow-shadow {
	position: absolute;
	width: 16.0185vh;
	height: 16.0185vh;
	margin-top: -4.6296vh;
	z-index: 1;
	right: 5.9259vh
}

#seller-frame #wheelbarrow-shadow {
	filter: blur(8.287vh);
	transform: rotate(10.61deg)
}

#seller-frame #main #ellipse_1 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 25.0926vh;
	top: 61.3889vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#seller-frame #main #ellipse_2 {
	left: -14.3519vh;
	top: -40.6481vh
}

#seller-frame #main #ellipse_2,
#seller-frame #main #ellipse_3 {
	position: absolute;
	width: 34.7222vh;
	height: 35.6481vh;
	background: #3778a7;
	filter: blur(19.8611vh)
}

#seller-frame #main #ellipse_3 {
	left: 66.5741vh;
	top: 53.7037vh
}

#seller-frame #main #ellipse_4 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 13.5185vh;
	top: -31.4815vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#seller-frame #main #ellipse_5 {
	position: absolute;
	width: 9.9074vh;
	height: 9.9074vh;
	left: 11.1111vh;
	top: 53.6111vh;
	background: #ffea61;
	filter: blur(7.5926vh)
}

#seller-frame #progress-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .5556vh;
	width: 77.1296vh;
	height: 6.7593vh;
	background: radial-gradient(129.68% 129.68% at 50% 50%, rgba(8, 5, 15, .98) 0, hsla(0, 0%, 7%, .98) 100%);
	border-radius: .9259vh;
	overflow: hidden
}

#seller-frame #progress-bar #ellipse_1 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 25.0926vh;
	top: 60.6481vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#seller-frame #progress-bar #ellipse_2 {
	left: -14.3519vh;
	top: -48.7963vh
}

#seller-frame #progress-bar #ellipse_2,
#seller-frame #progress-bar #ellipse_3 {
	position: absolute;
	width: 34.7222vh;
	height: 35.6481vh;
	background: #3778a7;
	filter: blur(19.8611vh)
}

#seller-frame #progress-bar #ellipse_3 {
	left: 56.1111vh;
	top: 25vh
}

#seller-frame #progress-bar #ellipse_4 {
	position: absolute;
	width: 19.7222vh;
	height: 19.7222vh;
	left: 13.5185vh;
	top: -32.2222vh;
	background: #3778a7;
	filter: blur(12.6852vh)
}

#seller-frame #progress-bar p {
	position: relative;
	width: 73.2407vh;
	font-family: Akrobat;
	font-style: normal;
	font-weight: 700;
	font-size: 1.2963vh;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75);
	margin: 0;
	padding: 0
}

#seller-frame #progress-bar p span {
	position: absolute;
	right: 0
}

#seller-frame #progress-bar #progress-frame {
	position: relative;
	width: 73.2407vh;
	height: 1.0185vh;
	background: radial-gradient(173.81% 173.81% at 50% 50%, #060b0f 0, rgba(14, 3, 17, 0) 100%);
	border-radius: .3704vh;
	padding: .463vh
}

#seller-frame #progress-bar #progress-frame #progress {
	position: relative;
	width: 30%;
	height: .9259vh;
	background: radial-gradient(113.64% 113.64% at 50% 50%, #00e5ff 0, rgba(0, 149, 254, 0) 100%);
	border: .0926vh solid #00e5ff;
	border-radius: .1852vh;
	animation-name: fill-width;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	transition: .2s
}

#seller-frame #main #cards {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: -moz-fit-content;
	height: fit-content;
	top: 12.1296vh;
	gap: 1.7593vh
}

#seller-frame #main #cards #card-frame {
	position: relative;
	width: 22.5vh;
	height: 30.9259vh;
	background: radial-gradient(87.28% 87.28% at 50% 50%, rgba(0, 0, 0, .75) 0, transparent 100%);
	border: .0926vh solid rgba(255, 175, 224, .08);
	border-radius: 1.2963vh;
	overflow: hidden
}

#seller-frame #main #cards #card-frame #ellipse {
	position: absolute;
	width: 25.2778vh;
	height: 25.2778vh;
	left: 8.3333vh;
	top: 18.1481vh;
	background: #fa31aad3;
	filter: blur(14.9537vh)
}

.blue {
	background: #5e9eff !important
}

.green {
	background: #6fff97 !important
}

#seller-frame #main #cards #card-frame #stripes {
	position: absolute;
	width: 22.5vh;
	height: 30.9259vh
}

#seller-frame #main #cards #card-frame #icon {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 15.9259vh;
	height: 14.0741vh;
	left: 50%;
	top: 50%
}

#seller-frame #main #cards #card-frame #item {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 12vh;
	height: auto;
	left: 50%;
	top: 50%
}

#seller-frame #main #cards #card-frame h1 {
	top: 2.5vh;
	font-size: 1.8519vh;
	text-transform: uppercase
}

#seller-frame #main #cards #card-frame h1,
#seller-frame #main #cards #card-frame p {
	position: absolute;
	width: 22.5vh;
	height: 2.2222vh;
	font-family: Akrobat;
	font-style: normal;
	font-weight: 600;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0
}

#seller-frame #main #cards #card-frame p {
	bottom: 2.5vh;
	font-size: 1.4815vh
}

#actions {
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
	height: 4.9074vh;
	bottom: 3.1481vh
}

#actions #information-frame {
	position: relative;
	width: 20.6481vh;
	margin-left: 3.2407vh
}

#actions #information-frame #icon {
	position: absolute;
	color: #ffea61;
	font-size: 3.2407vh;
	margin: 0;
	padding: 0;
	top: -4.0741vh;
	left: -1.1111vh
}

#actions #information-frame h1 {
	font-weight: 700;
	font-size: 1.4815vh;
	color: #ffea61;
	text-shadow: 0 0 2.963vh rgba(253, 237, 131, 0.932)
}

#actions #information-frame h1,
#actions #information-frame p {
	position: relative;
	font-family: Akrobat;
	font-style: normal;
	margin: 0;
	padding: 0
}

#actions #information-frame p {
	font-weight: 500;
	font-size: 1.2963vh;
	color: hsla(0, 0%, 100%, .55)
}

#actions #input-frame {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22.5vh;
	height: 5vh;
	background: rgba(0, 0, 0, .21);
	border: .0926vh solid hsla(0, 0%, 100%, .05);
	border-radius: .7407vh;
	margin-left: 3.4259vh
}

#actions #input-frame input {
	position: absolute;
	left: 2.3148vh;
	background: none;
	border: none;
	outline: none;
	width: 50%;
	font-family: Akrobat;
	font-style: normal;
	font-weight: 500;
	font-size: 1.2963vh;
	color: #fff
}

#actions #input-frame #btn-all {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6.3889vh;
	height: 3.3333vh;
	right: .8333vh;
	background: radial-gradient(130.88% 130.88% at 50% 50%, #80ff73 0, rgba(128, 255, 115, 0) 100%);
	border: .0926vh solid #80ff73;
	box-shadow: inset 0 0 2.037vh hsla(0, 0%, 100%, .25);
	filter: drop-shadow(0 0 6.2963vh rgba(128, 255, 115, .5));
	border-radius: .7407vh;
	cursor: pointer
}

#actions #input-frame #btn-all:hover {
	background: radial-gradient(130.88% 130.88% at 50% 50%, #a0ff93 0, rgba(128, 255, 115, 0) 100%);
	box-shadow: inset 0 0 1vh hsla(0, 0%, 100%, 0.3), 0 0 3vh rgba(113, 250, 97, 0.4);
	transform: scale(1.01); /* Leichtes Vergrößern des Buttons */
}

#actions #input-frame #btn-all p {
	font-family: Akrobat;
	font-style: normal;
	font-weight: 600;
	font-size: 1.3889vh;
	color: #376133;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75)
}

#actions #btn-submit {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22.5vh;
	height: 5vh;
	background: radial-gradient(130.88% 130.88% at 50% 50%, #00c5db 0, rgba(0, 149, 254, 0) 100%);
	border: .0926vh solid #3f9ca7;
	box-shadow: inset 0 0 2.037vh hsla(0, 0%, 100%, .25);
	filter: drop-shadow(0 0 6.2963vh rgba(0, 225, 255, 0.651));
	border-radius: .7407vh;
	margin-left: 1.6667vh;
	cursor: pointer;
	transition: all 0.3s ease; /* Für eine weiche Übergangsanimation */
}

#actions #btn-submit:hover {
	background: radial-gradient(130.88% 130.88% at 50% 50%, #00e5ff 0, rgba(0, 169, 254, 0) 100%);
	box-shadow: inset 0 0 1vh hsla(0, 0%, 100%, 0.3), 0 0 3vh rgba(0, 225, 255, 0.3);
	transform: scale(1.01); /* Leichtes Vergrößern des Buttons */
}

#actions #btn-submit p {
	font-family: Akrobat;
	font-style: normal;
	font-weight: 600;
	font-size: 1.8519vh;
	line-height: 2.2222vh;
	display: flex;
	align-items: center;
	text-align: center;
	color: #fff;
	text-shadow: 0 .3704vh 5vh hsla(0, 0%, 100%, .75)
}

body {
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.component {
	position: absolute;
	top: 0;
	left: 0
}