@import url(colors.css);

/* @media (width: 250px) and (height: 250px) { */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

.plant {
	width: 250px;
	height: 250px;
	/* background: radial-gradient(ellipse at top left, rgb(246, 255, 217), rgb(69, 184, 255) 100%); */

	>.ground {
		background-image: url(/assets/backgrounds/ground/Island-top-middle.png);
		background-size: 100%;
		background-position: 0px 30px;
		background-repeat: repeat-x;

		>.dragonsden {
			background-image: url(/assets/backgrounds/ground/2026-01-07\ sleep-ground.png);
			background-size: 100%;
			z-index: 10;
			background-repeat: no-repeat;
			width: 250px;
			height: 250px;

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

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

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

			}

			& a {

				position: absolute;
				padding: 5px;
				bottom: 10px;
				right: 10px;
				text-align: right;


				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; */
				}
			}
		}
	}

	>#dragonsden_garden_bg {
		z-index: -10;
		position: fixed;
		top: 0;
		left: 0;
		width: 250px;
		height: 250px;
		background: radial-gradient(ellipse at top left, rgb(246, 255, 217), rgb(69, 184, 255) 100%);

		& li {
			background-image: url(/assets/backgrounds/clouds/4.png);
			overflow-x: hidden;
			position: absolute;
			top: 0px;
			left: 0px;
			background-position-x: 0px;
			background-position-y: -130px;
			background-size: 512px;
			width: 250px;
			height: 250px;
			animation: dragonsden_garden_bg_scroll 10s linear infinite;
		}
	}
}

/* } */

@keyframes dragonsden_garden_bg_scroll {
	to {
		background-position-x: -512px;
	}
}