/* custom.css */

.server {
	-webkit-animation: serverTilt 1.1s ease-in-out infinite;
	        animation: serverTilt 1.1s ease-in-out infinite;
	transform-origin: 50% 60%;
	will-change: transform;
}

@-webkit-keyframes serverTilt {
	0%,
	100% {
		transform: rotate(0deg) scale(1);
	}

	25% {
		transform: rotate(-0.75deg) scale(1.02);
	}

	50% {
		transform: rotate(0deg) scale(1);
	}

	75% {
		transform: rotate(0.75deg) scale(1.02);
	}
}

@keyframes serverTilt {
	0%,
	100% {
		transform: rotate(0deg) scale(1);
	}

	25% {
		transform: rotate(-0.75deg) scale(1.02);
	}

	50% {
		transform: rotate(0deg) scale(1);
	}

	75% {
		transform: rotate(0.75deg) scale(1.02);
	}
}

@media (min-width: 1200px) {
	[data-section="inform"] {
		position: fixed;
	}
	.navigation__el_desktop {
		align-items: center;
	}
}

.stream__btn {
	padding: 5px 10px;
}

.btn,
.stream__btn,
.file__btn {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	color: #ffd9a0;
	background: linear-gradient(180deg, #7a250f, #4a0d05);
	box-shadow:
		0 0 20px rgba(255, 120, 0, 0.35),
		inset 0 0 12px rgba(255, 180, 90, 0.25);
	transition: transform 0.3s ease;
	cursor: pointer;
}

.btn::before,
.stream__btn::before,
.file__btn::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		transparent,
		#ffcc7a,
		#ff6a00,
		#ffd27d,
		transparent
	);
	background-size: 300% 100%;
	-webkit-animation: borderSlide 4s linear infinite;
	        animation: borderSlide 4s linear infinite;
	-webkit-mask:
		linear-gradient(#000 0, #000 0) content-box,
		linear-gradient(#000 0, #000 0);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

@-webkit-keyframes borderSlide {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 150% 50%;
	}
	100% {
		background-position: 300% 50%;
	}
}

@keyframes borderSlide {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 150% 50%;
	}
	100% {
		background-position: 300% 50%;
	}
}

.btn_auth {
	height: 43px;
}

.countdown {
	position: relative !important;
	padding: 12px 16px !important;
	border-radius: 10px !important;
	background: rgba(40, 15, 5, 0.6) !important;
	box-shadow:
		inset 0 0 12px rgba(255, 150, 80, 0.25),
		0 0 20px rgba(255, 80, 0, 0.25);
}

.gw-timer__amount {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #ffdca0 !important;
	text-shadow:
		0 0 10px rgba(255, 200, 120, 0.6),
		0 0 20px rgba(255, 120, 0, 0.5);
}

.char__img {
	height: 43%;
	transform: translate(-10%, 78px);
}

.savage_box {
	height: 300px;
}

h1,
h2 {
	color: #ffe3a3 !important;
	font-weight: 700;
	text-shadow:
		0 0 6px rgba(255, 170, 60, 0.6),
		0 2px 10px rgba(0, 0, 0, 0.95);
}

.header__content,
.post__desc {
	color: #cfe6ff !important;
	font-weight: 600;
	text-shadow:
		0 0 6px rgba(120, 180, 255, 0.45),
		0 2px 8px rgba(0, 0, 0, 0.9);
}

.inform__content {
	color: #ffd27a !important;
	font-weight: 600;
	text-shadow:
		0 0 8px rgba(255, 160, 40, 0.75),
		0 2px 6px rgba(0, 0, 0, 0.95);
}

.stream__content {
	justify-content: flex-end;
}

.stream__ico {
	display: none !important;
}

.stream__desc {
	box-shadow:
		0 0 12px rgba(255, 90, 31, 0.6),
		0 0 28px rgba(255, 40, 0, 0.45),
		inset 0 0 12px rgba(255, 120, 40, 0.6);
	color: #ffe3a3 !important;
	text-shadow:
		0 0 6px rgba(255, 170, 60, 0.6),
		0 2px 10px rgba(0, 0, 0, 0.95);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
	font-weight: bold;
}

.top__btns {
	background-color: transparent;
}

.top__title {
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
	color: #ffe3a3 !important;
}

.header__title {
	box-shadow:
		0 0 12px rgba(255, 90, 31, 0.6),
		0 0 28px rgba(255, 40, 0, 0.45),
		inset 0 0 12px rgba(255, 120, 40, 0.6);
	color: #ffe3a3 !important;
	text-shadow:
		0 0 6px rgba(255, 170, 60, 0.6),
		0 2px 10px rgba(0, 0, 0, 0.95);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
}