/*style for the nexus hub world / hub island*/

@import url(colors.css);

@font-face {
	font-family: minecraft_seven_v2;
	src: url(/assets/fonts/Minecraft-Seven_v2.ttf);
}

body {
	margin: 0;
	font-family: minecraft_seven_v2;
}

.wip {
	border-color: #8c8c8c;
	border-width: -2px;
	border-style: dotted;
}

.pixelart {
	image-rendering: pixelated;
}

#bg-container {
	z-index: -10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at top left, rgb(246, 255, 217), rgb(69, 184, 255) 100%);
	/* background: linear-gradient(rgb(84, 143, 162), rgb(255, 255, 255)) */
}

#bg-container li {
	/*sick ass background gradient */
	overflow-x: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1024px;
	animation: bg_scroll 10s linear infinite;
	background-color: rgb(242, 250, 255);
}

@keyframes bg_scroll {
	to {
		background-position: -1024px 0;
	}
}

/* starting with the button carousel */
/* web_buttons is the container. Then we have two identical ul (one hidden from screenreaders) to make seamless scroll possible */
.web_buttons {
	margin: 0px auto 50px;
	padding: 20px 0px;
	/* width: 100%; */
	overflow: hidden;
	display: flex;

	/* >* {
		flex: 0 0 100%;
	} */
	image-rendering: pixelated;

	>ul {
		display: flex;
		gap: 50px;
		/* Add padding to the right to create a gap between the last and first card. */
		padding-left: 50px;

		list-style-type: none;
		will-change: transform;
		/* We should be nice to the browser - let it know what we're going to animate. */
		animation: websites_scroll 30s linear infinite;
	}

	&:hover>ul {
		animation-play-state: paused;
	}
}

.web_button {
	image-rendering: pixelated;
	transition: transform .2s;



	width: 200px;
	height: 100px;
	color: white;

	/* the flyer */
	& img {
		position: relative;
		top: 0;
		left: 0;
	}

	/* the banner/button */
	& a {
		height: 31px;
		width: 88px;
		z-index: 10;
		position: absolute;
		top: 50px;

		>p {
			color: var(--color_darkpurple);
			top: 0px;
			z-index: -1;
			background: none !important;
			margin: 0% !important;
			white-space: nowrap;
			position: absolute;
			/* text-shadow: 2px 2px 2px #000; */
			pointer-events: none;
			font-size: 12px !important;
			opacity: 0%;
			font-weight: 400;
		}
	}

	/* Scale up on hover */
	&:hover {
		transform: scale(1.5);

		>a>p {
			z-index: 100;
			transform: translate(0px, -50px);
			transition: all 0.2s ease-in-out;
			opacity: 100%;
		}
	}
}

@keyframes websites_scroll {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0%);
	}
}

.middle {
	display: flex;

	& * {
		z-index: 3;
	}

	& .left,
	.right {
		margin: 1%;
	}

	& .left {
		flex: 1 1 auto;
	}

	& .menu_container {
		flex: 1 1 auto;
	}

	& .right {
		flex: 1 1 auto;

	}
}

@media (max-width: 768px) {
	.middle .left {
		display: none
	}

	.middle .right {
		display: none
	}
}

.menu_container {
	display: flex;
	min-width: 200px;
	width: 60%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	text-align: center;

	>* {
		position: relative;
	}

}

@media (max-width: 768px) {
	.menu_container {
		max-width: 500px;
	}
}

.pillar {
	transform: scaleY(1.2);

	& img {
		width: 100px;
		position: relative;
	}
}

.pillar .left {
	offset: -100px;
}

.pillar .right {
	offset: +100px;
}

.menu {
	align-self: center;
	--btn-size: 30pt;
	display: grid;
	max-width: 500px;
	grid-template-columns: minmax(200px, 700px);
	/* grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size); */
	grid-template-areas:
		"first"
		"second"
		"third"
		"fourth"
		"fifth";
	grid-gap: 8px;
	position: relative;
	padding: 5px;
	background-color: var(--color_menu_bg);

	/* & button:nth-child(1) {
		grid-area: first;
	} */

	& a {
		height: var(--btn-size);

		cursor: pointer;
		overflow: hidden;
		white-space: nowrap;
		user-select: none;
		background: var(--color_cyan);
		color: var(--color_darkpurple);
		border: 2px solid var(--color_darkpurple);
		align-content: center;
		text-decoration: none;

		&:hover {
			background-color: var(--color_cyan);
			font-weight: bold;
			/* color: var(--color_cyan); */
			/* text-shadow: 2px 2px #ffffffcc; */
			/* color: #85ffeb; */
			box-shadow: rgba(240, 46, 170, 0.4) 1px 1px, rgba(240, 46, 170, 0.4) 1px 1px inset,
				rgba(240, 46, 170, 0.3) 3px 3px, rgba(240, 46, 170, 0.3) 3px 3px inset,
				rgba(240, 46, 170, 0.2) 5px 5px,
				rgba(240, 46, 170, 0.1) 8px 8px,
				rgba(240, 46, 170, 0.05) 10px 10px;
		}

		&:active {
			color: var(--color_purple);
			/* box-shadow: inset -2px -4px #0004, inset 2px 2px #FFF5; */
		}
	}



	& .double {

		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: "left right";
		grid-gap: 8px;

		& :nth-child(1) {
			grid-area: left;
		}

		& :nth-child(2) {
			grid-area: right;
		}
	}


}

.island {
	width: 100%;
	max-width: 2000px;
	padding: 0 0 0 0;
	margin: 0 auto;
	/* margin-top: 20px; */
	position: relative;
	top: -100px;
	padding-top: 100px;
	min-height: 300px;
	display: flex;

	>.ground,
	>.bottom {
		display: flex;
		position: absolute;
		justify-content: center;
		height: 768px;
		width: 100%;

		>* {
			background-repeat: no-repeat;
			background-size: 100% 100%;
			flex: auto auto 1;
			width: 512px;
			height: 100%;
		}

		& * {
			z-index: inherit;
		}
	}

	>.ground {
		z-index: -1;
		top: 0px;

		& .left {
			background-image: url(/assets/backgrounds/ground/Island-top-left.png);
		}

		& .middle {
			background-image: url(/assets/backgrounds/ground/Island-top-middle.png);
		}

		& .right {
			background-image: url(/assets/backgrounds/ground/Island-top-right.png);
		}
	}

	>.bottom {
		z-index: -2;
		top: 512px;

		& .left {
			background-image: url(/assets/backgrounds/ground/Island-bottom-left.png);
		}

		& .middle {
			background-image: url(/assets/backgrounds/ground/Island-bottom-middle.png);
		}

		& .right {
			background-image: url(/assets/backgrounds/ground/Island-bottom-right.png);
		}
	}
}

@media (max-width: 1792px) {

	.island .ground .middle:nth-of-type(2),
	.island .bottom .middle:nth-of-type(2) {
		display: none;
	}
}

@media (max-width: 1024px) {

	.island .ground,
	.island .bottom {
		>* {
			width: 100%;
		}
	}

	.island .ground .left,
	.island .ground .right,
	.island .bottom .left,
	.island .bottom .right {
		display: none;

	}
}

.dragonsden {
	background-image: url(/assets/backgrounds/ground/2026-01-07\ sleep-ground.png);
	z-index: 10;
	background-repeat: no-repeat;
	margin-left: 10%;
	width: 512px;
	height: 512px;
}

#dragon_sleep {
	z-index: 11;
	position: relative;
	background-repeat: no-repeat;
	background-image: url(/assets/dragonpet/fantasydragon-sleeping.gif);
	background-size: 100%;
	width: 512px;
	height: 512px;

	&:hover {
		cursor: grab;
		background-image: url(/assets/dragonpet/fantasydragon-attention.gif);
	}

	&:active {
		cursor: grabbing;
		background-image: url(/assets/dragonpet/fantasydragon-petted.gif );
	}
}

/* @media (pointer:coarse) {
	#dragon_sleep:hover {
		background-image: url(/assets/dragonpet/fantasydragon-petted.gif );
	}
} */

#follow_mouse {
	z-index: 10;
	flex: 1;
	margin-right: 10%;
	margin-top: 50px;
	height: calc(512-50)px;
	text-align: center;
}

@media (max-width: 768px) {
	#follow_mouse {
		display: none
	}
}

/* the webring dock area */
.docks {
	display: flex;
	flex-direction: row;
	min-height: 512px;
	width: fit-content;
	margin: 0 auto;

	>.cargoarea {
		margin: 50px 0px;
		background-repeat: repeat-y;
		width: 200px;
		background-color: rgb(93, 46, 0);

	}
}

@media (max-width: 768px) {
	.docks .cargoarea {
		display: none
	}
}

.webrings {
	padding: 1px;
	display: flex;
	flex-direction: column;
	justify-content: right;

	>.ship {
		justify-content: right;
		justify-items: right;

		>img {
			z-index: 0;
			position: relative;
			right: 0px;
		}
	}

	& .webring {
		height: 150px;
		width: 500px;
		z-index: 10;
		position: absolute;

		&* {
			position: inherit
		}
	}
}


.webring:nth-of-type(1) {
	top: 50px;
}

footer {
	z-index: 10;

	& * {
		z-index: inherit;
	}

	border-top: 2px solid #085052;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 5px;
	background: url(/assets/backgrounds/stonewall.png),
	#e1e4bca2;
	background-size: auto 100%;

	>* {
		/* margin-right: 20px; */
		/* margin-left: 20px; */
		padding-right: 10px;
		padding-left: 10px;
		background: #e9e1d9c6;
	}

	& .copyright {
		justify-content: flex-start;
		text-align: left;
		/* padding-bottom: 0px;
		padding-right: 10%; */
	}

	& .source {
		justify-content: flex-start;
		justify-items: right;
		/* padding-right: 10%; */

		/* position: absolute;
		left: 50%;
		transform: translateX(-50%); */

		& p {
			margin-bottom: 0px;
		}

		& embed {
			justify-items: right;
		}
	}

	& .visitor_counter {
		margin-right: 20px;
		width: 100px;
		/* margin-left: auto; */
	}

	& .construction {
		background: #ffffff00;
		overflow: hidden;
	}
}

@media (max-width: 768px) {
	footer {
		& .construction {
			width: 100%;
			align-items: center;

			& * {
				scale: auto;

			}
		}
	}
}