:root {
	/*angleStart and angleStartInv need to be negation of each other*/
	--angleStart: -360deg;
	--angleStartInv: 360deg;
	--transitionTime: 0.6s;
	--transitionType: linear;
	
	--color1:#131221;
	--color2:#5C543A;
	--color3:#C08811;
	--color4:#1D6DCD;
	--color5:#E9DDD3;
	
	
}

body{
	background-color: var(--color1);
}

.logoWrapper{
	width:20vw;
}

.header{
	text-align:center;
	color:var(--color3);
	font-size: clamp(27px, 4vh, 82px);
}

#logo {
	border-radius: 50%;
}
#logo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: all var(--transitionTime) var(--transitionType);
}

.selector {
	position: relative;
}
.selector ul {
	position: absolute;
	list-style: none;
	padding: 0;
	right: -1.25vw;
	top: -19.55px;
	bottom: -15.55px;
	left: -1.25vw;
}
/*
font-size: clamp(27px, 4vh, 82px);
*/

.selector li {
	position: absolute;
	height: 100%;
	margin: 0 50%;
	transition: all var(--transitionTime) var(--transitionType);
	-moz-transform: rotate(var(--angleStart));
	-ms-transform: rotate(var(--angleStart));
	-o-transform: rotate(var(--angleStart));
	-webkit-transform: rotate(var(--angleStart));
	transform: rotate(var(--angleStart));
}
.selector li a {
	color: var(--color3);
}
.selector li label {
	-moz-transform: rotate(var(--angleStartInv));
	-ms-transform: rotate(var(--angleStartInv));
	-o-transform: rotate(var(--angleStartInv));
	-webkit-transform: rotate(var(--angleStartInv));
	transform: rotate(var(--angleStartInv));
}
.selector li label {
	position: absolute;
	width: 0;
	height: 0;
	line-height: 1px;
	text-align: center;
	overflow: hidden;
	transition: all var(--transitionTime) var(--transitionType), color 0.1s,
	background 0.1s;
}
.selector.open li label {
	width: max(19px, 5vw);
	height: max(19px, 5vw);
	font-size: max(5vw,19px);
	line-height: max(5vw,19px);
	margin-left: clamp(-160px,-2.5vw,-9.7px);
}

/*

*/


@media (prefers-reduced-motion: reduce){
	* {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
		transition-delay: 0.01 ms !important;
	}
}

@media (orientation: portrait) {
	.selector.open li label {
		width: max(6vw,9px);
		height: max(6vw,9px);
		font-size: max(6vw,9px);
		line-height: max(6vw,9px);
		margin-left: min(-2.75vw,-4.5px);
	}
}