@import url("variables.css");

/* idk the white overscroll annoyed me */
html {
	background-color: #ADDAF9;
}

body {
	background: linear-gradient(
		#ADDAF9,
		#ADDAF9 10%,
		var(--back-color) 20%
	);
}

#content {
	padding-top: 0;
}

.calendar {
	height: calc(100vh - var(--navbar-height) - 10rem);
	max-height: 120vw;
	width: 100vw;
	background-color: #acd8fb;
	background-image: url('../img/calendar/snowy.svg');
	background-size: cover;
	background-position: bottom;

	position: relative;
	/* contain snowflakes? */
	overflow: hidden;

	display: flex;
	justify-content: center;
}

.screenshot-mode {
	width: 2160px !important;
	height: 1080px !important;
	max-height:none !important;
}

.foreground-hill {
	min-width: 100%;
	position: absolute;
	background-image: url('../img/calendar/snowy-hilltop.svg');
	background-size: cover;
	background-position: bottom;
	z-index: 10;
}

.tree-wrapper {
	z-index: 20;
}

.tree {
	width: auto;
	-webkit-user-select:none;
	user-select:none;
	cursor:default;
}

.bauble {
	height: 9%;
}

.locked {
	opacity: 0.5;
}

.hover-wrapper:hover {
	filter: drop-shadow(0 0 10px rgba(255, 225, 0, 1));
	transform: rotate(10deg);
}

.hover-wrapper {
	transition: transform .2s ease-out;
}

.star {
	height: 16%;
	top:6%;
	left:35%;
}

.star-tilt {
	transform: rotate(2deg);
}

.star-hover {
	transition: transform .2s ease-out;
}
.star-hover:hover {
	transform: rotate(5deg);
	filter: drop-shadow(0 0 10px rgba(255, 225, 0, 1));
}

.bauble:nth-of-type(1) {top:63%; left:15%;}
.bauble:nth-of-type(2) {top:67%; left:45%;}
.bauble:nth-of-type(3) {top:62%; left:69%;}
.bauble:nth-of-type(4) {top:48%; left:57%;}
.bauble:nth-of-type(5) {top:46%; left:29%;}
.bauble:nth-of-type(6) {top:29%; left:40%;}

.tilt-1 {transform: rotate(-5deg)}
.tilt-2 {transform: rotate(30deg)}
.tilt-3 {transform: rotate(-20deg)}
.tilt-4 {transform: rotate(-35deg)}
.tilt-5 {transform: rotate(20deg)}
.tilt-6 {transform: rotate(-10deg)}


.calendar-fade {
	height: 5rem;
	width: 100%;
	background: linear-gradient(#acd8fb, #acd8fb00);
}

/* .icon {
	position: relative;
	height: 100%;
	pointer-events: none;
} */

@media(prefers-reduced-motion) {
	.hover-wrapper:hover, .star-tilt, .star-hover:hover {
		transform: none;
	}
}