:root {
	--summer1: #ffffff;
	--summer2: rgba(248, 183, 145, 0.822);
	--summer3: #d6a368;
	--summer4: rgb(95, 74, 43);
	--darkwood1: hsl(33, 23%, 8%);;
	--darkwood2: hsl(22, 48%, 55%);
	--darkwood3: hsl(32, 50%, 35%);
	--darkwood4: hsl(29, 40%, 89%);
	--bluesky1: #ffffff;
	--bluesky2: rgba(168, 168, 255, 0.808);
	--bluesky3: #334e8d;
	--bluesky4: rgb(17, 21, 41);
	--spring1: #f4fff2;
	--spring2: rgba(245, 167, 255, 0.829);
	--spring3: #bc68d6;
	--spring4: rgb(16, 73, 23);
	--noir1: hsl(0, 0%, 10%);
	--noir2: hsl(22, 0%, 55%);
	--noir3: hsl(32, 0%, 35%);
	--noir4: hsl(29, 0%, 89%);
	--phosphor1: hsl(0, 0%, 0%);;
	--phosphor2: hsl(108, 46%, 41%);
	--phosphor3: hsl(125, 46%, 27%);
	--phosphor4: hsl(110, 100%, 85%);
	}

.fade {
	transition-duration: 1s;
	transform: rotateZ(135deg); 
	opacity: 0;
}
.in {
	animation: twistAndFadeIn 1s running;
}



#theme_menu {
	visibility: hidden;
	transform-origin: top right;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	flex-wrap: wrap;
	justify-content: space-evenly;
	z-index: 1;
	will-change: transform;
}
#theme_menu.collapsed {
	animation-name: collapseFromRight;
}
#theme_menu button {
	width: 20%;
	margin-left: 5%;
	margin-right: 5%;
	align-self: center;
	padding: 0;
	justify-items: center;
	aspect-ratio: 1 / 1 !important;
	border: 1px solid #6a728a;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow:  1px 1px 1px var(--cell_border), -1px -1px 1px var(--txt_color_1), -1px 1px 1px var(--cell_border), 1px -1px 1px var(--txt_color_2);
}

#theme_menu button p {
	font-size: x-large;
	display: flex;
	width: 70%;
	height: 70%;
	margin: 0;
	border-radius: 50%;
	font-weight: bold;
	justify-content: center;
	z-index: 1;
	background: linear-gradient(
		to right,
		var(--color2) 0%,
		var(--color2) 46%,
		var(--color3) 54%,
		var(--color3) 100%
		);
		color: var(--color4);
		text-shadow:  1px 1px 1px var(--color1), -1px -1px 1px var(--color1), -1px 1px 1px var(--color1), 1px -1px 1px var(--color1);
}

#theme_menu button:hover {
	transition-duration: 0.2s;
	outline: 6px solid var(--txt_color_1) !important;
	outline-offset: 6px;
}

#lsthemebtn {
	background-color: var(--summer1);
	--color1: var(--summer1);
	--color2: var(--summer2);
	--color3: var(--summer3);
	--color4: var(--summer4);
}

#lbthemebtn {
	background-color: var(--bluesky1);
	--color1: var(--bluesky1);
	--color2: var(--bluesky2);
	--color3: var(--bluesky3);
	--color4: var(--bluesky4);
}

#dwthemebtn {
	background-color: var(--darkwood1);
	--color1: var(--darkwood1);
	--color2: var(--darkwood2);
	--color3: var(--darkwood3);
	--color4: var(--darkwood4);
}

#spthemebtn {
	background-color: var(--spring1);
	--color1: var(--spring1);
	--color2: var(--spring2);
	--color3: var(--spring3);
	--color4: var(--spring4);
}

#nothemebtn {
	background-color: var(--noir1);
	--color1: var(--noir1);
	--color2: var(--noir2);
	--color3: var(--noir3);
	--color4: var(--noir4);

}

#phthemebtn {
	background-color: var(--phosphor1);
	--color1: var(--phosphor1);
	--color2: var(--phosphor2);
	--color3: var(--phosphor3);
	--color4: var(--phosphor4);

}



@keyframes twistAndFadeOut {
	0% {transform: rotateZ(0deg); opacity: 1;};
	100% {transform: rotateZ(135deg); opacity: 0;};
}

@keyframes twistAndFadeIn {
	0% {transform: rotateZ(135deg); opacity: 0.1;};
	20% {transform: rotateZ(-16deg); opacity: 1;};
	50% {transform: rotateZ(6deg);};
	100% {transform: rotateZ(0deg);};
}

@keyframes collapseFromRight {
	0% {visibility: hidden; transform: scale(0); border-radius: 50% 0 70% 70%;};
	1% {visibility: visible; border-radius: 50% 0 70% 70%};
	50% {transform: scale(1); border-radius: 50% 0 70% 70%};
	100% {border-radius: 0 0 0 0;};
}


@media (orientation: portrait) {
	#theme_menu {
		margin-top: 9dvh;
		margin-left: 2.5%;
	}
}