@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.webdragons-wrapper {
	width: 476px;
	height: 156px;
}

.webdragons-container p {
	color: #000 !important;
}

.webdragons-container {
	width: 460px;
	height: 140px;
	border-radius: 16px;
	overflow: hidden;
	border: 3px solid #000;
	box-shadow: 10px 10px 0px 0px #000;
	font-family: "Dela Gothic One";
	background-color: #e9e9e5;
}

.webdragons-header {
	width: inherit;
	height: 38px;
	background-color: #ff8bdd;
	border-bottom: 3px solid #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

p.webdragons-title {
	margin: 0%;
	font-size: 30px;
	margin: 0px 8px 0px 8px;
}

.webdragons-main {
	height: 99px;
	width: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.webdragons-arrow-container {
	height: inherit;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: transparent;
	border-radius: 0%;
	border: none;
	font-family: inherit;
	font-size: inherit;
}

.webdragons-arrow {
	width: 0px;
	height: 0px;
	border-style: solid;
	transition: margin 0.2s ease-in-out;

}

.webdragons-arrow-container:focus {
	outline: none;
}

.webdragons-arrow-left {
	border-width: 25px 40px 25px 0;
	border-color: transparent #000000 transparent transparent;
	margin-left: 48px;
}

.webdragons-arrow-container-left:hover .webdragons-arrow-left {
	margin-right: 20px;
}

.webdragons-arrow-container-left:focus .webdragons-arrow-left {
	margin-right: 20px;
}

.webdragons-arrow-right {
	border-width: 25px 0 25px 40px;
	border-color: transparent transparent transparent #000000;
	margin-right: 48px;
}

.webdragons-arrow-container-right:hover .webdragons-arrow-right {
	margin-left: 20px;
}

.webdragons-arrow-container-right:focus .webdragons-arrow-right {
	margin-left: 20px;
}

.webdragons-arrow-text {
	margin: 0%;
	font-size: 16px;
	filter: opacity(0);
	user-select: none;
	transition: filter 0.2s ease-in-out;
}

.webdragons-arrow-text-left {
	transform: rotate(-90deg) translate(0px, -38px);
}

.webdragons-arrow-container-left:hover .webdragons-arrow-text-left {
	filter: opacity(100);
}

.webdragons-arrow-container-left:focus .webdragons-arrow-text-left {
	filter: opacity(100);
}

.webdragons-arrow-text-right {
	transform: rotate(90deg) translate(0px, -38px);
}

.webdragons-arrow-container-right:hover .webdragons-arrow-text-right {
	filter: opacity(100);
}

.webdragons-arrow-container-right:focus .webdragons-arrow-text-right {
	filter: opacity(100);
}

.webdragons-middle {
	height: inherit;
	width: 260px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.webdragons-button {
	height: inherit;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
	background-color: transparent;
	border-radius: 0%;
	border: none;
	font-family: inherit;
	font-size: inherit;
}

.webdragons-button:focus {
	outline: none;
}

.webdragons-icon {
	height: 50px;
	width: 50px;
	transform: translate(0px, 12px);
	transition: margin 0.2s ease-in-out;
}

.webdragons-icon-text {
	margin: 0%;
	font-size: 16px;
	filter: opacity(0);
	user-select: none;
	transition: filter 0.2s ease-in-out;
	transform: translate(0px, -10px);
}

.webdragons-button-about:hover .webdragons-icon-about {
	margin-bottom: 20px;
}

.webdragons-button-about:focus .webdragons-icon-about {
	margin-bottom: 20px;
}

.webdragons-button-about:hover .webdragons-icon-about-text {
	filter: opacity(100);
}

.webdragons-button-about:focus .webdragons-icon-about-text {
	filter: opacity(100);
}

.webdragons-button-random:hover .webdragons-icon-random {
	margin-bottom: 20px;
}

.webdragons-button-random:focus .webdragons-icon-random {
	margin-bottom: 20px;
}

.webdragons-button-random:hover .webdragons-icon-random-text {
	filter: opacity(100);
}

.webdragons-button-random:focus .webdragons-icon-random-text {
	filter: opacity(100);
}

@media (max-width: 480px) {
	.webdragons-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.webdragons-container {
		width: calc(100vw - 28px);
		transform: translate(-5px, 0px);
	}

	#webdragonsMembershipStatus {
		display: none;
	}
}

@media (max-width: 390px) {
	.webdragons-arrow-container {
		display: none;
	}

	.webdragons-main {
		justify-content: center !important;
	}

	.webdragons-middle {
		width: inherit;
	}
}

@media (max-width: 330px) {
	.webdragons-name {
		font-size: 20px !important;
	}

	.webdragons-header {
		height: 24px !important;
	}

	.webdragons-container {
		height: 126px;
	}
}