.nav {
	min-width: 567px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	place-items: center;
	width: 100%;
	padding: 30px 0;
	/* height: 90px; */
	background-color: #202020f2;
	position: fixed;
	top: 0;
	z-index: 1000;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
	background: color(#202020f2), transparent;
	backdrop-filter: blur(5px);
}
.nav-inner {
	width: 90%;
	display: flex;
	justify-content: center;
}
.nav-button {
	display: none;
	gap: 10px;
	width: 35%;
}
.button {
	font-family: 'Bold';
	background-color: white;
	border-radius: 3px;
	width: 45px;
	display: flex;
	justify-content: center;
	place-items: center;
	text-align: center;
	text-decoration: none;
	color: #202020;
	font-size: 1.3rem;
	box-shadow:
		-5px -5px 10px rgba(0, 0, 0, 0.5),
		5px 5px 10px rgba(0, 0, 0, 0.5),
		inset -2px -2px 5px rgba(0, 0, 0, 0.5);
	border: none;
	transition: all 0.2s ease;
}
.nav-button-play {
	font-family: 'Bold';
	background-color: white;
	border-radius: 3px;
	width: 45px;
	display: flex;
	justify-content: center;
	place-items: center;
	text-align: center;
	text-decoration: none;
	color: #202020;
	font-size: 1.3rem;
	box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.5);
	border: none;
}
#play-button {
	width: fit-content;
}
.nav-logo {
	display: flex;
	justify-content: center;
	width: 40%;
}
.nav-server {
	display: none;
	justify-content: right;
	gap: 10px;
	width: 35%;
}
.enderice-logo {
	width: 50%;
	position: absolute;
}
.button-inner {
	background-color: unset;
	border: none;
	padding: 0 15px 2px 15px;
	height: 100%;
	font-family: 'Bold';
	font-size: 1.3rem;
	cursor: pointer;
}
#discord {
	padding: unset;
	background-color: var(--discord);
	height: 43px;
	width: auto;
	aspect-ratio: 1/1;
}
#button-icon {
	margin: 0;
}

.button.shining {
	background-repeat: no-repeat;
	background-position:
		-120px -120px,
		0 0;

	background-image: -webkit-linear-gradient(
		top left,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(165, 165, 165, 0.8) 45%,
		rgba(255, 255, 255, 0) 50%
	);
	background-image: -moz-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(110, 185, 255, 0.8) 45%,
		rgba(255, 255, 255, 0) 50%
	);
	background-image: -o-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0) 50%
	);
	background-image: linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0) 50%
	);

	-moz-background-size:
		250% 250%,
		100% 100%;
	background-size:
		250% 250%,
		100% 100%;

	-webkit-transition: background-position 0s ease;
	-moz-transition: background-position 0s ease;
	-o-transition: background-position 0s ease;
	transition: background-position 0s ease;
}

.button.shining:hover {
	background-position:
		0 0,
		0 0;

	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.button-text {
	display: flex;
	width: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}
.nav-temp {
	width: 30%;
}
.nav-burgur {
	width: 30%;
	display: flex;
	justify-content: right;
}
.burgur-button {
	font-family: 'Bold';
	background-color: #303030;
	border-radius: 5px;
	width: fit-content;
	height: 50px;
	display: flex;
	padding: 0 13px;
	justify-content: center;
	place-items: center;
	text-align: center;
	text-decoration: none;
	color: white;
	font-size: 1.8rem;
	box-shadow: inset 0px -1px 5px rgba(0, 0, 0, 0.5);
	border: none;
	cursor: pointer;
}
.burgur-button-active {
	background-color: white;
	color: #303030;
}
.burgur-container {
	/* padding: 90px 0 0 0; */
	width: 90%;
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}
.burgur-list {
	list-style: none;
	padding: 0;
}
.burgur-each {
	height: 60px;
	width: 100%;
	margin: 15px 0;
}
.burgur-link-button {
	padding: 0 20px;
	display: flex;
	place-items: center;
	height: 100%;
	border-radius: 5px;
	border: none;
	background-color: white;
	color: #202020;
	text-decoration: none;
	box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
#burgur-icon {
	font-size: 1.8rem;
	width: 40px;
}
.burgur-text {
	font-size: 1.6rem;
	padding: 0 0 5px 0;
}
#burgur-discord {
	background-color: var(--discord);
	color: white;
}
#discord-text {
	padding: 0 0 8px 0;
}
#discord-icon {
	text-align: left;
	font-size: 1.8rem;
	width: 45px;
}
#play-text {
	font-family: 'Bold';
	padding: 0 0 5px 0;
}
#burgur-play {
	background-color: var(--play);
}

.toast {
	display: flex;
	justify-content: center;
	place-items: center;
	padding: 0 0 5px 0;
	visibility: hidden;
	min-width: 160px;
	background-color: #4caf50;
	font-size: 1.4rem;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	height: 45px;
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 1000;
	opacity: 0;
	transition:
		opacity 0.3s ease,
		visibility 0s linear 0.3s;
}

.toast.show {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s ease;
}
@media (min-width: 576px) {
}

@media (min-width: 768px) {
	.burgur-link-button {
		justify-content: center;
	}
}
@media (min-width: 992px) {
	.nav-logo {
		width: 30%;
	}
	.enderice-logo {
		width: 30%;
	}
	.nav-button {
		display: flex;
	}
	.nav-server {
		display: flex;
	}
	.nav-burgur {
		display: none;
	}
	.nav-temp {
		display: none;
	}
	.burgur-container {
		display: none;
	}
	.button:hover {
		width: fit-content;
		padding: 0 10px;
	}
	#home:hover #home-text {
		width: fit-content;
		margin: 0 0 0 5px;
	}
	#store:hover #store-text {
		width: fit-content;
		margin: 0 0 0 5px;
	}
	#guide:hover #guide-text {
		width: fit-content;
		margin: 0 0 0 5px;
	}
}
@media (min-width: 1200px) {
	#home:hover #home-text {
		width: fit-content;
		margin: 0;
	}
	#store:hover #store-text {
		width: fit-content;
		margin: 0;
	}
	#guide:hover #guide-text {
		width: fit-content;
		margin: 0;
	}
	.button-text {
		display: flex;
		width: fit-content;
		padding: 0 0 0 5px;
	}
	.button {
		width: fit-content;
		padding: 0 10px;
	}
}