.dropdown {
	position: absolute;
	display: inline-block;
	z-index: 1;
	white-space: nowrap;
	top: 160px;
	left: 55px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#LOCK1 {
	transition: background 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

#LOCK1:hover {
	background: color-mix(in srgb, var(--pageBackgroundColor) 90%, black 10%);
	box-shadow: 0 0 15px color-mix(in srgb, var(--pageBackgroundColor) 65%, black 35%);
}

.dropdown.show {
	z-index: 10;
}

.dropdown-btn {
	font-size: 13px;
	color: var(--pageTextColor);
	cursor: pointer;
	background: none;
	border: none;
	box-shadow: none;
}

.dropdown-menu {
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px) scale(0.9);
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.dropdown.show .dropdown-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
	background: var(--pageBackgroundColor);
}

.dropdown-menu li {
	font-size: 13px;
	color: var(--pageTextColor);
	cursor: pointer;
	text-align: center;
	opacity: 0;
	transform: perspective(1800px) rotateX(-200deg) translateY(-50px) scale(0.8);
	transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out;
}

.dropdown.show .dropdown-menu li {
  	background: var(--pageBackgroundColor);
	border-right: 2px solid var(--accentColor);
	border-left: 2px solid var(--accentColor);
	padding: 10px;
	margin: 0;
	opacity: 1;
	transform: perspective(1800px) rotateX(0deg) translateY(0) scale(1);
	will-change: opacity, transform;
}

.dropdown .dropdown-menu li:hover {
	background: color-mix(in srgb, var(--pageBackgroundColor) 85%, black 15%);
}

.dropdown.show .dropdown-menu li:nth-child(1) { transition-delay: 0.00s, 0.00s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(2) { transition-delay: 0.02s, 0.02s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(3) { transition-delay: 0.04s, 0.04s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(4) { transition-delay: 0.06s, 0.06s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(5) { transition-delay: 0.08s, 0.08s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(6) { transition-delay: 0.10s, 0.10s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(7) { transition-delay: 0.12s, 0.12s, 0s; }
.dropdown.show .dropdown-menu li:nth-child(8) { transition-delay: 0.14s, 0.14s, 0s; }

 /*
 .dropdown.show .dropdown-menu li:nth-child(1) { transition-delay: 0.05s 0.05s 0s; }
.dropdown.show .dropdown-menu li:nth-child(2) { transition-delay: 0.1s 0.1s 0s; }
.dropdown.show .dropdown-menu li:nth-child(3) { transition-delay: 0.15s 0.15s 0s; }
.dropdown.show .dropdown-menu li:nth-child(4) { transition-delay: 0.2s 0.2s 0s; }
.dropdown.show .dropdown-menu li:nth-child(5) { transition-delay: 0.25s 0.25s 0s; }
    .dropdown-menu li {
        opacity: 0;
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    .dropdown-menu li:nth-child(odd) {
        transform: translate(-40px, -40px);
    }
    .dropdown-menu li:nth-child(even) {
        transform: translate(40px, 40px);
    }

    .dropdown.show .dropdown-menu li {
        opacity: 1;
        transform: translate(0, 0);
    }

    .dropdown.show .dropdown-menu li:nth-child(1) { transition-delay: 0.1s; }
    .dropdown.show .dropdown-menu li:nth-child(2) { transition-delay: 0.2s; }
    .dropdown.show .dropdown-menu li:nth-child(3) { transition-delay: 0.3s; }
    .dropdown.show .dropdown-menu li:nth-child(4) { transition-delay: 0.4s; }
    .dropdown.show .dropdown-menu li:nth-child(5) { transition-delay: 0.5s; }
	 */


    /* 
    .dropdown-menu li {
        opacity: 0;
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }
    .dropdown-menu li:nth-child(odd) {
        transform: translateX(-40px);
    }
    .dropdown-menu li:nth-child(even) {
        transform: translateX(40px);
    }

    .dropdown.show .dropdown-menu li {
        opacity: 1;
    }
    .dropdown.show .dropdown-menu li:nth-child(1) {
        transition-delay: 0.1s;
        transform: translateX(0);
    }
    .dropdown.show .dropdown-menu li:nth-child(2) {
        transition-delay: 0.2s;
        transform: translateX(0);
    }
    .dropdown.show .dropdown-menu li:nth-child(3) {
        transition-delay: 0.3s;
        transform: translateX(0);
    }
    .dropdown.show .dropdown-menu li:nth-child(4) {
        transition-delay: 0.4s;
        transform: translateX(0);
    }
    .dropdown.show .dropdown-menu li:nth-child(5) {
        transition-delay: 0.5s;
        transform: translateX(0);
    }

*/

    /* 
    .dropdown-menu li {
        opacity: 0;
        transform: perspective(800px) rotateY(-60deg) translateX(-30px) scale(0.8);
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    }

    .dropdown.show .dropdown-menu li {
        opacity: 1;
        transform: perspective(800px) rotateY(0deg) translateX(0) scale(1);
    }

    .dropdown.show .dropdown-menu li:nth-child(1) {
        transition-delay: 0.1s;
    }
    .dropdown.show .dropdown-menu li:nth-child(2) {
        transition-delay: 0.2s;
    }
    .dropdown.show .dropdown-menu li:nth-child(3) {
        transition-delay: 0.3s;
    }
    .dropdown.show .dropdown-menu li:nth-child(4) {
        transition-delay: 0.4s;
    }
    .dropdown.show .dropdown-menu li:nth-child(5) {
        transition-delay: 0.5s;
    }
*/






   /* 
.dropdown {
	position: absolute;
	display: inline-block;
	z-index: 1;
	white-space: nowrap;
	top: 160px;
	left: 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dropdown-btn {
	font-size: 13px;
	color: var(--buttonTextColor);
	text-shadow: var(--text-outline);
	cursor: pointer;
	background: none;
	border: none;
	box-shadow: none;
}

.dropdown-menu {
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px) scale(0.9);
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.dropdown.show .dropdown-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-menu li {
	font-size: 13px;
	color: var(--buttonTextColor);
	text-shadow: var(--text-outline);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-10px);
	text-align: center;
	transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out, background 0.2s ease-in-out;
	
}

.dropdown.show .dropdown-menu li {
	opacity: 1;
	transform: translateY(0);
  	background: var(--pageBackgroundColor);
	border-right: 2px solid var(--accentColor);
	border-left: 2px solid var(--accentColor);
	padding: 10px;
	margin: 0;
}

.dropdown.show .dropdown-menu li:nth-child(1) {
	transition-delay: 0s;
}

.dropdown.show .dropdown-menu li:nth-child(2) {
	transition-delay: 0.00s, 0.09s, 0s;
}

.dropdown.show .dropdown-menu li:nth-child(3) {
	transition-delay: 0.0s, 0.16s, 0s;
}

.dropdown.show .dropdown-menu li:nth-child(4) {
	transition-delay: 0.00s, 0.20s, 0s;
}

.dropdown.show .dropdown-menu li:nth-child(5) {
	transition-delay: 0.0s, 0.22s, 0s;
}

.dropdown .dropdown-menu li:hover {
	background: color-mix(in srgb, var(--pageBackgroundColor) 85%, black 15%);
}

*/