@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700");

* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}

/* body{
	background-color:#333;
} */

.wrap {
	width: 100%;
	height: 100%;
	/* display: flex;
	justify-content: center;
	overflow: hidden; */
	background: #333;
}

.layerLock {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	align-items: center;
	background: #2a3546;
	/* display: flex; */
	display: none;
	justify-content: center;
	min-height: 100vh;
	font-family: "Source Code Pro", monospace;
	flex-direction: column;
	-webkit-justify-content: center;
	-webkit-align-items: center;
}

#combo-lock #indicator {
	border: 2px solid #070707;
	border-radius: 50%;
	height: 32px;
	margin: 0 auto 24px;
	overflow: hidden;
	position: relative;
	width: 32px;
}

#combo-lock #indicator.locked svg.unlocked {
	transform: translate(-50%, 50%);
}

#combo-lock #indicator.unlocked svg.locked {
	transform: translate(-50%, -100%);
}

#combo-lock #indicator.unlocked svg.unlocked {
	transform: translate(-50%, -50%);
}

#combo-lock #indicator svg {
	padding: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
	width: 16px;
}

#combo-lock #indicator svg.locked {
	background: #f56666;
}

#combo-lock #indicator svg.unlocked {
	background: #50EF87;
}

#combo-lock #combination {
	border: 2px solid #070707;
	border-radius: 4px;
	display: flex;
	padding: 0 4px;
}

#combo-lock #combination .wheel {
	font-size: 24px;
	padding: 0 4px;
	text-align: center;
}

#combo-lock #combination .wheel .increment,
#combo-lock #combination .wheel .decrement {
	background: #1d242f;
	border: 2px solid #070707;
	border-radius: 50%;
	cursor: pointer;
	height: 24px;
	position: relative;
	transition: border-color 0.1s ease;
	width: 24px;
}

#combo-lock #combination .wheel .increment:active,
#combo-lock #combination .wheel .decrement:active {
	border-color: #fff;
}

#combo-lock #combination .wheel .increment.click,
#combo-lock #combination .wheel .decrement.click {
	border-color: #fff;
	transition: border-color 0s ease;
}

#combo-lock #combination .wheel .increment img,
#combo-lock #combination .wheel .decrement img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
}

#combo-lock #combination .wheel .increment {
	margin-top: -14px;
}

#combo-lock #combination .wheel .decrement {
	margin-bottom: -14px;
}

#combo-lock #combination .wheel .digit {
	-moz-appearance: textfield;
	background: #1d242f;
	border: 2px solid #070707;
	border-radius: 24px;
	caret-color: #1d242f;
	color: #fff;
	cursor: pointer;
	margin: 8px 0;
	outline: none;
	padding: 8px 0;
	text-align: center;
	user-select: none;
	transition: border-color 0.1s ease;
	width: 24px;
}

#combo-lock #combination .wheel .digit:focus {
	border-color: #fff;
}

#combo-lock #combination .wheel .digit::-webkit-inner-spin-button,
#combo-lock #combination .wheel .digit::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#combo-lock #combination .wheel .digit::selection {
	background: transparent;
}

.layerLockClose {
	margin-top: 30px;
	text-align: center;
}

.layerLockClose>button {
	border: 2px solid #070707;
	background-color: #50EF87;
	padding: 5px 10px;
	font-family: "Source Code Pro", monospace;
	font-weight: bold;
	font-size: 12px;
}



.mainTitleWrap {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.mainTitleWrap svg.mainBubble {
	width: 30%;
	animation: rotate infinite linear;
	/* mix-blend-mode: multiply; */
	margin: 0 -8%;
}

.mainTitleWrap svg.mainBubble:nth-child(1) {
	fill: tomato;
	animation-duration: 4s;
}

.mainTitleWrap svg.mainBubble:nth-child(2) {
	fill: gold;
	animation-duration: 2s;
	animation-direction: reverse;
}

.mainTitleWrap svg.mainBubble:nth-child(3) {
	fill: lime;
	animation-duration: 6s;
}

.mainTitleWrap svg.mainBubble:nth-child(4) {
	fill: turquoise;
	animation-duration: 3s;
	animation-direction: reverse;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg)
	}
}

.mainTitleWrap h1.mainTitle {
	position: absolute;
	width: fit-content;
	height: fit-content;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	color: white;
	letter-spacing: .5em;
	font-size: 10vw;
	animation: text 1s infinite;
	mix-blend-mode: screen;
}

@keyframes text {
	0% {
		text-shadow: 5px 0px 0px tomato;
	}

	10% {
		text-shadow: -5px -5px 0px gold;
	}

	20% {
		text-shadow: 5px 0px 0px lime;
	}

	30% {
		text-shadow: 5px 0px 0px turquoise;
	}

	40% {
		text-shadow: 5px 5px 0px tomato;
	}

	50% {
		text-shadow: 0px -5px 0px gold;
	}

	60% {
		text-shadow: 0px 5px 0px lime;
	}

	70% {
		text-shadow: 5px 0px 0px turquoise;
	}

	80% {
		text-shadow: 5px -10px 0px tomato;
	}

	90% {
		text-shadow: 5px 5px 0px gold;
	}

	100% {
		text-shadow: 5px 0px 0px lime;
	}
}

.btnWrap {
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.topBtnWrap {
	top: 0;
	text-align: right;
}

.badge {
	position: relative;
	margin: 1.5em 3em;
	width: 4em;
	height: 6.2em;
	border-radius: 10px;
	display: inline-block;
	top: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

.badge:before,
.badge:after {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: inherit;
	background: inherit;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.badge:before {
	transform: rotate(60deg);
}

.badge:after {
	transform: rotate(-60deg);
}

.badge:hover {
	top: -4px;
}

.badge .circle {
	width: 60px;
	height: 60px;
	position: absolute;
	background: #fff;
	z-index: 10;
	border-radius: 50%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}

.badge .circle i.fa {
	font-size: 2em;
	margin-top: 8px;
}

.badge .circle svg {
	margin-top: 8px;
}

.badge .font {
	display: inline-block;
	margin-top: 1em;
}

.badge .ribbon {
	position: absolute;
	border-radius: 4px;
	padding: 5px 5px 4px;
	width: 100px;
	z-index: 11;
	color: #fff;
	bottom: 12px;
	left: 50%;
	margin-left: -55px;
	height: 15px;
	font-size: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	text-transform: uppercase;
	background: linear-gradient(to bottom right, #555 0%, #333 100%);
	text-align: center;
	font-family: 'Poppins', sans-serif;
	line-height: 15px;
	/* font-family: "Comfortaa", sans-serif; */
}

.yellow {
	background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
	color: #ffb300;
}

.orange {
	background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
	color: #f68401;
}

.pink {
	background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
	color: #dc306f;
}

.red {
	background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
	color: #c62828;
}

.purple {
	background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
	color: #7127a8;
}

.teal {
	background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
	color: #34a297;
}

.blue {
	background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
	color: #259af3;
}

.blue-dark {
	background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
	color: #1c68c5;
}

.green {
	background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
	color: #7cb342;
}

.green-dark {
	background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
	color: #00944a;
}

.silver {
	background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
	color: #9e9e9e;
}

.gold {
	background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
	color: #b7892b;
}

@media only screen and (max-width:768px) {
	.btnWrap {
		font-size: 13px;
	}

	.badge {
		margin: 1.5em 2.5em;
	}

	.badge .circle {
		width: 52px;
		height: 52px;
	}

	.badge .ribbon {
		width: 90px;
		margin-left: -50px;
		bottom: 5px;
	}


}