* {
	outline: none !important;
}

body {
	background: #333;
}

main {
	background: #000;
}

.section-elem {
	display: none;
}

.section-elem.section-active {
	display: block;
}

i.waves {
	transition: 0.5s;
	opacity: 0;
	z-index: 0;
}

i.waves.active {
	opacity: 1;
}

.saturation {
	user-select: none;
}

.modal-text {
	user-select: none;
}

.game__btns p {
	user-select: none;
}

.beginning__title h1 {
	user-select: none;
}

.beginning__title p {
	user-select: none;
}

.probirka {
	transition: 0.5s;
	transform-origin: 0px 100%;
}

.probirka__up-circle {
	transition: 0.2s;
	z-index: 1;
}

.saturation__bar i {
	transition: 0.4s;
}

.saturation__bar i.i-red {
	border-color: #FF0000;
}

.saturation__bar i.i-red b {
	background: #FF0000;
}

.saturation__bar i.i-green {
	border-color: #00FF00;
}

.saturation__bar i.i-green b {
	background: #00FF00;
}

@keyframes saturation-red {
  0% {
  	background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  50% {
  	background: linear-gradient(90deg, #ff0000 0%, #ff0000 37.5%, #ff0000 59.5%, #ff0000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
  	background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes saturation-green {
  0% {
  	background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  50% {
  	background: linear-gradient(90deg, #00ff00 0%, #00ff00 37.5%, #00ff00 59.5%, #00ff00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
  	background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}



@keyframes saturation-red-svg {
  0% {
  	fill: url(#paint0_linear_2022_1798);
  }
  50% {
  	fill: #ff0000;
  }
  100% {
  	fill: url(#paint0_linear_2022_1798);
  }
}

@keyframes saturation-green-svg {
  0% {
  	fill: url(#paint0_linear_2022_1798);
  }
  50% {
  	fill: #00ff00;
  }
  100% {
  	fill: url(#paint0_linear_2022_1798);
  }
}



.saturation li .top.satur-red h3 {
	animation: saturation-red 1s infinite;
}

.saturation li .top.satur-green h3 {
	animation: saturation-green 1s infinite;
}

.saturation li .top.satur-red svg path {
	animation: saturation-red-svg 1s infinite;
}

.saturation li .top.satur-green svg path {
	animation: saturation-green-svg 1s infinite;
}

.saturation li .top h3.i-red {
	background: linear-gradient(90deg, #ff0000 0%, #ff0000 37.5%, #ff0000 59.5%, #ff0000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.saturation li .top h3.i-green {
	background: linear-gradient(90deg, #00ff00 0%, #00ff00 37.5%, #00ff00 59.5%, #00ff00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.catonometr__arrow {
	transition: 0.4s;
}

.bubble {
	transition: opacity 0.3s;
}

.vortex img {
	width: 100%;
	opacity: 0;
	transition: 0.2s;
}

.vortex img.active {
	opacity: 1;
}

.probirka__zhidkost {
	background: #E3D074;
}

.probirka__zhidkost.state-1 {
	background: #BAA332;
}

.probirka__zhidkost.state-2 {
	background: #AC9B47;
}

.ph {
	width: 100%;
}

.ph p {
	text-align: center;
	font-size: 2rem;
}