@font-face {
  font-family: 'Visitor';
  src: url('../fonts/visitor1.ttf');
}

@font-face {
  font-family: 'Fiery Turk';
  src: url('../fonts/Fiery_Turk.ttf');
}

html[data-layout="v4"] {
	--title-font: 'Visitor', monospace;
	--main-font: 'Fiery Turk', sans-serif;
	--username-size: 12px;
	--message-size: 10px;
	--border-width: 1px;
	--chat-shadow: 2px 2px 3px #000, 2px 2px 0 #000;
	--chat-border: #69c9c5;
	--color5: #69c9c5;
	--chat-margin: 58px;
	--emoji-margin-top: 2px;
	--emoji-margin-right: 11px;
}

html[data-layout="v4"][data-theme="diver"] .content .main-cont {background-image: url(../images/diver-loop.gif); background-color: #091718; background-size: auto 87%; background-position: center top}
html[data-layout="v4"][data-theme="diver"] .content .main-cont.expanded {background-size: auto 93%;}

html[data-layout="v4"][data-theme="drones"] .content .main-cont {background-image: url(../images/drones.png); background-color: #0c4143;}
html[data-layout="v4"][data-theme="drones"] .content .main-cont.expanded {background-image: url(../images/drones-expanded.png);}

html[data-layout="v4"][data-theme="aircrafts"] .content .main-cont {background-image: url(../images/aircrafts.png); background-color: #041f1d;}
html[data-layout="v4"][data-theme="aircrafts"] .content .main-cont.expanded {background-image: url(../images/aircrafts-expanded.png); background-color: #400006;}

html[data-layout="v4"][data-theme="fighter"] .content .main-cont {background-image: url(../images/fighter.png); background-color: #400006;}
html[data-layout="v4"][data-theme="fighter"] .content .main-cont.expanded {background-image: url(../images/fighter-expanded.png);}

html[data-layout="v4"][data-theme="tokyo"] .content .main-cont {background-image: url(../images/tokyo.png); background-color: #400006;}
html[data-layout="v4"][data-theme="tokyo"] .content .main-cont.expanded {background-image: url(../images/tokyo-expanded.png);}

html[data-layout="v4"][data-theme="iiadvanced"] .content .main-cont {background-image: url(../images/iiadvanced.png); background-color: #54111a;}
html[data-layout="v4"][data-theme="iiadvanced"] .content .main-cont.expanded {background-image: url(../images/iiadvanced-expanded.png);}

html[data-layout="v4"] .content.entrance .main-cont {background-image: url(../images/entrance-intro.png); background-size: auto 87% !important; background-color: transparent !important;}
html[data-layout="v4"] .content .main-cont.entrance {background-image: url(../images/entrance-intro.gif); background-size: auto 87% !important; background-color: transparent !important;}

html[data-layout="v4"][data-theme="diver"] .content .main-cont.intro {background-image: url(../images/diver-intro.gif); background-size: auto 86.5% !important; background-position: 2px 1px !important,}


.button {
	background: #4a100f;
}

.button button {
	background: linear-gradient(to bottom, #792328, #3d0b11);
	color: #fff;
	border: 1px solid #965356;
	margin-bottom: 0;
	box-shadow: none;
	transition: margin-bottom 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.button button:hover {
	border: 1px solid #ac7679;
	margin-bottom: 5px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.175);
	transition: margin-bottom 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.loading {
	background:
		url(../images/v4-intro.gif),
		linear-gradient(to bottom, #701d25, #3f0e0e),
		linear-gradient(to bottom, #571019 0%, #571019 20%, #3a050b 37%, #000 55%, #000 100%);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center 48px, center 48px, center 48px;
	background-size: auto auto, 969px 100%, 100% 1260px;
}

.loading::after,
.content .content-box::after {
	content: '';
	display: block;
	position: absolute;
	top: 766px;
	width: 100%;
	height: 110px;
	background-image: url(../images/sitefooter-v4.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.content-transition .bar, .content-transition .bar-bottom, .content-transition::before, .content-transition::after {
	display: none !important;
}

.content {
	background: linear-gradient(to bottom, #571019 0%, #571019 20%, #3a050b 37%, #000 55%, #000 100%) no-repeat center 46px / 100% 1260px;
	padding-bottom: 0;
}

.content .content-box {
	background: linear-gradient(to bottom, #701d25, #3f0e0e);
	border-left: 1px solid #69212a;
	border-right: 1px solid #69212a;
	width: 969px;
	height: 100%;
	max-width: 100%;
	min-height: calc(100vh - 46px);
	position: relative;
}

.content .content-box::after {
	top: 720px;
}

.content header {
	gap: 10px;
}

.content header .sound-cont, .content header .header-btn-cont, .content header .logo-cont {
	flex: unset;
	flex-shrink: 0;
}

.content header .sound-cont {
	order: 1;
	width: 230px;
	z-index: 2;
}

.content header .header-btn-cont {
	order: 2;
	display: flex;
	align-items: flex-end;
	align-self: flex-end;
	width: 472px;
	height: 90px;
	padding-bottom: 8px;
	position: relative;
	margin-bottom: 5px;
}

.content header .logo-cont {
	order: 3;
}

.content .grid-top, .content .grid-bottom, .content .text-column.iiadvanced-txt::before, .content .text-column.me-txt::before {
	margin-top: 5px;
	border-top: 1px solid #813940;
	border-bottom: 1px solid #1a0c0d;
	background: linear-gradient(to bottom, #532529 0%, #76343b 100%);
	height: 20px;
	width: 711px;
	margin: 5px 1px;
	margin-bottom: 0;
	box-shadow:
		inset 0 -1px 0 #451e22,
			  0  0   0 #6a2f34,
			  0 -1px 0 #4d2226,
			  0 -2px 0 #4e2327,
			  0 -3px 0 #4a2125,
			  0 -4px 0 #2e0d0f;
}

.content .grid-top, .content .grid-bottom {
	box-shadow:
		inset 0 -1px 0 #451e22,
			  0  0   0 #6a2f34,
			  0 -1px 0 #4d2226,
			  0 -2px 0 #4e2327,
			  0 -3px 0 #4a2125,
			  0 -4px 0 #2e0d0f,
			  0 5px 5px -3px #000,
			  0 5px 5px -3px #000;
}

.content .grid-top.grid2 {
	box-shadow:
		inset 0 -1px 0 #451e22,
			  0  0   0 #6a2f34,
			  0 -1px 0 #4d2226,
			  0 -2px 0 #4e2327,
			  0 -3px 0 #4a2125,
			  0 -4px 0 #2e0d0f,
			  0  7px 0 #000000,
			  0 13px 3px -3px rgba(0,0,0,0.2),
			  0 13px 3px -3px rgba(0,0,0,0.2);
}

.content.entrance .grid-top.grid2 {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
}

.content .grid-bottom.grid3 {
	z-index: 2;
}

.content.entrance .grid-bottom.grid3 {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.5s;
}

.content .version-logo {
	background: linear-gradient(to bottom, #296569, #2e8489);
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0 5px 0 26px;
	width: 714px;
	height: 20px;
	opacity: 1;
	border-top: 1px solid #223335;
	border-bottom: 1px solid #223335;
	border-left: 1px solid #4d444a;
	border-right: 1px solid #385255;
	align-items: center;
	animation: none;
	box-shadow:
		inset 0 1px 0 #308b92,
		  0 9px 5px -3px rgba(0,0,0,0.75);
}

.content.entrance .version-logo {
	color: transparent;
	background: transparent;
	border: 2px solid #fff;
	animation: versionLogo 0.5s ease-in-out forwards;
}

@keyframes versionLogo {
    0% { color: transparent; background: transparent; border-top: 2px solid #fff;; border-bottom: 2px solid #fff;; border-left: 2px solid #fff;; border-right: 2px solid #fff;;}
    100% { color: initial; background: linear-gradient(to bottom, #296569, #2e8489); border-top: 1px solid #223335; border-bottom: 1px solid #223335; border-left: 1px solid #4d444a; border-right: 1px solid #385255;}
}

.content .version-logo::before,
.content .grid-top::before,
.content .grid-bottom::before,
.content .iiadvanced-txt-cont::before,
.content .me-txt-cont::before {
	content: '>>';
	position: absolute;
	left: 5px;
	border-radius: 5px;
	width: 16px;
	height: 7px;
	font-size: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset 0 -1px 1px rgba(0,0,0,0.3),
		inset 0 1px 1px rgba(255,255,255,0.3),
			  0 -2px 1px rgba(0,0,0,0.3),
			  0 2px 1px rgba(255,255,255,0.3);
}

.content .version-logo::before {
	top: 5px;
	color: rgba(255,255,255,0.75);
	border: 1px solid #083235;
}

.content.entrance .version-logo > * {
	opacity: 0;
	animation: appear 0.5s ease-in-out forwards;
}

.content .grid-top::before,
.content .grid-bottom::before,
.content .iiadvanced-txt-cont::before,
.content .me-txt-cont::before {
	top: 5px;
	color: #7cc7c4;
	border: 1px solid rgba(0,0,0,0.75);
}

.content .version-logo .column {
	background: none;
}

.content .version-logo .column:first-child,
.content .grid-top::after,
.content .grid-bottom::after,
.content .text-column.iiadvanced-txt::after,
.content .text-column.me-txt::after,
.content .online-list h2 {
	color: rgba(255,255,255,0.2);
	font-family: 'Open Sans', sans-serif;
	font-weight: 900;
	font-size: 8px;
	border-bottom: 2px dotted rgba(255,255,255,0.5);
	flex: unset;
	width: 57px;
	height: 12px;
}

.content .version-logo .column:first-child::after {
	content: 'INITSEQ.2A';
}

.content .grid-top.grid2::after,
.content .grid-top.grid2 .grid-column:last-of-type::before,
.content .grid-bottom.grid3::after,
.content .grid-bottom.grid3 .grid-column.me-btn::before,
.content .grid-top.grid4::after,
.content .grid-top.grid4 .grid-column:last-of-type::before,
.content .text-column.iiadvanced-txt::after,
.content .text-column.me-txt::after,
.content .online-list h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 900;
	font-size: 8px;
	position: absolute;
	left: 0;
	top: 3px;
	height: 10px;
	margin-left: 33px;
}

.content .grid-top.grid2::after,
.content .grid-bottom.grid3::after,
.content .grid-top.grid4::after,
.content .text-column.iiadvanced-txt::after,
.content .text-column.me-txt::after,
.content .online-list h2 {
	color: rgba(255,255,255,0.5);
	display: block;
	width: 75px;
	background: transparent;
	border-bottom-color: #5c9f96;
}

.content .online-list h2 {
	top: 10px;
	left: 0;
	width: 60px;
	text-align: left;
	text-transform: uppercase;
}

.content .grid-top.grid2::after {content: 'MAINFRAME';}
.content .grid-bottom.grid3::after {content: 'AUXILIARY PANEL';}
.content .grid-top.grid4::after {content: 'SUB SYSTEM';}
.content .text-column.iiadvanced-txt::after {content: 'ORIGINAL SYSTEM';}
.content .text-column.me-txt::after {content: 'REBUILT SYSTEM';}

.content .grid-bottom.grid3::after {
	width: 78px;
}

.content .version-logo .column:last-of-type {
	color: #fff;
	text-align: right;
	font-size: 9px;
	letter-spacing: 0.35em;
	font-family: serif;
	text-shadow:
		0 0  5px #fff,
		0 0  5px #fff,
		0 0 10px #fff;
	margin: 0;
}

.content .version-logo .column:last-of-type::after {content: 'V4.PROPHECY';}

.content .grid-top .grid-column:last-of-type,
.content .grid-top .grid-column:last-of-type::before,
.content .grid-bottom .grid-column:last-of-type,
.content .grid-bottom .grid-column:last-of-type::before {
	border: none;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.content .grid-top .grid-column:last-of-type,
.content .grid-bottom .grid-column:last-of-type,
.content .grid-bottom.grid3 .grid-column.me-btn {
	display: block !important;
	position: unset !important;
}

.content .grid-bottom.grid3 .grid-column.me-btn {
	box-shadow: none;
}

.content .grid-top.grid2 .grid-column:last-of-type::before,
.content .grid-bottom.grid3 .grid-column.me-btn::before,
.content .grid-top.grid4 .grid-column:last-of-type::before,
.content .text-column.iiadvanced-txt::before,
.content .text-column.me-txt::before,
.content .online-list h2::after {
	color: #fff;
}

.content .grid-top.grid2 .grid-column:last-of-type::before {content: 'MAIN';}
.content .grid-bottom.grid3 .grid-column.me-btn::before {content: 'AUXILIARY'}
.content .grid-top.grid4 .grid-column:last-of-type::before {content: 'SUB';}
.content .text-column.iiadvanced-txt::before {content: 'ORIGINAL';}
.content .text-column.me-txt::before {content: 'REBUILT';}
.content .online-list h2::after {content: 'ONLINE'}

.content .online-list h2::after {
	position: absolute;
	left: 0;
}

.content .grid-top .grid-column:last-of-type::after,
.content .iiadvanced-txt-cont::after,
.content .me-txt-cont::after {
	width: 27px;
	height: 5px;
	top: 6px;
	right: 7px;
	pointer-events: none;
	border: none !important;
	background-size: 100% 2px, 100% 100%;
	background-repeat: repeat-x, repeat;
	background-position: 0 0, 0 0;
	background-image: 
		repeating-linear-gradient(
			to right,
			#000 0px,
			#000 7px,
			transparent 7px,
			transparent 10px
		),
		repeating-linear-gradient(
			to right,
			rgba(0,0,0,0.3) 0px,
			rgba(0,0,0,0.3) 1px,
			transparent 1px,
			transparent 6px,
			rgba(0,0,0,0.3) 6px,
			rgba(0,0,0,0.3) 7px,
			transparent 7px,
			transparent 10px
		);
}

.content .online-list {
	width: 245px;
	height: fit-content;
	max-height: 248px;
	padding: 15px 12px;
}

.content .online-list .grid-top {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-shadow: inset 0 -1px 0 #451e22, 0 0 0 #6a2f34, 0 -1px 0 #4d2226, 0 -2px 0 #4e2327, 0 -3px 0 #4a2125, 0 -4px 0 #2e0d0f;
}

.content .online-list h2, .content .online-list li, .content .online-list p {
	transform: none;
}

.content .online-list ul, .content .online-list .pin-cont {
	font-size: 10px;
}

.content .online-list li {
	margin-left: 15px;
	margin-bottom: 7.5px;
	text-indent: 3px;
}

.content .online-list .pin-cont {
	width: 61px;
	height: 14px;
	left: unset;
	right: 20px;
	align-items: flex-start;
	padding-top: 1px;
	border-radius: 4px;
    color: #fff;
    border-top: 1px solid #0c4e4d;
    border-right: 1px solid #0c4e4d;
    border-left: 1px solid #193130;
    border-bottom: 1px solid #193130;
    background: linear-gradient(to bottom right, #ab797a 49%, #8d1010 51%);
    text-shadow: 1px 1px 2px #000;
    box-shadow:
    	inset  3px 0   3px rgba(0,0,0,0.175),
    	inset -3px 0   3px rgba(0,0,0,0.175),
    	inset  0  -3px 3px rgba(0,0,0,0.175),
    	 4px -2px 1px #2b7676,
    	-2px  3px 1px #7fb3b2;
	font-family: 'Open Sans', sans-serif;
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
}

.content .online-list .pin-cont:hover {
	text-shadow: none;
    background: linear-gradient(to bottom right, #895758 47.5%, #6b0808 52.5%);
	animation: btnFlicker 0.2s infinite ease-in-out;
	color: rgba(255,255,255,0.85);
}

@keyframes btnFlicker {
    0%, 100% { color: rgba(255,255,255,0.9) }
    50% { color: rgba(255,255,255,0.7) }
}


.content .chat,
.content .chat.hidden-chat {
	transition: opacity 0.4s ease-in-out;
	height: calc(100% - 3px);
}

.content .chat.hidden-chat {
	max-height: initial;
}

.content.entrance .main-cont .chat, .content .main-cont.entrance .chat, .content .main-cont.intro .chat,
.content.entrance .main-cont .chat.hidden-chat, .content .main-cont.entrance .chat.hidden-chat, .content .main-cont.intro .chat.hidden-chat {
	opacity: 0;
	pointer-events: none;
}

.content .chat.entrance {
	animation: fadeInChat 0.5s ease-out forwards;
}

.content .v4-buttons {
	display: flex;
	position: absolute;
	right: 0;
	bottom: 0;
}

.content .v4-buttons .chat-visibility,
.content .v4-buttons .chat-height {
	width: 89px;
	height: 17px;
	font-family: var(--title-font);
	font-size: 10px;
	color: #d5b8bb;
	background: linear-gradient(to bottom, #3b060b, #4e0f16);
	border-bottom: 1px solid #591920;
	border-top: 1px solid #110506;
	border-right: 1px solid #4a1218;
	box-shadow: 1px 0 0 #541719;
	clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 18px 0);
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
	position: relative;
	cursor: pointer;
}

.content .v4-buttons .chat-height.expand {
	padding-left: 20px;
}

.content .v4-buttons .chat-visibility {
	margin-right: -15px;
}

.content .v4-buttons .chat-visibility:hover,
.content .v4-buttons .chat-height:hover {
	color: #fff;
}

.content .v4-buttons .chat-visibility::before,
.content .v4-buttons .chat-height::before {
	content: '';
	position: absolute;
	top: 0;
	left: 8px;
	height: 100%;
	width: 8px;
	background: #000;
	transform: skewX(-45deg);
	filter: blur(1.5px);
}

.content .v4-buttons .chat-visibility p,
.content .v4-buttons .chat-height p {
	margin-top: 1px;
}

.content .v4-buttons .chat-height.collapse p {
	padding-left: 10px;
}

.content .v4-buttons .chat-visibility.hide p::after {content: 'hide';}
.content .v4-buttons .chat-visibility.show p::after {content: 'show';}
.content .v4-buttons .chat-height.expand p::after {content: 'expand';}
.content .v4-buttons .chat-height.collapse p::after {content: 'collapse';}

.content .v4-buttons .chat-visibility .icon,
.content .v4-buttons .chat-height .icon {
	width: 12px;
	height: 8px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
	background: linear-gradient(to right, #86c0cd 0, #86c0cd 2px, #40727e 10px, #40727e 100%);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
	tranform: none;
	transition: transform, 0.45s ease-in-out, background, 0.45s ease-in-out;
}

.content .v4-buttons .chat-visibility.show .icon,
.content .v4-buttons .chat-height.expand .icon {
	transform: rotate(180deg);
	background: linear-gradient(to left, #86c0cd 0, #86c0cd 2px, #40727e 10px, #40727e 100%);
	transition: transform, 0.45s ease-in-out, background, 0.45s ease-in-out;
}

.content .v4-buttons .chat-visibility:hover .icon,
.content .v4-buttons .chat-height:hover .icon {
	animation: buttonFlicker 0.45s infinite ease-in-out;
}

@keyframes buttonFlicker {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(3); }
}

.content .logo-cont {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    flex: unset;
    width: 246px;
    padding-left: 50px;
    position: relative;
    height: 70px;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 20px;
    box-shadow:
    	0 15px 5px -4px rgba(255,255,255,0.05),
		0 -15px 5px -4px rgba(255,255,255,0.05);;
}

.content .logo-cont::before {
	content: '';
	position: absolute;
	inset: -5px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	border-radius: 20px;
	pointer-events: none;
	box-shadow:
		inset 0 12px 5px -4px rgba(0,0,0,0.4),
		inset 0 -12px 5px -4px rgba(0,0,0,0.4);
    clip-path: polygon(
	    20px 0,
	    calc(100% - 20px) 0,
	    100% 20px,
	    100% calc(100% - 20px),
	    calc(100% - 20px) 100%,
	    20px 100%,
	    0 calc(100% - 20px),
	    0 20px
    );
}

.content .logo-cont::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 90px;
}

.content.entrance .logo-cont {
	height: 0;
	margin-top: 50px;
	border: 2px solid #fff;
	box-shadow: none;
	animation: logoContEntrance 0.5s ease-in-out forwards;
}

.content.entrance .logo-cont::before {
	border-radius: 0;
	box-shadow: none;
	animation: logoBeforeEntrance 0.5s ease-in-out forwards;
}

.content.entrance .logo-cont::after {
	height: 45px;
	animation: logoAfterEntrance 0.5s ease-in-out forwards;
}

@keyframes logoContEntrance {
    0% { height: 0; margin-top: 50px; border: 2px solid #fff; box-shadow: none; }
    50% { height: 0; margin-top: 50px; border: 2px solid #fff; box-shadow: none; }
    100% { height: 70px; margin-top: 5px; border: none; box-shadow: 0 15px 5px -4px rgba(255,255,255,0.05), 0 -15px 5px -4px rgba(255,255,255,0.05); }
}

@keyframes logoBeforeEntrance {
    0% { border-radius: 0; box-shadow: none; }
    100% { border-radius: 20px; box-shadow: inset 0 12px 5px -4px rgba(0,0,0,0.4), inset 0 -12px 5px -4px rgba(0,0,0,0.4); }
}

@keyframes logoAfterEntrance {
    0% { height: 45px; }
    100% { height: 90px; }
}

.content .logo {
    font-family: 'Asimovian', sans-serif;
    grid-row: 1 / -1;
    grid-column: 1;
	width: 40px;
	height: 40px;
	font-size: 20px;
	margin-right: 20px;
}

.content .logo,
.content .logo:hover {
    box-shadow: none;
    text-shadow: 0 0 20px #fff;
	color: #a0dde2;
	border: 2.5px solid #a0dde2;
}

.content.entrance .logo {
	color: transparent;
	border: 2.5px solid transparent;
	opacity: 0;
	animation: appear 0.5s ease-in-out forwards;;
}

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

.content .logo::before,
.content .logo:hover::before {
	background:
		conic-gradient(
			from 0deg,
			#a0dde2 0deg 83deg,
			transparent 83deg 97deg,
			#a0dde2 97deg 263deg,
			transparent 263deg 277deg,
			#a0dde2 277deg 360deg
		);
	mask: radial-gradient(
	    farthest-side,
	    transparent calc(100% - 3px),
	    rgba(0,0,0,.5) calc(100% - 2.5px),
	    #000 calc(100% - 2px)
	);
	-webkit-mask: radial-gradient(
	    farthest-side,
	    transparent calc(100% - 3px),
	    rgba(0,0,0,.5) calc(100% - 2.5px),
	    #000 calc(100% - 2px)
	);
}

.content.entrance .logo::before {
	background: none;
}

.content .logo::after {
	content: '';
	inset: -8px;
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	position: absolute;
	border-radius: 50%;
	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.5),
			  0 0 10px #000;
}

.content .logo-title,
.content .logo-text {
    grid-column: 2;
    color: #fff;
    transition: text-shadow 0.5s ease-in-out;
    text-shadow:
    	0 0 15px rgba(0,0,0,0.75),
    	0 0 15px rgba(0,0,0,0.75),
    	0 0 15px rgba(0,0,0,0.75);
   	opacity: 1;
    animation: none;
}

.content .logo-title {
    font-family: 'Asimovian', sans-serif;
    grid-row: 1;
    display: flex;
    align-items: end;
    margin-bottom: -12px;
    padding-left: 3px;
}

.content .logo-text {
	font-family: 'Kosugi Maru', 'MS Gothic', sans-serif;
    grid-row: 2;
    align-self: start;
    height: 95%;
    margin-top: auto;
}

.content.entrance .logo-title,
.content.entrance .logo-text {
	margin-left: 25%;
	width: 0;
	opacity: 1;
	overflow: hidden;
	animation: logoTextEntrance 1s ease-in-out forwards;
}

@keyframes logoTextEntrance {
    0% { margin-left: 25%; width: 0; }
    50% { margin-left: 25%; width: 0; }
    100% { margin-left: 0; width: 100%; }
}

.content .logo-cont:hover .logo-title,
.content .logo-cont:hover .logo-text {
	text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5);
	transition: text-shadow 0.5s ease-in-out;
}

.content .logo-title:hover,
.content .logo-text:hover {
	color: inherit;
}

.content .audio {
	z-index: 2;
}

.content .audio, .content .audio.visible, .content .audio.hidden,
.content .sound-cont .v5 {
	background: #4c1419;
	transition: none;
	display: flex;
	max-height: 50px;
	width: 110px;
	opacity: 1;
	position: absolute;
	top: 52px;
	left: 6px;
	font-weight: bold;
	box-shadow: inset 0 0 5px #000, inset 0 0 5px rgba(0,0,0,0.5);
	border-radius: 5px;
	font-family: var(--title-font);
	overflow: visible;
}

.content.entrance .audio {
	opacity: 0;
	filter: brightness(100);
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.25s;
}

@keyframes fadeFromWhite {
	0% { opacity: 1; filter: brightness(100); }
	100% { opacity: 1; filter: none; } 
}

.content .audio div, .content .audio div:hover {
	margin-bottom: -2px;
	text-shadow: none;
	gap: 3px;
	width: 100%;
	position: relative;
	align-items: center;
}

.content .audio div label {
	color: transparent;
	font-size: 0;
	z-index: 1;
}

.content .audio div label::after {
	color: #fff;
	font-size: 9px;
}

.content .audio .audio1 label::after {content: '01. attractor';}
.content .audio .audio2 label::after {content: '02. synergy';}
.content .audio .audio3 label::after {content: '03. rebirth';}
.content .audio .audio4 label::after {content: '04. expansions';}

.content .audio div:has(input[type="radio"]:checked) label::after {
	color: #7fbec0;
}

.content .audio div:has(input[type="radio"]:checked)::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 5px;
	width: calc(100% - 10px);
	height: 9px;
	background: rgba(255,255,255,0.25);
	pointer-events: none;
	z-index: 0;
}

.content .main-cont input[type="radio"], .content .audio div:hover input[type="radio"] {
	box-shadow: none;
	border: none;
	position: relative;
	z-index: 1;
}

.content .audio input[type="radio"]:checked {
	background: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.content .audio input[type="radio"]:checked::before {
	content: '>';
	font-family: var(--title-font);
	font-size: 10px;
	font-weight: bold;
	width: auto;
	height: auto;
}

.content .sound-cont .v4 {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: unset;
	width: 230px;
	height: 90px;
	margin: 15px 1px;
	margin-bottom: 5px;
}

.content .sound-cont .v4, .content header .header-btn-cont, .content .logo-cont::after {
    border-bottom: 10px solid transparent;
    border-image: linear-gradient(
        to top,
        #5c9f96 0%,
        #5c9f96 30%,
        transparent 30%,
        transparent 50%,
        #8b474e 50%,
        #8b474e 100%
    ) 0 0 100% 0 / 10px 0 10px 0 stretch;
}

.content .sound-cont h2, .content .header-btn-cont::before, .content .theme h2, .content .layout h2 {
	font-family: var(--title-font);
	text-align: right;
	color: #519b97;
	font-size: 10px;
	font-weight: normal;
	border-bottom: 5.5px solid rgba(255,255,255,0.6);
	padding-bottom: 3.5px;
	width: 100%;
}

.content .equiliser {
	width: 100px;
	height: 20px;
	background-image: url(../images/equilizer.gif);
	background-size: auto;
	background-position: -7.5px -7.5px;
	background-repeat: no-repeat;
	position: relative;
	border: 1px solid #bc3e49;
	margin: 8px 6px;
	margin-bottom: 0;
	image-rendering: pixelated;
	pointer-events: none;
}

.content.entrance .equiliser {
	border: 1px solid #6c1c23;
	background: #fff;
}

.content .equiliser::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.content.entrance .equiliser::after {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.25s;
}

.content .equiliser.playing::after {
	opacity: 1;
	animation: equiliserIn 0.5s ease-in-out forwards;
}

.content .equiliser.muted::after {
	opacity: 0;
	animation: equiliserOut 0.5s ease-in-out forwards;
}

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

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

.content .playback-controls {
	display: flex;
	gap: 1px;
	border-radius: 2px;
	border: 1px solid #54161c;
	background: #3a1014;
	margin: 0 3px;
}

.content.entrance .playback-controls {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.25s;
}

.content .playback-controls button {
	background: #802833;
	color: #98cccd;
	font-family: var(--title-font);
	font-size: 10px;
	height: 12px;
	width: 25px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	cursor: pointer;
	border-radius: 2px;
	border-top: 1px solid #7d262f;
	border-left: 1px solid #7d262f;
	border-right: 1px solid #52151b;
	border-bottom: 1px solid #52151b;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
	box-shadow:
		inset 1px 0 0 #a0323e,
		inset 0 1px 0 #a0323e,
		inset -1px 0 0 #75212a,
		inset 0 -1px 0 #75212a;
}

.content .playback-controls button:hover {
	background: #611f26;
	border-top-color: #5e1d22;
	border-left-color: #5e1d22;
	border-right-color: #330c0e;
	border-bottom-color: #330c0e;
	box-shadow:
		inset 1px 0 0 #812931,
		inset 0 1px 0 #812931,
		inset -1px 0 0 #56181d,
		inset 0 -1px 0 #56181d;
}

.content .playback-controls button:active {
	overflow: visible;
}

.content .playback-controls button:active::after {
	content: '';
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	background: rgba(255,255,255,0.5);
	filter: blur(1px);
	pointer-events: none;
}

.content .playback-controls button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle 4px at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%, transparent 100%);
	filter: blur(2px);
	z-index: -1;
}

.content .sound-cont .v4 p {
	width: 105px;
	border: 1px solid #3a1014;
	background: #802833;
	color: #fefdfd;
	font-family: var(--title-font);
	font-size: 10px;
	transform: none;
	margin: 0 3px;
	cursor: pointer;
	opacity: 1;
	animation: none;
}

.content.entrance .sound-cont .v4 p {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.25s;
}

.content .sound-cont .v4 p:hover {
	background: #ad3645;
	border-color: #441010;
	box-shadow:
		inset 1px 0 0 #b73b4a,
		inset 0 1px 0 #b73b4a,
		inset -1px 0 0 #52181a,
		inset 0 -1px 0 #52181a;
}

.content .sound-cont .v5 {
	color: #fff;
	justify-content: center;
	align-items: flex-start;
	display: none;
}

.content .sound-cont .v5::after {
	content: 'volume controls';
	position: absolute;
	top: 3px;
	left: 0;
	font-size: 10px;
	width: 100%;
	text-align: center;
}

.content .sound-cont .v5.visible {
	display: flex;
}

.content .sound-cont .v5 .speaker-controls {
	width: 15px;
	height: 13px;
	background: rgba(0,0,0,0.75);
	border: 1px solid #802833;
}

.content .sound-cont .v5 .speaker-controls:hover {
	border-color: #bb3e49;
}

.content .sound-cont .v5 .speaker-controls p {
	opacity: 1;
	animation: none;
}

.content .sound-cont .v5 .speaker-controls p:first-child {
	display: block;
	transform: none;
	margin: 0;
	margin-top: -3px;
}

.content .sound-cont .slider-cont {
	margin-top: 15px;
}

.content .sound-cont .v5 #soundSlider {
	width: 60px;
	border: 1px solid rgba(255,255,255,0.3);
}

.content #soundSlider::-moz-range-thumb, .content #soundSlider::-webkit-slider-thumb {
	height: 10px;
}

.content .sound-cont .v5 .speaker {
	position: absolute;
	left: 17px;
	bottom: 6px;
	height: 10px;
	width: 80px;
	background-size: auto 10px;
	background-position: 65px top;
	filter: brightness(2);
}

.content .sound-cont .v5 .speaker::after {
	content: 'mute audio:';
	font-size: 10px;
	width: 65px;
	display: inline-block;
	position: absolute;
}

.content .header-btn-cont::before {
	content: '> global navigator';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.content.entrance .header-btn-cont::before {display: none;}

.content .header-btn-cont a::before,
.content .header-btn-cont a::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.content .header-btn-cont a::before {
	top: 20px;
	height: 10px;
	background-image: repeating-linear-gradient(
		to bottom,
	    transparent 0,
	    transparent 1px,
	    rgba(255,255,255,0.2) 1px,
	    rgba(255,255,255,0.2) 2px
	);
}

.content .header-btn-cont a::after {
	top: 37px;
	height: 17px;
	background-image: repeating-linear-gradient(
	    -45deg,
	    rgba(255,255,255,0.075) 0px,
	    rgba(255,255,255,0.075) 5px,
	    transparent 5px,
	    transparent 12px
  );
}

.content.entrance .header-btn-cont a::before {
	filter: blur(5px);
	opacity: 0;
	animation: headerBeforeEntrance 0.5s ease-in-out forwards;
}

@keyframes headerBeforeEntrance {
    0% { filter: blur(5px); opacity: 0; }
    100% { filter: none; opacity: 1; }
}

.content.entrance .header-btn-cont a::after {
	width: 0;
	left: 50%;
	background-image: repeating-linear-gradient(
	    -45deg,
	    #fff 0px,
	    #fff 5px,
	    transparent 5px,
	    transparent 12px
  	);
  	opacity: 1;
	animation: headerAfterEntrance 0.5s ease-in-out forwards;
}

@keyframes headerAfterEntrance {
    0% { width: 0; left: 50%; opacity: 1; }
    50% { width: 50%; left: 25%; opacity: 1; }
    100% { width: 100%; left: 0; opacity: 0.075 }
}

.content .header-btn {
	position: relative;
	color: #fff;
}

.content .header-btn:hover {
	text-shadow: none;
}

.content .header-btn:hover::before {
	display: block;
	box-shadow: none;
	border: none;
	filter: none;
	position: absolute;
	top: -3px;
	left: -6px;
	height: calc(100% + 6px);
	width: calc(100% + 12px);
	pointer-events: none;
	opacity: 0.25;
	animation: flicker 0.175s infinite ease-in-out;
}

@keyframes flicker {
    0%, 50% { opacity: 0.25; }
    51%, 100% { opacity: 0.175; }
}

.content .header-btn p {
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 800;
	transform: none;
	text-transform: uppercase;
	animation: none;
	opacity: 1;
}

.content.entrance .header-btn p {
	margin-top: -20px;
	opacity: 0;
	filter: blur(5px);
	animation: headerEntrance 0.5s ease-in-out forwards;
}

@keyframes headerEntrance {
    0% { margin-top: -20px; opacity: 0; filter: blur(5px); }
    100% { margin-top: 0; opacity: 1; filter: none }
}

.content .main-cont {
	margin: 0;
	width: 711px;
	height: 235px;
	margin-left: 1px;
	padding-top: 7px;
	background-size: 100% auto;
	background-position: center bottom 30px;
	background-repeat: no-repeat;
	background-color: #091718;
	transition: height 0.4s ease-in-out;
}

.content .main-cont.expanded {
	height: 462px;
	transition: height 0.4s ease-in-out;
}

.content .main-cont .chat {
	background: transparent;
}

.content .main-cont .chat.half,
.content .main-cont .chat.quarter {
	width: 100%;
	max-width: unset;
}

.content .text-grid,
.content .text-grid::before {
	width: 712px;
	background-color: #54121a;
	background-image: repeating-linear-gradient(
		-45deg,
		#7b4242 0px,
		#7b4242 1px,
		transparent 1px,
		transparent 3px
	);
}

.content .text-grid {
	position: unset;
	margin-top: -247px;
	height: 215px;
}

.content .text-grid::before {
	content: '';
	position: absolute;
	top: 654px;
	left: 0;
	height: 66px;
}

.content .text-column.about-txt, .content .text-column.about-txt.expanded,
.content .text-column.layout-txt, .content .text-column.layout-txt.expanded {
	position: absolute;
	width: calc(200px - 1px * 2);
	height: 177px;
	margin-top: 28px;
	transition: none;
	animation: none;
	filter: none;
	opacity: 1;
	padding: 0;
	overflow: visible;
	background: rgba(0,0,0,0.25);
	box-shadow:
		inset  3px 0   3px rgba(0,0,0,0.25),
		inset  0   3px 3px rgba(0,0,0,0.25),
		inset -3px 0   3px rgba(0,0,0,0.25),
		inset  0  -3px 3px rgba(255,255,255,0.25);
}

.content .text-column.about-txt, .content .text-column.about-txt.expanded {left: 295px;}
.content .text-column.layout-txt, .content .text-column.layout-txt.expanded {left: 503px;}

.content .text-column.about-txt, .content .text-column.about-txt a,
.content .text-column.layout-txt, .content .text-column.layout-txt a {
	color: #69c9c5;
}


.content.entrance .text-column.about-txt, .content.entrance .text-column.about-txt.expanded,
.content.entrance .text-column.layout-txt, .content.entrance .text-column.layout-txt.expanded {
	opacity: 0;
	animation: fadeFromWhite 0.4s ease-in-out forwards;
}

.content.entrance .text-column.about-txt, .content.entrance .text-column.about-txt.expanded {
	animation-delay: 0.8s;
}

.content.entrance .text-column.layout-txt, .content.entrance .text-column.layout-txt.expanded {
	animation-delay: 0.95s;
}

.content .text-column.about-txt::before,
.content .text-column.about-txt::after,
.content .text-column.layout-txt::before,
.content .text-column.layout-txt::after,
.content .supplementals h2,
.content .supplementals h2::before {
	position: absolute;
	font-size: 8px;
	font-weight: 900;
}

.content .text-column.about-txt::before,
.content .text-column.layout-txt::before,
.content .supplementals h2 {
	padding-left: 20px;
	width: calc(100% - 20px + (1px * 2));
	height: 16px;
	top: -21px;
	left: -1px;
	background: #3c0b11;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	display: flex;
	align-items: flex-end;
	color: #69c9c5;
}

.content .text-column.about-txt::before {content: 'about this page';}
.content .text-column.layout-txt::before {content: 'about the layout';}

.content .text-column.about-txt::after,
.content .text-column.layout-txt::after,
.content .supplementals h2::before {
	content: '>>';
	font-family: var(--main-font);
	color: #807477;
	top: -23px;
	left: 7px;
}

.content .about-txt-cont, .content .text-column.layout-txt .v4 {
	padding: 10px 17px;
	padding-bottom: 0;
	height: calc(100% - 13px);
	width: 100%;
	overflow-y: auto;
	scrollbar-color: #69c9c5 #3c0b11;
	text-shadow: 2px 3px 0 rgba(0,0,0,0.5);
}

.content .text-column.iiadvanced-txt, .content .text-column.iiadvanced-txt.expanded,
.content .text-column.me-txt, .content .text-column.me-txt.expanded,
.content .online-list {
	background-color: transparent;
	background-image: 
		url(../images/sidebar-cont.png),
    	linear-gradient(
    		to bottom,
    		#639e9f 0%,
    		#639e9f calc(100% - 11px),
    		transparent calc(100% - 11px),
    		transparent 100%
    	);
	background-size: 100% auto, 100% 100%;
	background-position: center bottom, center bottom;
	background-repeat: no-repeat, no-repeat;
	border-radius: 5px;
	border-bottom-left-radius: 15px;
	box-shadow:
		inset 0 5px 5px rgba(0,0,0,0.5),
		inset 0 2px 2px rgba(0,0,0,0.75);
}

.content .online-list {
	box-shadow:
		inset 0 29px 5px rgba(0,0,0,0.5),
		inset 0 26px 2px rgba(0,0,0,0.75);
}

.content .text-column.iiadvanced-txt, .content .text-column.iiadvanced-txt.expanded,
.content .text-column.me-txt, .content .text-column.me-txt.expanded {
	position: absolute;
	left: 722px;
	width: 245px;
	height: 225px;
	transition: none;
	animation: none;
	filter: none;
	opacity: 1;
	overflow: visible;
	padding: 0;
}

.content .text-column.iiadvanced-txt, .content .text-column.iiadvanced-txt.expanded {
	top: 146px;
}

.content .text-column.me-txt, .content .text-column.me-txt.expanded {
	top: 405px;
}

.content.entrance .text-column.iiadvanced-txt, .content.entrance .text-column.iiadvanced-txt.expanded,
.content.entrance .text-column.me-txt, .content.entrance .text-column.me-txt.expanded {
	box-shadow: inset 0 0 2px 0 rgba(255,255,255,0.5);
	background-image: none;
	opacity: 0;
	filter: none;
	animation: sidebarEntrance 0.75s ease-in-out forwards;
}

.content.entrance .text-column.iiadvanced-txt, .content.entrance .text-column.iiadvanced-txt.expanded {
	animation-delay: 0.5s;
}

.content.entrance .text-column.me-txt, .content.entrance .text-column.me-txt.expanded {
	animation-delay: 0.65s;
}

@keyframes sidebarEntrance {
    0% {
        box-shadow: inset 0 0 2px 0 rgba(255,255,255,0.5);
        background-image: none;
        filter: none;
        opacity: 1;
    }

    50% {
        box-shadow: none;
        background-image: url(../images/sidebar-cont.png), linear-gradient( to bottom, #639e9f 0%, #639e9f calc(100% - 11px), transparent calc(100% - 11px), transparent 100% );
        filter: brightness(100);
        opacity: 1;
    }

    100% {
        box-shadow: none;
        background-image: url(../images/sidebar-cont.png), linear-gradient( to bottom, #639e9f 0%, #639e9f calc(100% - 11px), transparent calc(100% - 11px), transparent 100% );
        filter: none;
        opacity: 1;
    }
}

.content .text-column.iiadvanced-txt::before,
.content .text-column.me-txt::before {
	font-family: 'Open Sans', sans-serif;
	font-size: 8px;
	font-weight: 900;
	color: #fff;
	position: absolute;
	top: -18px;
	left: 0;
	padding-left: 33px;
	padding-bottom: 2px;
	width: calc(100% - 33px);
	height: calc(18px - 2px);
	margin: 0;
	display: flex;
	align-items: flex-end;
}


.content.entrance .text-column.iiadvanced-txt::before,
.content.entrance .text-column.me-txt::before {
	opacity: 0;
	animation: fadeFromWhite 0.5s ease-in-out forwards;
	animation-delay: 0.5s;
}

.content .text-column p, .content .text-column ul, .content .text-column li {
	font-family: var(--main-font);
	font-size: 10px;
	line-height: 13px;
}

.content .text-column.iiadvanced-txt::after,
.content .text-column.me-txt::after {
	top: -20px;
	height: 15px;
	width: 80px;
}

.content .iiadvanced-txt-cont,
.content .me-txt-cont,
.content .online-list ul {
	margin: 16px 12px 51px 13px;
	padding: 5px;
	padding-right: 10px;
	width: calc(100% - 12px - 13px);
	height: calc(100% - 16px - 51px - 3px);
	border-radius: 5px;
	color: #b0e2df;
	overflow-y: auto;
	scrollbar-color: #549d9d #78b0b0;
	image-rendering: pixelated;
	background-color: #2f4e4e;
	background-image: repeating-linear-gradient(
		-45deg,
		#000 0px,
		#000 1px,
		transparent 1px,
		transparent 3px
	);
	box-shadow:
		inset  3px -3px 1px rgba(0,0,0,0.25),
		inset -2px  2px 1px rgba(0,0,0,0.25),
			   3px  6px 0 #233a3a,
			  -3px  6px 0 #233a3a,
			   3px -3px 0 #233a3a,
			  -3px -3px 0 #233a3a;
}

.content.entrance .iiadvanced-txt-cont,
.content.entrance .me-txt-cont {
	opacity: 0;
	animation: appear 0.5s ease-in-out forwards;
}

.content.entrance .iiadvanced-txt-cont {
	animation-delay: 0.5s;
}
.content.entrance .me-txt-cont {
	animation-delay: 0.65s;
}

.content .online-list ul {
	margin: 24px 0;
	width: 100%;
	height: calc(100% - 61px);
	padding-top: 10px;
}

.content .iiadvanced-txt-cont a,
.content .me-txt-cont a {
	color: #b0e2df;
}

.content .iiadvanced-txt-cont::-webkit-scrollbar-track,
.content .iiadvanced-txt-cont::-moz-scrollbar-track,
.content .iiadvanced-txt-cont::scrollbar-track,
.content .me-txt-cont::-webkit-scrollbar-track,
.content .me-txt-cont::-moz-scrollbar-track,
.content .me-txt-cont::scrollbar-track {
	cursor: default;
}

.content .iiadvanced-txt-cont::-webkit-scrollbar-thumb,
.content .iiadvanced-txt-cont::-moz-scrollbar-thumb,
.content .iiadvanced-txt-cont::scrollbar-thumb,
.content .me-txt-cont::-webkit-scrollbar-thumb,
.content .me-txt-cont::-moz-scrollbar-thumb,
.content .me-txt-cont::scrollbar-thumb {
	cursor: pointer;
}

.content .iiadvanced-txt-cont::before,
.content .me-txt-cont::before {
	top: -12px;
}

.content .iiadvanced-txt-cont::after,
.content .me-txt-cont::after {
	content: '';
	position: absolute;
	top: -10px;
}

.content .iiadvanced-txt-cont > :last-child::after,
.content .me-txt-cont > :last-child::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
}

.content .iiadvanced-txt-cont > :last-child::after {
	height: 4px;
	bottom: -9px;
	background-color: #54121a;
	background-image: repeating-linear-gradient(
		-45deg,
		#a82434 0px,
		#a82434 1px,
		transparent 1px,
		transparent 3px
	);
}

.content .me-txt-cont > :last-child::after {
	height: 88px;
	bottom: -90px;
	background-image: repeating-linear-gradient(
		-45deg,
		#010000 0px,
		#010000 1px,
		transparent 1px,
		transparent 3px
    ),
	linear-gradient(to bottom, #a92233 0%, #682029 50%, #682029 100%);
}

.content .grid-top.grid4 {
	margin-top: 227px;
	z-index: 1;
}

.content .text-column .v4, .content .supplementals, .content .theme .v4, .content .layout .v4 {
	display: block;
}

.content .text-grid::after,
.content .supplementals {
	position: absolute;
	left: 14px;
	width: 273px;
	font-family: var(--main-font);
	color: #fff;
	font-size: 10px;
	line-height: 13px;
}

.content .text-grid::after {
	content: '';
	box-sizing: border-box;
	top: 663px;
	height: 57px;
	border-radius: 10px 10px 0 0;
	box-shadow:
		inset  0 5px 5px rgba(0,0,0,0.15),
		inset  5px 0 5px rgba(0,0,0,0.15),
		inset -5px 0 5px rgba(0,0,0,0.15);
}

.content .supplementals {
	top: 414px;
	opacity: 1;
}

.content.entrance .supplementals {
	opacity: 0;
	animation: fadeFromWhite 0.4s ease-in-out forwards;
	animation-delay: 0.65s;
}

.content .supplementals h2 {
	align-items: flex-start;
	padding-top: 1px;
	width: 100%;
	top: 177px;
	animation: dropBottomSup 0.4s ease-in-out forwards;
}

@keyframes dropBottomSup {
    0% {
        top: 177px;
    }

    100% {
        top: 0px;
    }
}

.content .supplementals h2::before {
	top: 1px;
}

.content .text-grid::after,
.content .sup-cont {
	display: flex;
	flex-direction: column;
	background: rgba(0,0,0,0.25);
	padding: 9px 12px;
	text-shadow: 2px 3px 0 rgba(0,0,0,0.5);
}

.content .sup-cont {
	height: 177px;
	border-radius: 10px;
	box-shadow:
		inset  5px  5px 5px rgba(0,0,0,0.75),
		inset -5px -5px 5px rgba(0,0,0,0.75),
			 0 5px 2px -3px rgba(255,255,255,0.25),
			 0 1px 0 0 #000;
	margin-top: 210px;
	animation: dropBottomCont 0.4s ease-in-out forwards;
}

@keyframes dropBottomCont {
    0% {
        margin-top: 210px;
    }

    100% {
        margin-top: 21px;
    }
}

.content .sup-item {
	height: 42px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.content .sup-item img {
	max-height: 100%;
}

.content .sup-txt {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	gap: 5px;
}

.content .sup-txt p {
	margin-top: 5px;
}

.content .sup-txt a {
	font-family: var(--title-font);
	text-align: right;
	background: linear-gradient(to right, transparent, #300107);
	color: #69c9c5;
	height: 12px;
	padding-right: 4px;
	margin-top: auto;
	cursor: pointer;
	position: relative;
}

.content .sup-txt a::before {
	content: '> ';
}

.content .sup-txt a:hover {
	background: linear-gradient(to right, transparent, #180101);
	animation: supFlicker 0.375s infinite ease-in-out;
}

.content .sup-txt a:hover::after {
	content: '>';
	position: absolute;
	width: 5px;
	height: 10px;
	top: 0;
	right: 65px;
	color: rgba(105,201,197,0.5);
	animation: supArrow 0.2s infinite ease-in-out;
}

@keyframes supFlicker {
	0% { color: #69c9c5; }
    10% { color: #ffffff; }
    100% { color: #69c9c5; }
}

@keyframes supArrow {
	0% { right: 65px; }
    50% { right: 58px; }
    100% { right: 65px; }
}

.content .theme, .content .theme.visible, .content .theme.hidden,
.content .layout, .content .layout.visible, .content .layout.hidden {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	position: absolute;
	background: transparent;
	opacity: 1;
	top: 662px;
	width: 193px;
	height: 50px;
	max-height: unset;
	z-index: 1;
	overflow: visible;
}

.content .theme, .content .theme.visible, .content .theme.hidden {left: 305px;}
.content .layout, .content .layout.visible, .content .layout.hidden {left: 513px;}


.content .theme .v4,
.content .layout .v4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.content .theme .v4,
.content .layout .v4,
.content .theme .theme-txt-cont,
.content .layout .layout-txt-cont {
	width: 100%;
	cursor: initial;
}

.content .theme .theme-txt-cont,
.content .layout .layout-txt-cont {
	gap: 9px;
}

.content .theme div,
.content .layout div,
.content .theme div:hover,
.content .layout div:hover {
	margin-bottom: 0;
	opacity: 1;
}

.content .theme h2,
.content .layout h2 {
	text-align: left;
	border: none;
	text-shadow: none;
	cursor: initial;
	margin-top: 2px;
}

.content .theme h2:hover,
.content .layout h2:hover {
	text-shadow: none;
}

.content .theme .theme-select,
.content .layout .layout-select {
	width: 126px;
	height: 14px;
	position: relative;
    flex-shrink: 0;
    border-top: 1px solid rgba(78,40,44,0.75);
    border-left: 1px solid rgba(78,40,44,0.75);
    border-right: 1px solid rgba(132,69,77,0.75);
    border-bottom: 1px solid rgba(132,69,77,0.75);
}

.content .theme .theme-select:hover:not(:has(.arrow:hover)),
.content .layout .layout-select:hover:not(:has(.arrow:hover)) {
    border-top: 1px solid rgba(69,35,39,0.75);
    border-left: 1px solid rgba(69,35,39,0.75);
    border-right: 1px solid rgba(118,62,69,0.75);
    border-bottom: 1px solid rgba(118,62,69,0.75);
}

.content .theme .theme-select::before,
.content .layout .layout-select::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 5px;
	width: 6px;
	height: 6px;
	background: #00c6c6;
	border-left: 1px solid #36787b;
	clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
}

.content .theme .theme-select:hover:not(:has(.arrow:hover))::before,
.content .layout .layout-select:hover:not(:has(.arrow:hover))::before {
	background: #d4f6f6;
	animation: blink 0.25s infinite;
}

.content .theme select,
.content .layout select {
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	font-family: var(--title-font);
	font-size: 10px;
	text-shadow: none;
	cursor: pointer;
	width: 100%;
	height: 100%;
	padding-left: 16px;
	background: #673439;
	color: #bfa4a9;
	border-top: 1px solid #4e282c;
	border-left: 1px solid #4e282c;
	border-right: 1px solid #84454d;
	border-bottom: 1px solid #84454d;
}

.content .theme .theme-select:hover:not(:has(.arrow:hover)) select,
.content .layout .layout-select:hover:not(:has(.arrow:hover)) select {
	background: #5c2e33;
	border-top: 1px solid #452327;
	border-left: 1px solid #452327;
	border-right: 1px solid #763e45;
	border-bottom: 1px solid #763e45;
}

.content .theme option,
.content .layout option {
	cursor: pointer;
}

.content .theme .theme-select .arrow,
.content .layout .layout-select .arrow {
	position: absolute;
	top: 0;
	right: 1px;
	width: 13px;
	height: calc(100% - 1px);
	animation: none;
	transition: none;
	filter: none;
	opacity: 1;
	background: #5e353d;
	border-left: 1px solid #66393f;
	border-top: 1px solid #3d2125;
	border-right: 1px solid #432a2e;
	border-bottom: 1px solid #46262b;
	box-shadow:
		inset  0   1px 0 #6b373d,
		inset  0   2px 0 #6b3941,
		inset  1px 0   0 #753d45,
		inset -1px 0   0 #522e34,
		inset  0  -1px 0 #583138,
	 	0 0 0 1px rgba(0,0,0,0.15);
}

.content .theme .theme-select .arrow:hover,
.content .layout .layout-select .arrow:hover {
	background: #502d33;
	border-left: 1px solid #553035;
	border-top: 1px solid #381e22;
	border-right: 1px solid #382327;
	border-bottom: 1px solid #3b2024;
	box-shadow:
		inset  0   1px 0 #5b2e34,
		inset  0   2px 0 #5a3037,
		inset  1px 0   0 #63343a,
		inset -1px 0   0 #46262b,
		inset  0  -1px 0 #4a292f,
	 	0 0 0 1px rgba(0,0,0,0.15);
}

.content .theme .theme-select .arrow::after,
.content .layout .layout-select .arrow::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 2px;
	width: 7px;
	height: 3px;
	background: #00c6c6;
	border-top: 1px solid rgba(0,0,0,0.175);
	box-sizing: border-box;
	clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

.content .theme .theme-select .arrow:hover::after,
.content .layout .layout-select .arrow:hover::after {
	animation: arrowBlink 0.25s infinite;
}

@keyframes arrowBlink {
    0%, 50% { background: #00c6c6; }
    51%, 100% { background: #d4f6f6; }
}

.content .theme .theme-preview,
.content .layout .layout-preview {
	display: block;
	cursor: pointer;
	width: 193px;
	height: 32px;
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 5px;
	box-shadow:
		inset 0 0 5px #000,
		inset 0 0 5px #000,
		inset 0 0 5px #000,
		inset  1px  1px 0 rgba(0,0,0,0.5),
		inset -1px -1px 0 rgba(0,0,0,0.5),
		    0 2px 0 rgba(255,255,255,0.175);

}

.content .theme .theme-preview.diver {background-image: url(../images/diver.png);}
.content .theme .theme-preview.drones {background-image: url(../images/drones.png);}
.content .theme .theme-preview.aircrafts {background-image: url(../images/aircrafts.png); background-position: center -20px;}
.content .theme .theme-preview.fighter {background-image: url(../images/fighter.png);}
.content .theme .theme-preview.tokyo {background-image: url(../images/tokyo.png); background-position: center -25px;}
.content .theme .theme-preview.iiadvanced {background-image: url(../images/iiadvanced.png); background-position: center -20px;}

.content .layout .layout-preview.v4 {background-image: url(../images/v4_layout-preview.png); display: block;}
.content .layout .layout-preview.v5 {background-image: url(../images/blue-bg.png); display: block;}

.content .footer-links {
	display: flex;
	position: absolute;
	top: 680px;
	left: 40px;
	width: 220px;
	height: 25px;
}

.content .footer-links a, .content .footer-links div {
	height: 100%;
}

.content .footer-links a {
	flex: 1;
}

.content .footer-links div {
	background-position: left center;
	background-repeat: no-repeat;
}

.content .footer-links div:hover {
	opacity: 0.85;
}

.content .footer-links div.ismile-link {
	background-image: url(../../../assets/images/logos/logo.png);
	background-size: auto;
}

.content .footer-links div.iiadvanced-link {
	background-image: url(../images/2a-logo2.png);
	background-size: auto 100%;
}

.loading .bg-flash, .loading .loading-text-cont,
.content .grid-top.grid1, .content .version-logo .logo-column, .content .grid-column.audio-btn, .content .sound-cont .v5, .content .sound-cont .v5 p:first-child,
.content .sound-cont .v5 .speaker::before, .content .header-btn::before, .content .grid-column, .content .grid-top::after, .content .grid-bottom::after,
.content .grid-top .grid-column div, .content .grid-top .grid-column p, .content .grid-bottom .grid-column div, .content .grid-bottom .grid-column p,
.content .text-column .v5, .content .theme .v5, .content .layout .v5,
.content .online-list .pin-cont .pin {
	display: none;
}

@media only screen and (max-width: 1000px) {
	.content .content-box {
		background: transparent;
	}

	body, .content {
		background: linear-gradient(to bottom, #701d25, #3f0e0e);
	}

	.loading::after, .content .content-box::after {
		width: 967px;
	}
}