html { 
			scroll-behavior: smooth;
			overflow-x: hidden;
			will-change: auto;
			position: relative;
			}
		:root {
        	color-scheme: dark;
        	--BC: rgba(60, 120, 120, 0.8);
        	--BO: rgba( 255, 255, 255, 1);
        	--TB: rgba(0, 0, 0, 1);
        	--SC: 0 0 17px #54FFE0, inset 0 0 10px #00FFF5;
        	--SC2: 0 0 10px #54FFE0, inset 0 0 5px #00FFF5;
        	--FC: #fff;
        	--PC: rgba(0,30,0,0.4);
        	--SW: #fff;
        	--BS: rgba(0,0,0,1);
        	--SS: #fff;
        	--SHADOW: #00DB7A;
        }
        body {
        	width: auto;
        	height: auto;
            background-repeat: no-repeat;
			background-attachment: cover;
			background-size: cover;
            background-color: var(--BC);
            user-select: none;
            overflow-x: hidden;
            transition: background 1100ms ease-in-out;
            will-change: auto;
            transform: scale(0.93);
            border-radius: 20px;
        }
        @font-face {
        	font-family: 'ss';
        	src: url('style/font/Tion.ttf');
        }
        #backer {
        	opacity: 0;
        	display: none;
        	justify-content: center;
        	align-items: center;
        	position: fixed;
        	background: #000;
        	width: 100%;
        	height: 100%;
        	z-index: 1;
        	top: 0;
        	right: 0;
        	transition: opacity 4000ms ease-in-out;
        }
        #rat {
        	font-size: 40px;
        	transition: opacity 1000ms ease-in-out;
        	font-family: monospace;
        }
        .side {
        	display: flex;
        	justify-content: space-between;
        	align-items: center;
        	max-width: 100%;
        	height: 40px;
        	margin: 13px 20px -5px 20px;
        }
        #json {
        	display: flex;
        	flex-direction: row;
        	justify-content: space-evenly;
        	align-items: center;
        	width: 40px;
        	height: 40px;
        	border: 2.5px solid var(--BO);
        	border-radius: 30px;
        	background-color: var(--BS);
        	transform: scale(1);
        	transition: transform 100ms ease-in-out, border 1000ms ease-in-out, box-shadow 1000ms ease-in-out, background 1000ms ease-in-out;
        	box-shadow: var(--SC2);
        	will-change: auto;
        }
        #json > img {
        	width: 25px;
        	height: 25px;
        }
        #json:active {
        	transform: scale(0.9);
        }
        .flex-shot {
        	display: flex;
        	flex-direction: row;
        	justify-content: space-between;
        	align-items: center;
        	width: 215px;
        }
        .git {
        	display: flex;
        	flex-direction: row;
        	justify-content: space-evenly;
        	align-items: center;
        	width: 90px;
        	height: 40px;
        	padding: 0 5px;
        	border: 2.5px solid var(--BO);
        	border-radius: 30px;
        	background: var(--BS);
        	transform: scale(1);
        	transition: transform 100ms ease-in-out, border 1000ms ease-in-out, box-shadow 1000ms ease-in-out, background 1000ms ease-in-out;
        	box-shadow: var(--SC2);
        	will-change: auto;
        }
        .git > img {
        	width: 30px;
        	height: 30px;
        }
        .git > span {
        	font-size: 12px;
        	font-family: Arial;
        	font-weight: bold;
        	text-shadow: 0 0 5px #fff;
        	color: #fff;
        }
        .git:active {
        	transform: scale(0.9);
        }
        #off {
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	width: 40px;
        	height: 40px;
        	border: 2.5px solid var(--BO);
        	border-radius: 30px;
        	background-color: var(--BS);
        	transform: scale(1);
        	transition: transform 100ms ease-in-out, border 1000ms ease-in-out, box-shadow 1000ms ease-in-out, background 1000ms ease-in-out;
        	box-shadow: var(--SC2);
        	will-change: auto;
        }
        #off > img {
        	width: 35px;
        	height: 35px;
        }
        #off:active {
        	transform: scale(0.9);
        }
        .flex-shooter {
        	display: flex;
        	width: 100px;
        	flex-direction: row;
        	justify-content: space-evenly;
        	align-items: center;
        	gap: 12px;
        }
        #theme {
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	width: 40px;
        	height: 40px;
        	background: var(--BS);
        	border: 2.5px solid var(--BO);
        	border-radius: 50px;
        	transform: scale(1);
        	transition: transform 200ms ease-in-out, box-shadow 300ms ease-in-out, border 1000ms ease-in-out, box-shadow 1000ms ease-in-out, background 1000ms ease-in-out;
        	backdrop-filter: blur(10px);
        	box-shadow: var(--SC2);
        	will-change: auto;
        }
        #theme > img {
        	width: 30px;
        	height: 30px;
        }
        #r {
        	opacity: 1;
        	transition: opacity 500ms ease-in-out;
        }
        #theme:active {
        	transform: scale(0.9);
        }
        .meta-panel {
        	display: flex;
        	flex-direction: column;
        	justify-content: space-evenly;
        	align-items: center;
        	gap: 5px;
        	position: absolute;
        	width: 150px;
        	height: 530px;
        	background-color: var(--PC);
        	backdrop-filter: blur(7px);
        	border-radius: 25px;
        	z-index: 2;
        	transform: translateX(-200px) translateY(90px);
        	transition: transform 800ms ease-in-out,background 1000ms ease-in-out;
        }
        .meta-item {
        	opacity: 0.9;
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	width: 115px;
        	height: 40px;
        	border: 2px solid #ffffff;
        	border-radius: 25px;
        	background-color: rgba(0,0,0,0);
        	transform: scale(1);
        	transition: transform 100ms ease-in-out, background 800ms ease-in-out;
        	will-change: auto;
        }
        .meta-item:active {
        	transform: scale(0.95);
        }
        .jupiter {
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	width: 105px;
        	height: 30px;
        	border: 2px solid #fff;
        	border-radius: 25px;
        	background: #000;
        }
       .splash {
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	font-size: 11px;
        	font-family: ss;
        	font-weight: bold;
        	color: #fff;
        }
        #filter-button {
        	display: flex;
        	flex-direction: row;
        	justify-content: space-evenly;
        	align-items: center;
        	width: 40px;
        	height: 40px;
        	border: 2.5px solid var(--BO);
        	border-radius: 25px;
        	transform: scale(1);
        	transition: transform 200ms ease-in-out, box-shadow 1000ms ease-in-out, background 1000ms ease-in-out, border 1000ms ease-in-out;
        	background: var(--BS);
        	backdrop-filter: blur(10px);
        	box-shadow: var(--SC2);
        	will-change: auto;
        }
        #switch {
           opacity: 0.8;
       	background: var(--SW);
       	width: 17px;
       	height: 7px;
       	border-radius: 20px;
       	transition: background 300ms ease-in-out;
       }
       #filter-button:active {
       	transform: scale(0.9);
       }
        #countdown {
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	background: var(--TB);
        	height: 135px;
			padding: 0px 18px;
			margin: 10px 20px;
			border: 2px solid var(--BO);
			border-radius: 60%/60%;
			border-top-left-radius: 10%;
			border-bottom-right-radius: 10%;
			box-shadow: var(--SC);
			transition: All 1000ms ease-in-out;
			backdrop-filter: blur(10px);
			will-change: auto;
	       }
		#dynamic {
			line-height: 30px;
			font-size: 11px;
			font-weight: bold;
			font-family: ss;
			text-align: center;
			letter-spacing: 0.7px;
			color: var(--FC);
			transition: All 1000ms ease-in-out;
			will-change: auto;
			}
        #manage {
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	background: var(--TB);
        	max-width: 100%;
        	height: 50px;
        	border: 2px solid var(--BO);
        	border-radius: 10px;
        	font-size: 12px;
        	font-family: ss;
        	font-weight: bold;
        	margin: 10px 20px 0 20px;
        	box-shadow: var(--SC);
        	backdrop-filter: blur(10px);
        	transition: All 1000ms ease-in-out;
        	will-change: auto;
        }
       #ultra-label {
       	color: var(--FC);
       	font-family: ss;
       	transition: All 1000ms ease-in-out;
       }
       #action-text {
       	display: flex;
       	background: var(--TB);
       	align-items: center;
       	justify-content: space-evenly;
       	max-width: 100%;
       	height: 50px;
       	border: 2px solid var(--BO);
       	border-radius: 10px;
       	margin: 0 20px 10px 20px;
       	box-shadow: var(--SC);
       	backdrop-filter: blur(10px);
       	transition: All 1000ms ease-in-out;
       }
       #textin {
       	font-size: 25px;
       	font-family: ss;
       	font-weight: bold;
       	color: #fff;
       	text-shadow: 0 0 10px #fff;
       	transition: All 1000ms ease-in-out;
       	}
       #textin2 {
       	font-size: 12px;
       	font-family: ss;
       	font-weight: bold;
       	color: var(--FC);
       	transition: All 1000ms ease-in-out;
       	}
       #action-text2 {
       	display: flex;
       	background: var(--TB);
       	align-items: center;
       	justify-content: space-evenly;
       	max-width: 100%;
       	height: 40px;
       	border: 2px solid var(--BO);
       	border-radius: 10px;
       	margin: 0 20px 10px 20px;
       	box-shadow: var(--SC);
       	transition: All 1000ms ease-in-out;
       }
       #textin3 {
       	font-size: 12px;
       	font-family: ss;
       	font-weight: bold;
       	color: var(--FC);
       	transition: All 1000ms ease-in-out;
       	}
       #action-text3 {
       	display: flex;
       	background: var(--TB);
       	align-items: center;
       	justify-content: space-evenly;
       	max-width: 100%;
       	height: 40px;
       	border: 2px solid var(--BO);
       	border-radius: 10px;
       	margin: 0 20px 10px 20px;
       	box-shadow: var(--SC);
       	transition: All 1000ms ease-in-out;
       }
        .text-footer-flex {
        	display: flex;
        	justify-content: center;
        	align-items: bottom;
        	font-size: 5px;
        	color: #fff;
        	font-weight: bold;
        	font-family: ss;
        	letter-spacing: 2px;
        	opacity: 0.5;
        	margin-top: 30px;
        }
        .time {
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	max-width: 100%;
        	height: 65px;
        	margin: 20px 20px 0 20px;
        	border: 2px solid var(--BO);
        	border-radius: 10px;
        	background: var(--TB);
        	box-shadow: var(--SC);
        	backdrop-filter: blur(10px);
        	transition: All 1000ms ease-in-out;
        	transform: scale(1);
        }
        #ttime {
        	opacity: 0;
        	font-size: 35px;
        	font-family: Courier;
        	font-weight: bold;
        	letter-spacing: 18px;
        	text-shadow: 0 0 15px #00A2FF, 0 0 20px #fff;
        	transition: opacity 500ms ease-in-out, color 1000ms ease-in-out;
        	margin-top: 2px;
        	margin-left: 25px;
        	color: var(--SS);
        }
        #sensei {
        	display: block;
        	opacity: 1;
        	position: absolute;
        	font-size: 50px;
        	font-family: Courier;
        	font-weight: bold;
        	letter-spacing: 8px;
        	color: var(--SS);
        	align-self: center;
        	justify-self: center;
        	margin-top: 2px;
        	margin-left: 10px;
        	text-shadow: 0 0 10px var(--SHADOW);
        	z-index: -1;
        	filter: blur(0.6px);
        	animation: Electro 3500ms infinite;
        	transition: color 1000ms ease-in-out, text-shadow 1000ms ease-in-out;
        	will-change: auto;
        }
        @keyframes Electro {
        	0% { opacity: 0.4; }
        	20% { opacity: 0.2; }
        	45% { opacity: 0.3; }
        	70% { opacity: 0; }
        	85% { opacity: 0.4; }
        	100% { opacity: 0.4; }
        }
        #take-off {
        	display: flex;
        	justify-content: space-evenly;
        	align-items: center;
        	gap: 5px;
        	font-family: ss;
        	font-size: 12px;
        	font-weight: bold;
        	color: #CC0200;
        	letter-spacing: 0.5px;
        }
        #take-off > img {
        	width: 23px;
        	height: 23px;
        	transition: opacity 1000ms ease-in-out;
        	animation: elips 2500ms infinite ease-in-out;
        }
        #take-up {
        	display: flex;
        	flex-direction: row-reverse;
        	justify-content: space-evenly;
        	align-items: center;
        	gap: 5px;
        	font-family: ss;
        	font-size: 12px;
        	font-weight: bold;
        	color: #00C5BA;
      	  letter-spacing: 0.5px;
        }
        #take-up > img {
        	width: 23px;
      	  height: 23px;
			transition: opacity 1000ms ease-in-out;
      	  animation: elips 2500ms infinite ease-in-out;
 	   }
		@keyframes elips {
			0% { opacity: 1; }
			50% { opacity: 0; }
			100% { opacity: 1; }
		}
		.ender {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			max-width: 100%;
			height: 40px;
			padding: 0 25px;
			background: var(--TB);
			border: 2px solid var(--BO); 
			border-radius: 10px;
			box-shadow: var(--SC);
			margin: 10px 20px 10px 20px;
			font-family: ss;
			font-weight: bold;
			color: var(--FC);
			font-size: 12px;
			transition: All 1000ms ease-in-out;
		}
		#ip {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-evenly;
			align-items: center;
			gap: 15px;
			transition: All 1000ms ease-in-out;
		}
		.position {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			border-radius: 25px;
			margin: 30px 55px 30px 55px;
			max-width: 100%;
			height: 7px;
		}
		.position > div {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1.5px solid rgba(0,0,0,0);
			border-radius: 30px;
			outline: 2px solid #fff;
			width: 35px;
			height: 35px;
			}
		.position > div > img {
			width: 32px;
			height: 32px;
		}
		.position > div:active {
			transform: scale(0.9);
		}
		#clown {
			transform: scale(1);
			transition: transform 100ms ease-in-out;
		}
		#clown:active {
			transform: scale(0.9);
	  	}
		#overlay {
			display: none;
			position: absolute;
			background:rgba(0,0,0,0);
			width: 100%;
			height: 100%;
			z-index: 1;
			right: 0;
			top: 0;
		}
		#sender {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			background: var(--TB);
			max-width: 100%;
			height: 50px;
			margin: 10px 20px 10px 20px;
			border: 2px solid var(--BO);
			border-radius: 10px;
			box-shadow: var(--SC);
			color: #FFF085;
			transition: All 1000ms ease-in-out, transform 100ms ease-in-out;
			font-size: 12px;
			font-family: ss;
			font-weight: bold;
			transform: scale(1);
			text-shadow: 0 0 4px #FF5200, 0 0 6px #FFF9C7, 0 0 1px #fff;
		}
		#sender:active {
			transform: scale(0.97);
		}
		#fusion {
			display: none;
			opacity: 0;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			position: absolute;
			width: 100%;
			height: 100%;
			background: var(--TB);
			right: 0;
			top: 0;
			z-index: 1;
			transition: opacity 500ms ease;
		}
		.diver {
			display: flex;
			flex-direction: column;
			justify-content: start;
			align-items: center;
			width: 270px;
			height: 270px;
			background: rgba(90, 60, 100, 1);
			border-radius: 20px;
			border: 2px solid #fff;
			padding: 15px 0;
			transition: opacity 600ms ease-in-out;
			margin: 0 30px;
		}
		.diver::before {
			position: absolute;
			content: '⬥ Send Message Box ⬥';
			color: #ffffff;
			font-family: ss;
			font-size: 13px;
			font-weight: bold;
		}
		#namer {
			text-align: left;
			width: 210px;
			height: 40px;
			margin: 35px 0 15px 0;
			border: 2px solid #fff;
			border-radius: 15px;
			background: rgba(40,40,100,0.7);
			font-size: 14px;
			font-family: ss;
			font-weight: bold;
			padding: 0 10px;
			transition: border 300ms ease-in-out;
		}
		#namer::placeholder {
			font-family: ss;
			font-size: 13px;
			color: #ffffff;
		}
		#message {
			text-align: left;
			background: rgba(40,40,100,0.7);
			width: 210px;
			height: 140px;
			margin: 0 0 15px 0;
			border: 2px solid #fff;
			border-radius: 15px;
			padding: 10px;
			font-family: ss;
			font-size: 14px;
			font-weight: bold;
			resize: none;
			transition: border 300ms ease-in-out;
		}
		#message::placeholder {
			font-family: ss;
			font-size: 13px;
			font-weight: bold;
			color: #ffffff;
		}
		.flex-sendB2 {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-evenly;
			align-items: center;
			width: 65%;
			gap: 20px;
		}
		#sendB {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 55%;
			height: 35px;
			border: 2px solid #fff;
			border-radius: 15px;
			font-size: 13px;
			font-weight: bold;
			font-family: ss;
			background: #000000;
			transform: scale(1);
			transition: transform 200ms ease-in-out;
		}
		#sendB:active {
			transform: scale(0.96);
		}
		#sendC {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 55%;
			height: 35px;
			border: 2px solid #fff;
			border-radius: 15px;
			font-size: 13px;
			font-weight: bold;
			font-family: ss;
			background: #7C0001;
			transform: scale(1);
			transition: transform 200ms ease-in-out;
		}
		#sendC:active {
			transform: scale(0.96);
		}
		.icon1 {
			opacity: 1;
			width: 120px;
			height: 120px;
			transform: rotate(-45deg);
			animation: T19 3000ms ease;
			transition: transform 500ms ease-in-out, opacity 700ms ease;
		}
		.icon2 {
			opacity: 1;
			width: 120px;
			height: 120px;
			transform: rotate(135deg);
			animation: T19 3000ms ease;
			transition: transform 500ms ease-in-out, opacity 700ms ease; 
		}
		@keyframes T19 {
			0% { opacity: 0; }
			100% { opacity: 100; }
		}
		@keyframes R12 {
			100% { transform: rotate(-405deg); }
		}
		@keyframes R13 {
			100% { transform: rotate(495deg); }
		}
		.sent {
			display: flex;
			opacity: 0;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			transition: opacity 900ms ease-in-out;
		}
		.ix1 { 
			font-family: ss;
			font-size: 30px;
			font-weight: bold;
		}
		.ix2 {
			font-family: ss;
			font-size: 13px;
			font-weight: bold;
			color: #fff;
		}