/*
// BLAZING KNIGHT FRONTPAGE * CSS
// By Fredrik Berglund
// (c) 2023 DIAM - diam.se
*/
@charset "UTF-8";

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

*:hover {
	cursor: default;
}

@font-face {
	font-family: "AmigaForeverPro2";
	src: url("../font/AmigaForeverPro2-3lVy.ttf");
	/*
    src: url("../font/Aviano800italic.eot');
    src: url("../font/Aviano800italic.eot?') format('embedded-opentype'),
        url("../font/Aviano800italic.woff') format('woff');*/
}

@font-face {
	font-family: "Aviano800italic";
	src: url("../font/Aviano800italic.ttf");
	src: url("../font/Aviano800italic.eot");
	src: url("../font/Aviano800italic.eot?") format("embedded-opentype"),
		url("../font/Aviano800italic.woff") format("woff");
}

@font-face {
	font-family: "Aviano900";
	src: url("../font/Aviano900.ttf");
	src: url("../font/Aviano900.eot");
	src: url("../font/Aviano900.eot?") format("embedded-opentype"),
		url("../font/Aviano900.woff") format("woff");
}

@font-face {
	font-family: "Aviano900italic";
	src: url("../font/Aviano900italic.ttf");
	src: url("../font/Aviano900italic.eot");
	src: url("../font/Aviano900italic.eot?") format("embedded-opentype"),
		url("../font/Aviano900italic.woff") format("woff");
}

@font-face {
	font-family: "Aviano700italic";
	src: url("../font/Aviano700italic.ttf");
	src: url("../font/Aviano700italic.eot");
	src: url("../font/Aviano700italic.eot?") format("embedded-opentype"),
		url("../font/Aviano700italic.woff") format("woff");
}

html {
	scroll-behavior: smooth;
}
html,
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body {
	min-width: 1900px;
	overflow-x: hidden;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	background: black;
	background: #171564;
}

p {
	font-weight: bold;
	padding-bottom: 10px;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	font-size: 18px;
	line-height: 26px;
}

menu {
	text-align: center;
	font-family: "Aviano900italic";
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	letter-spacing: -2px;
	font-size: 20px;
	text-transform: uppercase;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 1900px;
	/*
    background: #111033;*/
	background: linear-gradient(
		0deg,
		rgba(1, 0, 27, 1) 0%,
		rgba(5, 15, 101, 1) 49%,
		rgba(2, 26, 121, 1) 51%,
		rgba(6, 45, 107, 1) 100%
	);
	border-bottom: 2px solid yellow;
	box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.5);
	z-index: 10000;
}

menu ul {
	margin-left: auto;
	margin-right: auto;
	list-style: none;
}

menu li {
	display: inline-block;
}

menu a {
	display: block;
	font-weight: bold;
	text-decoration: none;
	padding: 20px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	color: rgba(255, 255, 255, 0.6);
	height: 68px;
	line-height: 20px;
}

menu a:hover {
	color: yellow;
	cursor: pointer;
	border-top: 4px solid yellow;
	border-bottom: 4px solid yellow;
	height: 68px;
	filter: drop-shadow(0px 0px 24px yellow);
}

.active {
	color: white;
}

section {
	width: 100%;
	padding-bottom: 100px;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

section .inner {
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
}

section:nth-child(2) {
	height: 100%;
	overflow: hidden;
}

section .videoline {
	background-color: #171564;
	z-index: -1;
}

section:nth-child(2) {
	background: none;
}

section:nth-child(2) .videoline {
	background-color: transparent !important;
	z-index: 0;
}

section h1 {
	position: relative;
	z-index: 10;
	line-height: 92px;
	padding-top: 120px;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	font-family: "Aviano900italic", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 82px;
	text-indent: -22px;
	letter-spacing: -13px;
	text-transform: uppercase;
	color: white;
	margin-bottom: 30px;
	filter: drop-shadow(0px 8px 8px black);
}

#start h1 {
	filter: none;
}

#prizes {
	background-image: url("../img/highscore.jpg");
	background-position: center center;
	background-blend-mode: screen;
	background-color: #171564;
}

#prizes .features {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
}

#prizes .feature {
	border-radius: 16px;
	border: 2px solid yellow;
	background: rgba(23, 21, 100, 0.4);
	position: relative;
	filter: drop-shadow(0px 4px 12px #000);
}

section h2 {
	margin-top: 20px;
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	font-size: 21px;
	letter-spacing: -3px;
	text-transform: uppercase;
	color: white;
	margin-bottom: 20px;
}

section .leaderboards {
	font-size: 24px;
	display: grid;
	width: 100%;
	margin-bottom: 70px;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	margin-left: auto;
	margin-right: auto;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

section .leaderboard {
	overflow: hidden;
	min-height: 500px;
	color: white;
	border-radius: 16px;
	background-color: #171564;
	background-blend-mode: screen;
	border: 2px solid yellow;
	background-size: cover;
	background-position: center 80px;
	background-repeat: no-repeat;

	filter: drop-shadow(0px 4px 4px #000);
}

section .leaderboard .icon {
	height: 200px;
	margin-bottom: 10px;
}

#daily-leaderboard {
	background-image: url("../img/highscore.jpg");
	background-position: left top;
	background-size: 410%;
}

#weekly-leaderboard {
	background-image: url("../img/highscore.jpg");
	background-position: 35% top;
	background-size: 410%;
}

#monthly-leaderboard {
	background-image: url("../img/highscore.jpg");
	background-position: 65% top;
	background-size: 410%;
}

#global-leaderboard {
	background-image: url("../img/highscore.jpg");
	background-position: right top;
	background-size: 410%;
}

.alloffers {
	margin-top: 20px;
	display: inline-block;
	font-family: "Aviano900italic";
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	letter-spacing: -2px;
	font-size: 16px;
	text-transform: uppercase;
	border: 2px solid yellow;
	padding: 16px 20px;
	color: yellow;
	text-decoration: none;
	margin-left: 10px;
	margin-right: 10px;
	background: #111033;
	background: linear-gradient(
		0deg,
		rgba(1, 0, 27, 1) 0%,
		rgba(5, 15, 101, 1) 49%,
		rgba(2, 26, 121, 1) 51%,
		rgba(6, 45, 107, 1) 100%
	);
	position: relative;
}

a.inhouse-banner img:hover {
	cursor: pointer;
}

#worldmap {
	min-height: 900px;
}
.worldmap {
	display: block;
	z-index: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url("../svg/map.svg");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	mix-blend-mode: hard-light;
}

#worldmap p {
	position: relative;
	z-index: 1;
	max-width: 790px;
	margin-left: auto;
	margin-bottom: 40px;
	margin-right: auto;
}

#worldrank {
	position: relative;
	border: 2px solid yellow;
	z-index: 2;
	width: 100%;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	box-shadow: 0 0 1px 1px black, 0 0 1px 1px black inset;
}

#worldrank thead {
	background: rgba(0, 0, 0, 0.7);
	color: white;
}

#worldrank th {
	font-family: Aviano700italic;
	text-transform: uppercase;
	padding: 10px;
	font-size: 13px;
	letter-spacing: -1px;
}
#worldrank td {
	background: rgba(0, 0, 50, 0.85);
	font-weight: bold;
	color: white;
	font-size: 42px;
	letter-spacing: -7px;
	padding: 20px 10px;
	border-top: 1px solid rgba(255, 255, 0, 0.4);
}

#worldrank td:nth-child(3) {
	color: yellow;
	font-size: 42px;
	letter-spacing: -7px;
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
}

#worldrank td:nth-child(1),
#worldrank td:nth-child(4) {
	font-size: 24px;
	letter-spacing: -5px;
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
}

#worldrank td:nth-child(5) {
	text-align: right;
	color: yellow;
	font-size: 42px;
	letter-spacing: -8px;
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
}

#worldrank th:nth-child(5) {
	text-align: right;
	width: 20%;
}

#worldrank td:nth-child(6),
#worldrank th:nth-child(6) {
	text-align: left;
	width: 20%;
	padding-left: 40px;
}

#worldrank td:nth-child(6) {
	letter-spacing: 0px;
	font-size: 24px;
}

#worldrank td:nth-child(6) a {
	color: white;
	text-decoration: none;
}
#worldrank td:nth-child(6) a:hover {
	color: yellow;
	text-decoration: underline;
}
#worldrank td .flag {
	margin-left: auto;
	margin-right: auto;
	width: 72px;
}

section .leaderboards .row {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	padding: 18px;
	display: grid;
	grid-template-columns: 2.5fr 1.5fr 4fr 4fr;
	background: rgba(23, 21, 100, 0.8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-weight: bold;
}

section:nth-child(3) .button {
	display: inline-block;
	margin-top: 30px;
}

section .leaderboards .row:hover {
	background: rgb(42 39 135);
	box-shadow: 0 0 0px 2px yellow inset, 0 0 24px 2px yellow inset;
}

section .leaderboards .row .column:first-child,
section .leaderboards .row .column:nth-child(2) {
	font-size: 13px;
}

section .leaderboards .row .column:first-child {
	line-height: 32px;
}

section .leaderboards .row .column:nth-child(2) {
	margin-top: 5px;
}

section .leaderboards .row .column:nth-child(3),
section .leaderboards .row .column:nth-child(4) {
	text-align: left;
	font-size: 19px;
	line-height: 24px;
	line-height: 32px;
}

section .leaderboards .row .column:nth-child(4) {
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 19px;
	letter-spacing: -3px;
	text-align: right;
	color: yellow;
}

section .leaderboards .row {
	color: white;
	text-decoration: none;
}

section .leaderboards .row:hover,
section .leaderboards .row *:hover {
	cursor: pointer;
}

section .leaderboards .row:hover .column:nth-child(3) {
	color: yellow;
}

.row .flag img {
	width: 26px;
}

video {
	width: 100%;
	min-width: 1920px;
	position: absolute;
	z-index: -12;
	left: 50%;
	top: 50%;
	display: block;
	transform: translateX(-50%) translateY(-50%);
}

.start-content {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-25%);
	z-index: 10;
}

.logo {
	text-indent: -10000px;
	background: url("../img/bk-logo.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1020px;
	width: 100%;
	height: 310px;
	margin-bottom: 0;
}

.start-content p {
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	display: block;
	margin-bottom: 80px;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	font-size: 26px;
	line-height: 38px;
	font-weight: bold;
}

.button {
	font-family: "Aviano900italic";
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	letter-spacing: -3px;
	font-size: 20px;
	text-transform: uppercase;
	border: 2px solid yellow;
	padding: 20px 40px;
	color: yellow;
	text-decoration: none;
	margin-left: 10px;
	margin-right: 10px;
	background: #111033;
	background: linear-gradient(
		0deg,
		rgba(1, 0, 27, 1) 0%,
		rgba(5, 15, 101, 1) 49%,
		rgba(2, 26, 121, 1) 51%,
		rgba(6, 45, 107, 1) 100%
	);
	position: relative;
}

.button:hover,
.alloffers:hover {
	cursor: pointer;
	background: yellow !important;
	color: white;
	text-decoration: none;
	box-shadow: 0 0 24px 8px yellow;
}

.btn-kickstart {
	color: black !important;
	background: linear-gradient(
		309deg,
		rgb(249, 255, 10) 0%,
		rgb(251, 255, 122) 18%,
		rgb(175, 189, 37) 35%,
		rgb(232, 255, 1) 54%,
		rgb(184, 200, 26) 69%,
		rgb(240, 255, 91) 87%,
		rgb(232, 255, 1) 100%
	) !important;
	text-shadow: rgb(255, 255, 255) -2px -2px 0px,
		rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
		rgb(255, 255, 255) 2px 2px 0px !important;
}

.btn-kickstart span {
	text-transform: none !important;
	padding: 4px 10px;
	border-radius: 7px;
	background: darkred;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	border: 2px solid black;
	top: -15px;
	letter-spacing: 0px;
	display: block;
	z-index: 1;
	right: -10px;
	font-size: 14px;
	font-weight: bold;
	text-shadow: none !important;
}

a:hover {
	cursor: pointer;
}

.overlaybg {
	width: 100%;
	height: 100%;
	background: url("../img/output-onlinegiftools3.gif");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	mix-blend-mode: screen;
	left: 0;
	top: 0;
	z-index: -5;
	animation: anim-onoff 4s linear infinite;
}

.overlaybg2 {
	width: 100%;
	height: 100%;
	background: url("../img/output-onlinegiftools.gif");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	mix-blend-mode: overlay;
	left: 0;
	top: 0;
	z-index: -9;
	animation: anim-onoff 10s linear infinite;
}

.videoline {
	width: 100%;
	height: 100%;
	background: url("../img/line-shade.png");
	background-position: center center;
	background-repeat: repeat;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

.videooverlay {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -6;
	background: linear-gradient(0deg, #171564 0%, rgba(12, 102, 218, 0) 40%);
}

#prizes .videoline,
#created .videoline {
	background: black;
}

#created .feature {
	background: none;
	filter: none;
	border: none;
}

#kickstart {
	background: url("../img/winners.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #5574f9;
	background-blend-mode: hard-light;
}

#worldmap {
	background: url("../img/global.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #171564;
	background-blend-mode: screen;
}

@keyframes anim-onoff {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	41% {
		opacity: 0;
	}

	71% {
		opacity: 0;
	}

	72% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

.features {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.feature {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: white;
	padding: 20px;
	border-radius: 16px;
	background: rgb(23 21 100);
	position: relative;
	/*
    border: 2px solid yellow;
    filter: drop-shadow(1px 1px 0px #000) drop-shadow(-1px -2px 0px #000) drop-shadow(1px 0px 0px #000) drop-shadow(-1px 1px 0px #000);
*/
}

.feature h2 {
	color: yellow;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
}

.feature img {
	height: 250px;
}

#kickstart .feature img {
	height: 380px;
}

.adcoins {
	position: absolute;
	color: yellow;
	font-family: "Aviano900italic", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 100px;
	letter-spacing: -22px;
	left: 145px;
	top: 173px;
	text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000,
		4px 4px 0 #000;
}

a.feature {
	text-decoration: none;
}

a.feature *:hover {
	cursor: pointer;
}
a.feature:hover {
	filter: none;
	box-shadow: 0 0 24px 4px yellow;
}

a.feature:hover h2 {
	color: white;
}

footer {
	text-align: left;
	background: black;
}

footer,
footer p {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	letter-spacing: 0px;
	color: white;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
}

footer p {
	margin-top: 10px;
}

footer .inner {
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	color: white;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 20px;
	padding-top: 40px;
	padding-bottom: 60px;
}

footer ul {
	list-style: none;
}

footer li {
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
	letter-spacing: -2px;
	font-weight: bold;
	color: white;
	font-size: 18px;
}

footer .inner a {
	letter-spacing: 0px;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	padding: 4px 0px;
	display: block;
	color: yellow;
	text-decoration: none;
}

footer .inner a:hover {
	cursor: pointer;
	color: white;
	text-decoration: underline;
	filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black)
		drop-shadow(0px 0px 6px white) drop-shadow(0px 0px 16px white);
}

.single-page {
	background: #030946 !important;
	padding: 20px 40px;
	text-align: left;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	height: auto !important;
	border: 2px solid yellow;
	margin-bottom: 80px;
	margin-top: 150px;
}

.videolinefix {
	position: fixed;
	z-index: -10;
	background-color: #5574f9;
}

.single-page p {
	margin-bottom: 20px;
	line-height: 31px;
}

.single-page h2 {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	color: yellow;
	font-size: 32px;
	letter-spacing: -4px;
}

.single-page h3 {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	color: white;
	font-size: 26px;
	margin-bottom: 16px;
	padding-top: 20px;
}

.single-page h4 {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	color: white;
	font-size: 18px;
	margin-bottom: 10px;
}

.single-page ul {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	line-height: 24px;
	color: white;
	margin-left: 20px;
	margin-bottom: 30px;
}

#single-prizes {
	max-width: 1520px;
}

#single-prizes #prizes div img {
	margin-bottom: 30px;
}

#single-prizes .extra_ammo,
#single-prizes .extra_secrets,
#single-prizes .extra_continues,
#single-prizes .coins {
	color: yellow;
	text-align: center;
	font-family: "Aviano900italic", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 42px;
	letter-spacing: -7px;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	padding-top: 20px;
}

.single-page .itemth {
	border-bottom: 1px solid yellow;
	color: white;
	padding-bottom: 10px;
	font-family: "Aviano700italic", "Roboto", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: -3px;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
}

#single-prizes .itemth div {
	text-align: center;
}

#single-prizes .item {
	border-bottom: 1px solid yellow;
}

#single-prizes .itemth div:first-child {
	text-align: left;
}

#single-prizes #prizes {
	background: none;
}

#single-prizes .item {
	display: grid;
	grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
}
#single-prizes #closeprizes {
	display: none;
}

#helpout {
	background: url("../img/donate-orange.jpg");
	background-size: cover;
	background-position: center center;
	padding-top: 320px;
	padding-bottom: 340px;
}
#faq .faq-container p {
	margin-bottom: 0;
	padding-bottom: 20px;
}
#faq .faq-container {
	border-top: 1px solid yellow;
}
#faq .faq-container p {
	display: none;
}
#faq .faq-container:hover,
#faq .faq-container *:hover {
	cursor: pointer;
}
#faq .faq-container:hover h3 {
	color: yellow;
}

#helpout p {
	margin-bottom: 60px;
}

.helpout:hover {
	box-shadow: 0 0 24px 4px yellow;
}

#alloffers #start {
	height: 40%;
}

a.inhouse-banner {
	margin-left: auto;
	margin-right: auto;
	width: 1600px;
	height: 210px;
	display: block;
	transition: 0.4s ease;
}
#offers a.inhouse-banner {
	margin-top: 40px;
}
a.inhouse-banner:hover {
	animation: banner-hover 0.5s ease-out 1 forwards;
}
@keyframes banner-hover {
	0% {
		filter: brightness(4);
		box-shadow: 0 0 32px 8px yellow;
	}
	100% {
		filter: brightness(1);
		box-shadow: 0 0 0px 0px yellow;
	}
}

:root {
	--flagwidth: 102px;
	--blur: calc((var(--flagwidth) / 100) * 10);
}

#worldrank .flag {
	overflow: hidden;
	position: relative;
	aspect-ratio: 1.35;
}

#worldrank .flag:after {
	position: absolute;
	left: 0;
	display: block;
	filter: blur(var(--blur));
	content: "";
	transform: translateY(-115%) rotate(-45deg);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 24%,
		rgba(255, 255, 255, 1) 73%,
		rgba(255, 255, 255, 0) 100%
	);
	width: 200%;
	height: 75%;
	opacity: 1;
	mix-blend-mode: soft-light;
	animation: flag-shadow 4s linear infinite;
}

#worldrank .flag:before {
	z-index: 20;
	position: absolute;
	left: 0;
	opacity: 1;
	mix-blend-mode: soft-light;
	display: block;
	filter: blur(var(--blur));
	content: "";
	transform: translateY(15%) rotate(-45deg);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 24%,
		rgba(255, 255, 255, 1) 73%,
		rgba(255, 255, 255, 0) 100%
	);
	width: 200%;
	height: 75%;
	animation: flag-shadow 6s linear infinite;
	animation-delay: 1s;
}

@keyframes flag-shadow {
	0% {
		left: -200%;
	}

	100% {
		left: 110%;
	}
}

.winprizes {
	width: 480px;
	position: absolute;
	right: -40px;
	bottom: -90px;
	transition: all 0.3s ease-in-out;
}

.winprizes img {
	width: 480px;
	transition: all 0.1s ease-in-out;
	filter: drop-shadow(0 0 24px yellow);
}

.winprizes .thisprize {
	width: 300px !important;
	height: 300px !important;
	position: absolute !important;
	top: -100px !important;
	left: 69px !important;
	z-index: -10 !important;
}
.winprizes:hover,
.winprizes img:hover {
	cursor: pointer;
}

.winprizes:hover {
	transform: translateY(-15px);
}

.winprizes:hover img {
	filter: drop-shadow(0 0 6px yellow) drop-shadow(0 0 16px yellow)
		drop-shadow(0 0 32px yellow) brightness(1.3);
}

.developerschoice {
	position: absolute;
	bottom: -30px;
	left: 30px;
	background: url("../img/getedge.png");
	background-size: 100%;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	z-index: -1;
}

.cartoonviolence {
	position: absolute;
	bottom: -30px;
	left: 140px;
	background: url("../img/cartoonviolence.png");
	background-size: 100%;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	z-index: -1;
}

#cookie {
	position: fixed;
	z-index: 10000;
	bottom: 20px;
	left: 50%;
	color: white;
	box-shadow: 4px 8px 16px 2px rgba(0, 0, 0, 0.5);
	background: #3e3e3e;
	padding: 20px;
	text-align: left;
	max-width: 520px;
	transform: translateX(-50%);
	border-radius: 12px;
	font-size: 12px;
}

#cookie p {
	font-weight: normal;
	font-size: 14px;
	text-shadow: none;
	text-align: left;
	float: left;
	margin-bottom: 0px;
	width: 69%;
	line-height: 17px;
	padding-bottom: 0px;
}

#cookie button {
	font-family: "Aviano900italic";
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	letter-spacing: -3px;
	font-size: 20px;
	text-transform: uppercase;
	border: 2px solid yellow;
	padding: 20px 40px;
	color: yellow;
	text-decoration: none;
	margin-left: 20px;
	background: #111033;
	background: linear-gradient(
		0deg,
		rgba(1, 0, 27, 1) 0%,
		rgba(5, 15, 101, 1) 49%,
		rgba(2, 26, 121, 1) 51%,
		rgba(6, 45, 107, 1) 100%
	);
	position: relative;
}
#cookie button:hover {
	cursor: pointer;
	background: yellow !important;
	color: white;
	text-decoration: none;
	box-shadow: 0 0 24px 8px yellow;
}

#terms p,
#news p {
	font-weight: normal;
}

#single-news {
	color: white;
	max-width: 1600px;
	margin-top: 30px;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

#news {
	position: relative;
	float: left;
	width: 400px;
	margin-right: 80px;
}
#news .settings-content a:hover {
	color: yellow !important;
}
#news .settings-content h3 {
	padding-top: 0;
	font-size: 21px;
}
#news .settings-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#news .settings-content input {
	width: 100%;
	padding: 10px;
	font-size: 16px;
}

#news .settings-content ul a {
	padding-top: 4px;
	padding-bottom: 4px;
	display: block;
	color: white;
}

#news .settings-content ul a:hover,
#news .settings-content ul a *:hover {
	color: yellow;
	cursor: pointer;
}
.newslist {
	margin-left: 480px;
}
.newslist h2 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	font-size: 36px;
	color: white;
	margin-bottom: 0;
}
.newslist a {
	margin-bottom: 60px;
	display: block;
	text-decoration: none !important;
	color: white;
}
.newslist a:hover h2,
.newslist a:hover .readmore {
	text-decoration: none;
	color: yellow;
	cursor: pointer;
}
.newslist a *:hover {
	cursor: pointer;
}
.newslist .gamelink {
	display: inline-block !important;
	color: yellow !important;
	margin-bottom: 0 !important;
}
.newslist .gamelink:hover {
	color: white !important;
	text-decoration: underline !important;
}
.newslist .joke {
	font-size: 18px;
	color: lightgray;
	background: rgba(0, 0, 0, 0.2);
	padding: 20px;
	font-style: italic;
	margin-top: 40px;
	display: block;
}
.searchresult h2 {
	font-size: 24px !important;
}
.searchresult p {
	margin-top: 0px !important;
	font-size: 18px !important;
}
.searchresult a {
	margin-bottom: 0px;
}
.newscontainer span {
	font-size: 14px;
	color: gray;
	margin-right: 10px;
	border-radius: 5px;
	padding: 2px 6px;
	display: inline-block;
}
.newscontainer ul {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		2px 2px 0 #000;
	color: white;
	padding-left: 40px;
}
.newscontainer ul li {
	text-align: left;
}
.newslist .loadMoreBtn {
	display: block;
	border: 1px solid yellow;
	width: 100%;
	background: transparent;
	color: yellow;
	padding: 20px;
	font-size: 18px;
	font-weight: bold !important;
}
.newslist .loadMoreBtn:hover {
	color: white;
	cursor: pointer;
	background: black;
}
.newstag {
	font-size: 13px;
	font-weight: normal;
	background: black;
	border: 1px solid yellow;
	color: yellow;
	margin-right: 7px;
	border-radius: 5px;
	padding: 0px 10px;
	text-shadow: none;
	display: inline-block;
}
.newstag:hover {
	background: yellow;
	cursor: pointer;
	color: black;
}
.newscontainer .image {
	position: relative;
	margin-top: 10px;
	display: inline-block;
	width: 100%;
	transition: 1s ease-in-out;
	filter: brightness(1);
}
.newscontainer img {
	width: 100%;
	left: 0;
	top: 0;
}
.newscontainer .newsprize {
	background: transparent;
	position: absolute;
	max-height: 60%;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 100;
}
.newscontainer .news-back {
	display: inline-block;
	margin-bottom: 0;
	font-weight: bold;
	color: yellow;
	border: 1px solid yellow;
	padding: 10px 20px;
}

.newscontainer .news-back:hover {
	cursor: pointer;
	color: white;
}
.newscontainer a:hover img {
	animation: anim-newshover 1s ease-in-out forwards;
}
@keyframes anim-newshover {
	0% {
		filter: brightness(4);
	}
	100% {
		filter: brightness(1);
	}
}
.newscontainer p {
	font-weight: normal;
	margin-top: 12px;
	margin-bottom: 0;
}

.news-container {
	display: flex;
	margin-bottom: 80px;
}

.news-container .newscontainer {
	width: calc(25% - 10px);
	margin-left: 10px;
	color: white;
	border-radius: 16px;
	background-color: #171564;
	background-blend-mode: screen;
	border: 2px solid yellow;
	background-size: cover;
	background-position: center 80px;
	background-repeat: no-repeat;
	filter: drop-shadow(0px 4px 4px #000);
	transition: transform 0.3s ease-in-out;
}
.news-container .newscontainer:nth-first-child() {
	margin-left: 0;
	width: 25%;
}

.news-container .newscontainer p {
	text-align: left;
	font-size: 18px;
	padding: 0 20px 20px 20px;
}
.news-container .newscontainer a h2 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 26px;

	letter-spacing: 0;
	text-transform: none;
}
.news-container .newscontainer a {
	text-decoration: none !important;
	display: block;
}
.news-container .newscontainer:hover,
.news-container .newscontainer *:hover {
	cursor: pointer;
}
.news-container .newscontainer:hover {
	background: black;
	transform: translateY(-10px);
}
.news-container .newscontainer a:hover h2,
.news-container .newscontainer a:hover .readmore {
	color: yellow !important;
}

#connection-status {
	position: fixed;
	bottom: 40px;
	z-index: 300000000;
	left: 40px;
	border-radius: 12px;
	background: #4a4a4a;
	color: white;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	text-align: center;
	display: block;
	padding: 20px 30px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}

#ccc {
	background: url("../img/ccc-contest.png");
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	position: absolute;
	z-index: 30000;
	width: 330px;
	height: 190px;
	content: "";
	display: block;
	bottom: 440px;
	right: 30px;
	background-repeat: no-repeat;
	background-position: center center;
	transition: 0.3s ease-in-out;
}

#ccc:hover {
	transform: translateY(-15px);
	filter: drop-shadow(0 0 8px yellow) drop-shadow(0 0 24px yellow);
}

.sociallinks {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
}

.link-facebook {
	background: url("../svg/facebook.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 36px;
	filter: invert(1);
	display: block;
	content: "";
	text-indent: -10000px;
	overflow: hidden;
}
.link-youtube {
	background: url("../svg/youtube.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 32px;
	filter: invert(1);
	display: block;
	content: "";
	text-indent: -10000px;
	overflow: hidden;
}
.link-tiktok {
	background: url("../svg/tiktok.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 32px;
	filter: invert(1);
	display: block;
	content: "";
	text-indent: -10000px;
	overflow: hidden;
}
.sociallinks a {
	max-width: 36px;
	max-height: 36px;
	opacity: 0.5;
}
.sociallinks a:hover {
	filter: invert(1) !important;
	opacity: 1;
	cursor: pointer !important;
}