@import url(https://fonts.bunny.net/css?family=asimovian:400|open-sans:300,400,500,600,700,800|kosugi-maru:400);

html[data-layout="v5"][data-theme="blue"] {
	--bg-image: url(../images/blue-bg.png);
	--grid-border: #35446d;
	--bottom-grid-border: #35446d;
	--chat-border: #35446d;
	--header-btn-shadow: 0 0 5px #fff;
	--header-btn-border: #fff;
	--header-btn-blur: none;
	--highlight: #c3dcf3;
	--highlight-shadow: #c3dcf3;
	--highlight-rgba: rgba(195,220,243,0.8);
	--highlight-filter: none;
	--loading-filter: none;
	--arrow-filter: brightness(2);
	--logo-filter: none;
	--logo-hover: #fff;
	--logo-text-hover: #fff;
	--logo-shadow1: inset 0 0 15px #fff, 0 0 15px rgba(255,255,255,0.8);
	--logo-shadow2: 0 0 15px #fff;
	--logo-opacity: 1;
	--btn-shadow: none;
	--btn-color: #fff;
	--sound-color: #fff;
	--slider-color: #7e8188;
	--speaker-bg: #000;
	--speaker-opacity: 1;
	--version-grid: #1a1d30;
	--version-color: #406e9f;
	--color1: #156aab;
	--color2: #518db7;
	--color3: #054177;
	--color4: #3c7fce;
	--color5: #60b4fd;
	--chat-margin: 55px;
	--emoji-margin: 8px;
}

html[data-layout="v5"][data-theme="orange"] {
	--bg-image: url(../images/orange-bg.png);
	--grid-border: #cc9202;
	--bottom-grid-border: #765302;
	--chat-border: #987e27;
	--header-btn-shadow: 0 0 5px #fff;
	--header-btn-border: #fff;
	--header-btn-blur: none;
	--highlight: #ffe58c;
	--highlight-shadow: #ffe58c;
	--highlight-rgba: rgba(255,229,140,0.8);
	--highlight-filter: hue-rotate(-160deg) brightness(106%) saturate(2.6);
	--loading-filter: hue-rotate(-150deg);
	--arrow-filter: brightness(2);
	--logo-filter: hue-rotate(-155deg) brightness(151%) saturate(1.4);
	--logo-hover: #fff;
	--logo-text-hover: #fff;
	--logo-shadow1: inset 0 0 15px #fff, 0 0 15px rgba(255,255,255,0.8);
	--logo-shadow2: 0 0 15px #fff;
	--logo-opacity: 1;
	--btn-shadow: none;
	--btn-color: #fff;
	--sound-color: #dbb330;
	--slider-color: #877020;
	--speaker-bg: rgba(0,0,0,0.5);
	--speaker-opacity: 1;
	--version-grid: #231806;
	--version-color: #b9a31a;
	--color1: #d6bb3a;
	--color2: #ffde46;
	--color3: #d8b037;
	--color4: #987e27;
	--color5: #fcbf02;
	--chat-margin: 55px;
	--emoji-margin: 8px;
}

html[data-layout="v5"][data-theme="green"] {
	--bg-image: url(../images/green-bg.png);
	--grid-border: #11be00;
	--bottom-grid-border: #11be00;
	--chat-border: #0c7f00;
	--header-btn-shadow: none;
	--header-btn-border: rgba(0,0,0,0.25);
	--header-btn-blur: blur(1px);
	--highlight: #0e5f00;
	--highlight-shadow: rgba(82,255,65,0.8);
	--highlight-rgba: rgba(82,255,65,0.5);
	--highlight-filter: hue-rotate(-90deg) brightness(46%) saturate(800%);
	--loading-filter: hue-rotate(-110deg);
	--arrow-filter: hue-rotate(-97deg) brightness(28%) saturate(1020%);
	--logo-filter: hue-rotate(-90deg) brightness(97%) saturate(184%);
	--logo-hover: rgba(14,95,0,0.5);
	--logo-text-hover: #499574;
	--logo-shadow1: inset 0 0 15px rgba(82,255,65,0.5), 0 0 15px rgba(82,255,65,0.25);
	--logo-shadow2: 0 0 15px rgba(82,255,65,0.25);
	--logo-opacity: 0.5;
	--btn-shadow: 1px 1px 0 rgba(255,255,255,0.65), 0 0 10px #fff;
	--btn-color: #043808;
	--sound-color: #14770a;
	--slider-color: #37936c;
	--speaker-bg: #000;
	--speaker-opacity: 0.5;
	--version-grid: #032001;
	--version-color: #0d8903;
	--color1: #0e5f00;
	--color2: #499574;
	--color3: #127a09;
	--color4: #0c7f00;
	--color5: #11be02;
	--chat-margin: 55px;
	--emoji-margin: 8px;
}

html[data-layout="v5"][data-theme="pink"] {
	--bg-image: url(../images/pink-bg.png);
	--grid-border: #d658a1;
	--bottom-grid-border: #832f51;
	--chat-border: #832f51;
	--header-btn-shadow: 0 0 5px #fff;
	--header-btn-border: #fff;
	--header-btn-blur: none;
	--highlight: #fecede;
	--highlight-shadow: #fecede;
	--highlight-rgba: rgba(254,206,222,0.8);
	--highlight-filter: hue-rotate(120deg);
	--loading-filter: hue-rotate(110deg);
	--arrow-filter: brightness(2);
	--logo-filter: hue-rotate(110deg) brightness(87%) saturate(136%);
	--logo-hover: #fff;
	--logo-text-hover: #fff;
	--logo-shadow1: inset 0 0 15px #fff, 0 0 15px rgba(255,255,255,0.8);
	--logo-shadow2: 0 0 15px #fff;
	--logo-opacity: 1;
	--btn-shadow: none;
	--btn-color: #fff;
	--sound-color: #fff;
	--slider-color: #ae7ca1;
	--speaker-bg: rgba(0,0,0,0.5);
	--speaker-opacity: 1;
	--version-grid: #390420;
	--version-color: #a8416c;
	--color1: #fecede;
	--color2: #fff1ea;
	--color3: #fcc3ee;
	--color4: #ce6188;
	--color5: #ce97ac;
	--chat-margin: 55px;
	--emoji-margin: 8px;
}

html[data-layout="v5"][data-theme="white"] {
	--bg-image: url(../images/white-bg.png);
	--grid-border: #d5d5ed;
	--bottom-grid-border: #efeefe;
	--chat-border: #9cbbcd;
	--header-btn-shadow: 0 0 5px #fff;
	--header-btn-border: #fff;
	--header-btn-blur: none;
	--highlight: #4a5b65;
	--highlight-shadow: #fff;
	--highlight-rgba: rgba(255,255,255,0.8);
	--highlight-filter: brightness(2);
	--loading-filter: invert(1) hue-rotate(200deg) saturate(30%);
	--arrow-filter: sepia(1) hue-rotate(172deg) brightness(54%) saturate(86%);
	--logo-filter: hue-rotate(-10deg) brightness(86%) brightness(90%) saturate(46%);
	--logo-hover: rgba(74,91,101,0.5);
	--logo-text-hover: #8e98a1;
	--logo-shadow1: inset 0 0 15px #fff, 0 0 15px rgba(255,255,255,0.8);
	--logo-shadow2: 0 0 15px #fff;
	--logo-opacity: 1;
	--btn-shadow: 1px 1px 0 rgba(255,255,255,0.65), 0 0 10px #fff;
	--btn-color: #4a5863;
	--sound-color: #212b37;
	--slider-color: rgba(255,255,255,0.5);
	--speaker-bg: rgba(0,0,0,0.5);
	--speaker-opacity: 1;
	--version-grid: #19242a;
	--version-color: #455d6a;
	--color1: #4a5b65;
	--color2: #8e98a1;
	--color3: #7c8487;
	--color4: #9cbbcd;
	--color5: #bfeeff;
	--chat-margin: 58px;
	--emoji-margin: 11px;
}

html[data-layout="v5"][data-theme="white"] .chat.chat:not(.quarter):not(.half) {
	top: 22px;
	left: 18px;
	position: relative;
	overflow: visible;
	z-index: 0;
	max-width: 1113px;
	margin-right: 35px;
}

html[data-layout="v5"][data-theme="white"] .chat.chat:not(.quarter):not(.half)::before {
	content: '';
	position: absolute;
	top: -50px;
	left: -23px;
	width: calc(100% + 23px + 25px);
	height: calc(100% + 35px + 93px + 67px);
	background-image: url(../images/ice-frame.png);
	background-size: 100% 100%;
	pointer-events: none;
	opacity: 0;
	max-width: 96vw;
	animation: fadeIce 0.4s linear forwards;
}

@keyframes fadeIce {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

html[data-layout="v5"][data-theme="white"] .chat.quarter,
html[data-layout="v5"][data-theme="white"] .chat.half,
html[data-layout="v5"][data-theme="white"] .theme,
html[data-layout="v5"][data-theme="white"] .audio {
	border: 20px solid rgba(255,255,255,0.7);
	border-radius: 20px;
	max-height: unset;
	height: calc(100% + 53px)
}


html[data-layout="v5"][data-theme="white"] .content .grid-top,
html[data-layout="v5"][data-theme="white"] .content .grid-bottom,
html[data-layout="v5"][data-theme="white"] .content .text-grid {
	z-index: 2;
}

html[data-layout="v5"][data-theme="white"] .content .main-cont {
	margin-bottom: 90px;
}

.color-test {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	z-index: 10;
}

.color-one, .color-two {
	flex: 1;
}

.color-one {
	background: #406e9f;
}

.color-two {
	background: #455d6a;
}

a {
	text-decoration: none;
}

ul {
	list-style-type: square;
	margin-left: 20px;
}

body {
	background: #000;
}

.top-bar {
	z-index: 1000;
}

.button, .initialising, .loading, .content {
	height: 100vh;
	padding-top: 46px;
	position: relative;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.button button {
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	background-color: #011a22;
	color: #00bfdc;
	cursor: pointer;
	height: 50px;
	width: 250px;
	border: 1px solid #00677f;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button button:hover {
	background-color: #053c4d95;
	border-color: #01a6c4;
	color: #fff;
}

.button button .arrow {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.9;
	margin-left: 10px;
}

.initialising, .loading {
	image-rendering: pixelated;
}

.initialising .line {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 15px;
	background: linear-gradient(to bottom, #6edbff, #ffffff);
	filter: blur(7.5px);
    opacity: 0;
    height: 0;
    animation: dropIn 0.3s ease forwards;
    animation-delay: 1.3s;
}

@keyframes dropIn {
    to {
        opacity: 1;
		height: 40%;
    }
}

.init-text-cont, .loading-text-cont {
	width: 100%;
	margin-top: 45vh;
	display: flex;
	justify-content: center;
}

.init-text-cont {
	margin-top: 30vh;
	align-items: center;
	color: #fff;
}

.init-text, .loading-text {
	width: fit-content;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	margin-top: 16px;
}

.init-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.init-text p.anim {
	width: 42px;
	height: 39px;
	background-image: url(../images/init-anim/frame1.png);
	background-size: 100% 100%;
}

.bg-flash {
	background: url(../images/background-outline.png) no-repeat center 46px;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 0;
	opacity: 0;
	animation: fade 0.4s linear forwards;
	pointer-events: none;
}

@keyframes fade {
    0% {
        opacity: 0;
        height: 0;
    }
    50% {
        opacity: 0.5;
        height: 50vh;
    }
    100% {
        opacity: 0;
        height: 100vh;
    }
}

.loading {
	background: #000 url(../images/background.gif) no-repeat center 46px;
	filter: var(--loading-filter);
}


.loading-text > p:nth-child(1) {
	color: #2e8aba;
	font-size: 10px;
	letter-spacing: 0.15em;
	line-height: 13px;
}

.loading-text > p:nth-child(2) {
	color: #77adc6;
	font-size: 17px;
	letter-spacing: 0.27em;
	font-family: 'Asimovian', sans-serif;
	text-transform: lowercase;
	border-bottom: 1px dotted #1583ba;
	padding-bottom: 6px;
	margin-bottom: 8px;
}

.loading-text > p:nth-child(3),
.init-text > p:nth-child(2) {
	color: #fff;
	font-size: 9px;
	letter-spacing: 0.01em;
	border-bottom: 1px solid #fff;
	padding-bottom: 5px;
	margin-bottom: 6px;
	margin-left: 2px;
	margin-right: 2px;
}

.loading-text > p:nth-child(4) {
	color: #1583ba;
	font-size: 11px;
 	letter-spacing: 0.15em;
	border-bottom: 1px dotted #1583ba;
	padding-bottom: 8px;
}

.init-text > p:nth-child(2) {
	border: none;
	padding-bottom: 0;
	margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing 0.5s steps(30, end) forwards;
    animation-delay: 0.5s;
}

.init-text hr {
	width: 107.5px;
	border-bottom: 1px solid #fff;
}

.init-text > p:nth-child(4) {
	opacity: 0;
	animation: blink 1s infinite;
	animation-delay: 1s;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.loading-bar {
	width: 110px;
	height: 10px;
	border: 1px solid #c3dcf3;
	margin: 3px 2px;
	overflow: hidden;
	opacity: 0.5;
}

.loading-bar .fill {
    height: 100%;
    width: 0%;
    background: #c3dcf3;
    animation: fill 2s linear forwards;
}

.loading.fadeout {
	animation: fadeOut 0.6s forwards ease;
}

@keyframes fill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        display: none;
    }
}

.content-transition {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
}

.content-transition .bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(50% - 0.5px);
	background: #000;
}

.content-transition .bar-top {
	top: 0;
	transform-origin: top;
}

.content-transition .bar-bottom {
	bottom: 0;
	transform-origin: bottom;
}

.content-transition::before,
.content-transition::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: #000;
}

.content-transition::before {
	left: 0;
	transform-origin: right center;
}

.content-transition::after {
	right: 0;
	transform-origin: left center;
}

.content-transition.open::before,
.content-transition.open::after {
	animation: shutterShrink 0.4s ease forwards;
}

@keyframes shutterShrink {
	to { transform: scaleX(0); }
}

.content-transition.expand .bar-top,
.content-transition.expand .bar-bottom {
	animation: barShrink 0.5s ease forwards;
}

@keyframes barShrink {
	to { transform: scaleY(0); }
}

.content {
	background: #000 var(--bg-image) no-repeat center 46px / 100% auto;
	display: flex;
	flex-direction: column;
	align-items: center;
 	font-family: "MS Gothic", "Kosugi Maru", sans-serif;
 	width: 100%;
 	height: auto;
 	min-height: 100vh;
 	padding-bottom: 15px;
 	position: relative;
}

.content .online-list {
	position: absolute;
	top: 61px;
	left: 15px;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	width: 287.5px;
	max-width: 25%;
	min-height: 150px;
	padding: 15px;
	padding-bottom: 25px;
	font-size: 12px;
	cursor: grab;
}

.online-list.dragging {
	cursor: grabbing;
}

.content .online-list .grid-top {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.content .online-list h2, .content .online-list li, .content .online-list p {
	transform: scaleX(1.3);
}

.content .online-list h2, .content .online-list p {
	text-align: center;
	transform-origin: center;
}

.content .online-list h2 {
	margin-bottom: 10px;
}

.content .online-list li {
	transform-origin: left;
	margin-bottom: 5px;
}

.content .online-list p::before {
	content: 'pin to page';
}

.content .online-list.pinned p::before {
	content: 'unpin';
}

.content .online-list .pin-cont {
	position: absolute;
	bottom: 10px;	
	left: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 15px;
	cursor: pointer;
}

.content .online-list .pin {
	width: 10px;
	height: 10px;
	display: inline-block;
	vertical-align: middle;
	background-image: url(../images/pin.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}

.content .online-list.pinned .pin {
	background-image: url(../images/unpin.svg);
}

.content .grid-top, .content .grid-bottom, .content header, .content .main-cont, .content .version-logo, .content .text-grid {
	width: 1150px;
	max-width: 95vw;
}

.content .grid-top, .content .grid-bottom, .content .text-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: relative;
	color: #fff;
}

.content .grid-column {
	box-sizing: border-box;
	height: 20px;
	position: relative;
	padding-left: 10px;
	display: flex;
	gap: 7px;
	align-items: center;
}

.content .grid-column p, .content .collapse-chat, .content .main-cont input, .content .main-cont label, .content .theme div, .content .audio div {
	cursor: pointer;
}

.content .grid-column.inactive, .content .grid-column.inactive p {
	cursor: not-allowed;
}

.content .grid-top .grid-column {
	padding-top: 16px;
	box-shadow: inset 0 10px 0 rgba(0,0,0,0.65);
}

.content .grid-bottom .grid-column {
	padding-bottom: 16px;
	box-shadow: inset 0 -10px 0 rgba(0,0,0,0.65);
}

.content .grid-top .grid-column::before,
.content .grid-bottom .grid-column::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 2px;
    height: 4px;
    background: var(--grid-border);
}

.content .grid-top .grid-column::before {top: 0;}
.content .grid-bottom .grid-column::before {bottom: 0;}

.content .grid-top .grid-column::after,
.content .grid-bottom .grid-column::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
	border-right: 1px solid var(--grid-border);
}

.content .grid-top .grid-column::after {top: 4px;}
.content .grid-bottom .grid-column::after {bottom: 4px;}

.content .grid-top .grid-column:last-child::after,
.content .grid-bottom .grid-column:last-child::after {
	border-right: none;
	border-left: 1px solid var(--grid-border);	
}

.content .grid-top::after,
.content .grid-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--grid-border);
}


.content .grid-bottom.grid3::after,
.content .grid-top.grid4::after,
.content .grid-bottom.grid3 .grid-column::before,
.content .grid-top.grid4 .grid-column::before {
    background: var(--bottom-grid-border);
}

/*.content .grid-bottom.grid3 .grid-column::after,
.content .grid-top.grid4 .grid-column::after {
	border-right: 1px solid var(--bottom-grid-border);
}*/

.content .grid-bottom.grid3 .grid-column:last-child::after,
.content .grid-top.grid4 .grid-column:last-child::after {
	border-left: 1px solid var(--bottom-grid-border);	
}

.content .grid-top::after {top: 4px;}
.content .grid-bottom::after {bottom: 4px;}

.content header {
	margin-top: 12px;
	display: flex;
	justify-content: space-between;
}

.content .header-btn-cont, .content .logo-cont, .content .sound-cont {
	flex: 1;
}

.content .header-btn-cont {
	align-self: center;
}

.content .header-btn {
	color: var(--btn-color);
	cursor: pointer;
	display: flex;
	gap: 6px;
	text-shadow: var(--btn-shadow);
}

.content .header-btn:hover, .content .sound-cont p:hover, .content .grid-column:hover p {
	text-shadow: 0 0 1px rgba(255,255,255,0.65);
}

.content .grid-column.inactive:hover p {
	text-shadow: none;
}

.content .header-btn::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 10px;
	background: #fff;
	box-shadow: var(--header-btn-shadow);
	border: 1px solid var(--header-btn-border);
	filter: var(--header-btn-blur);
}

.content .header-btn:hover::before {
	box-shadow: 0 0 5px 2px rgba(255,255,255,0.65);
}

.content .header-btn p, .content .sound-cont p, .content .grid-column p {
	font-size: 12px;
	transform: scaleX(1.3);
	transform-origin: left;
	opacity: 0;
	animation: fadeInText 0.8s ease-out 2s forwards;
}

.content .logo-cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
}

.content .logo {
	color: var(--highlight);
	border-radius: 50%;
	border: 3.5px solid var(--highlight);
	box-shadow:
		inset 0 0 15px var(--highlight-shadow),
		      0 0 15px var(--highlight-rgba);
  	text-shadow: 0 0 15px var(--highlight-shadow);
	font-family: 'Asimovian', sans-serif;
	text-transform: uppercase;
	font-size: 28px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	animation: spinFadeIn 2s ease-out forwards;
}

@keyframes spinFadeIn {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: rotate(360deg) scale(1);
    }
}

.content .logo::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background:
		conic-gradient(
			from 0deg,
			var(--highlight) 0deg 83deg,
			transparent 83deg 97deg,
			var(--highlight) 97deg 263deg,
			transparent 263deg 277deg,
			var(--highlight) 277deg 360deg
		);
	mask: radial-gradient(
	    farthest-side,
	    transparent calc(100% - 4px),
	    rgba(0,0,0,.5) calc(100% - 3.5px),
	    #000 calc(100% - 3px)
	);
	-webkit-mask: radial-gradient(
	    farthest-side,
	    transparent calc(100% - 4px),
	    rgba(0,0,0,.5) calc(100% - 3.5px),
	    #000 calc(100% - 3px)
	);
}

.content .logo:hover {
	color: var(--logo-hover);
	border-color: var(--logo-hover);
	box-shadow: var(--logo-shadow1);
  	text-shadow: var(--logo-shadow2);
  	opacity: var(--logo-opacity);
}

.content .logo:hover::before {
	background:
		conic-gradient(
			from 0deg,
			var(--logo-hover) 0deg 83deg,
			transparent 83deg 97deg,
			var(--logo-hover) 97deg 263deg,
			transparent 263deg 277deg,
			var(--logo-hover) 277deg 360deg
		);
}

.content .logo-title {
	color: var(--highlight);
	text-transform: uppercase;
	font-size: 20px;
	text-shadow: 1px 1px 2px #000;
	cursor: pointer;
  	transform: scaleY(0.75);
  	margin: 3px 0;
	font-family: 'Asimovian', sans-serif;
	animation: appearLogo 0.01s ease-out 1s forwards;
	opacity: 0;
}

@keyframes appearLogo {
    0%, 100% {
        opacity: 1;
    }
}

.content .logo-title:hover {
	color: var(--logo-text-hover);
  	opacity: var(--logo-opacity);
}

.content .logo-text {
	color: var(--color1);
	text-transform: uppercase;
	font-size: 12px;
	text-shadow: 1px 1px 2px #000;
	cursor: pointer;
  	transform: scaleY(0.95);
  	transform-origin: top;
    animation: fadeInText 0.8s ease-out 2s forwards;
    opacity: 0;
}

@keyframes fadeInText {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.content .logo-text:hover {
	color: var(--color2);
  	opacity: var(--logo-opacity);
}

.content .sound-cont {
	color: var(--sound-color);
	align-self: center;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.content .sound-cont p {
	transform-origin: center;
	margin: 0 20px;
}

.content .speaker {
	background-image: url(../images/speaker.svg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 16px;
	width: 18px;
	height: 15px;
	position: relative;
	cursor: pointer;
	margin-right: 10px;
	filter: var(--highlight-filter);
}

.content .speaker:hover {
	filter: brightness(120%);
}

.content .speaker.muted {
	background-image: url(../images/speaker-muted.svg);
	background-size: auto 15px;
}

.content .speaker::before, .content .grid-column:hover .arrow::before {
	content: '';
	position: absolute;
	inset: 1px;
	background: var(--highlight);
	border-radius: 50%;
	pointer-events: none;
	filter: blur(4px);
 	opacity: 0.5;
}

.content .speaker::before {
	background: #c3dcf3;
}

.content .grid-column.inactive:hover .arrow::before {
	display: none;
}

.content .speaker:hover::before, .content .grid-column:hover .arrow::before {
	background: #fff;
}

.content .speaker-controls {
	color: #fff;
	background: var(--speaker-bg);
	border: 1px solid var(--color3);
	height: 15px;
	width: 21px;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	opacity: var(--speaker-opacity);
}

.content .speaker-controls:hover {
	border-color: var(--color1);
	opacity: 1;
}

.content .speaker-controls::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #333;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.15s ease-in-out;
	filter: blur(2px);
}

.content .speaker-controls:hover::before {
	transform: scaleX(1);
}

.content .speaker-controls > * {
	position: relative;
	z-index: 1;
}

.content #volumeDown p {
	margin-top: -2px;
}

.content #soundSlider {
	appearance: none;
	-webkit-appearance: none;
	width: 130px;
	height: 2px;
	background: var(--slider-color);
	border: 1px solid var(--slider-color);
	outline: none;
	transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    cursor: pointer;
}


.content #soundSlider::-moz-range-thumb,
.content #soundSlider::-webkit-slider-thumb {
	width: 6px;
	height: 12px;
	background: #fff;
	box-shadow: 0 0 5px #fff;
	border-radius: 0;
	transition: all 0.05s ease-in-out;
	filter: var(--header-btn-blur);
}

.content #soundSlider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
}

.content .grid2 {
	margin-top: 20px;
	color: var(--btn-color);
}

.content .grid2 p {
	text-shadow: var(--btn-shadow);
}

.content .collapse-chat p::after {content: 'Collapse Chat';}
.content .expand-chat p::after {content: 'Expand Chat';}

.content .arrow {
	width: 9px;
	height: 9px;
	background-image: url(../images/arrow.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
    animation: pulse 1s ease-in-out infinite;
    transition: transform 0.5s ease-in-out;
    filter: brightness(2);
    opacity: 0.5;
}

.content .grid2 .arrow {
	filter: var(--arrow-filter);
}

.content .arrow.upside {
	transform: rotate(-180deg);
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.content .grid-column:hover .arrow, .content .inactive .arrow {
	animation: none;
    opacity: 1;
}

.content .grid-column.inactive .arrow, .content .grid-column.inactive p {
	opacity: 0;
	animation: fadeInInactive 0.8s ease-out 2s forwards;
}

@keyframes fadeInInactive {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.3;
    }
}

.content .main-cont {
	height: 430px;
	margin: 35px 0;
	display: flex;
	gap: 5px;
}

.content .chat {
	flex: 1;
}

.content .chat.half {
	width: 50%;
	flex: unset;
}

.content .chat.quarter {
	width: 25%;
	flex: unset;
}

.content .chat, .content .theme, .content .audio {
    background: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    opacity: 1;
    overflow: hidden;
    max-height: 100%;
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
}

.content .chat.entrance {
	opacity: 0;
    animation: fadeInChat 0.8s ease-out 2.5s forwards;
}

@keyframes fadeInChat {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.content .chat.hidden-chat {
	max-height: 0;
	opacity: 0;
    pointer-events: none;
}

.content #chattable {
	width: 100%;
	height: 100%;
}

.content .theme, .content .audio {
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: 'Asimovian', sans-serif;
	width: 25%;
	font-size: 14px;
	max-height: 0;
	opacity: 0;
}

.content .audio {
	margin-left: auto;
}

.content .theme.visible, .content .audio.visible {
    max-height: 100%;
    opacity: 1;
}

.content .theme div {
	opacity: 0.75;
}

.content .theme div, .content .audio div {
	margin-bottom: 25px;
	width: 161px;
	text-shadow: 0 0 10px rgba(255,255,255,0.65);
	display: flex;
	gap: 10px;
}

.content .theme div:hover {
	opacity: 0.9;
}

.content .theme div:hover, .content .audio div:hover {
	text-shadow: 0 0 10px rgb(255,255,255);
}

.content .theme div:has(input:checked) {
	opacity: 1;
}

.content .main-cont input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
 	margin: 0;
	background-color: transparent;
	width: 13px;
	height: 13px;
	border: 1px solid #fff;
	box-shadow:
	inset 0 0 10px rgba(255,255,255,0.45),
		  0 0 10px rgba(255,255,255,0.65);
}

.content .main-cont .theme input[type="radio"] {
	box-shadow: 0 0 10px rgba(255,255,255,0.65);
}

.content .main-cont input[value="blue"] {background-color: #3c7fce;}
.content .main-cont input[value="orange"] {background-color: #ffb901;}
.content .main-cont input[value="green"] {background-color: #11be00;}
.content .main-cont input[value="pink"] {background-color: #d658a1;}
.content .main-cont input[value="white"] {background-color: #d5d5ed;}

.content .theme div:hover input[type="radio"] {
	box-shadow: 0 0 10px #fff;
}

.content .audio div:hover input[type="radio"] {
	box-shadow:
		inset 0 0 10px rgba(255,255,255,0.65),
			  0 0 10px rgb(255,255,255);
}

.content .theme input[type="radio"]:checked {
	border: 2px solid #fff;
}

.content .audio input[type="radio"]:checked {
	background-color: #fff;
}

.content .version-logo {
	display: flex;
	height: 0;
	width: 0;
	opacity: 0;
	margin-top: 7.25px;
	margin-bottom: 7px;
	animation: gridExpand 0.8s ease-out 1.5s forwards;
}

@keyframes gridExpand {
	0% {
		width: 0;
		height: 0;
		opacity: 0;
	}

	50% {
		width: 0;
		height: 50px;
		opacity: 0;
	}

	100% {
		width: 1150px;
		height: 50px;
		opacity: 1;
	}
}

.content .version-logo .column,
.content .version-logo .logo-column {
	margin: 3px;
    background: 
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            var(--version-grid) 2px,
            var(--version-grid) 4px
        );
}

.content .version-logo .column {
	flex: 1;
}

.content .version-logo .logo-column {
	width: 49.41%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--version-color);
	position: relative;
}

.content .version-logo .logo-column::before {
	content: '';
	position: absolute;
	z-index: 1;
	background: #000;
	width: 140px;
	height: 100%;
	filter: blur(20px);
	opacity: 0.85;
}

.content .mini-logo, .content .mini-text, .content .mini-title {
	z-index: 2;
}

.content .mini-logo {
	background: url(../images/mini-logo.svg);
	background-repeat: no-repeat;
	width: 35px;
	height: 25px;
	margin-top: -3px;
	filter: var(--logo-filter);
}

.content .mini-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	margin-bottom: -1px;
	margin-top: -1px;
}

.content .mini-title {
	font-family: 'Asimovian', sans-serif;
	font-size: 17px;
	letter-spacing: 2.5px;
	margin-bottom: -6px;
}

.content .grid4 {
	z-index: 2;
	pointer-events: none;
}

.content .text-grid {
	margin-top: -15px;
	gap: 4px;
}

.content .text-column {
	font-family: "MS Gothic", "Kosugi Maru", sans-serif;
	color: var(--color4);
	font-size: 12px;
	line-height: 18px;
	background: #000;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color5) transparent;
	height: 0;
	padding: 0 8px;
	transition: height 0.6s ease-in-out, padding 0s 0.6s;
}

.content .text-column.expanded {
    height: 280px;
    padding: 5.5px 8px;
    transition: height 0.6s ease-in-out, padding 0s;
}

.content .text-column.entrance {
    height: 0;
    padding: 0 8px;
    opacity: 0;
    background: #fff;
    filter: blur(2px);
	animation: entranceFade 0.8s ease-out var(--entrance-delay, 0s) forwards;
}

@keyframes entranceFade {
    0% {
        height: 0;
        padding: 0 8px;
        opacity: 0;
        background: #fff;
        filter: blur(2px);
        transform: translateY(30px);
    }
    60% {
        height: 290px;
        padding: 5.5px 8px;
        opacity: 0.9;
        background: #000;
        filter: none;
        transform: translateY(-10px);
    }
    100% {
        height: 280px;
        padding: 5.5px 8px;
        opacity: 1;
        background: #000;
        filter: none;
        transform: translateY(0);
    }
}

.content .text-column p {
	margin-bottom: 5px;
}

.content .text-column a {
	color: var(--color5);
	text-decoration: underline;
}

.content .text-column a:hover {
	text-decoration: none;
}

.content .text-column li {
	margin-bottom: 5px;
}

.hidden, .content .theme.hidden, .content .audio.hidden {
	display: none;
}