@font-face {
	/* Krok font (main) */
	font-family: 'AsimosKrok';
	src: url('fonts/krok-font-v1.0.2.ttf') format('truetype');
}
@font-face {
	/* AsimosLive font (icomoon) */
	font-family: 'AsimosIcons';
	src: url('fonts/asimos-icomoon.ttf') format('truetype');
	font-display: block;
}
:root {
	--ui-bg-color: white; /* used in nav and header */
	--page-bg-color: white; /* used in body and page container */
	--ui-text-color: black; /* used in nav and header */
	--ui-alt-bg-color: black; /* used in current nav etc */
	--ui-alt-text-color: white; /* used in current nav etc */
	--scrollbar-width: 8px;
	--scrollbar-thumb: var(--ui-bg-color);
	--scrollbar-track: var(--ui-text-color);
}
html {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Modern thin dark scrollbar */
::-webkit-scrollbar {
	width: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #555;
}
body {
	width: 100%;
	margin: 0;
	display: flex;
	flex-flow: column;
	min-height: 99.99vh;
	transition: opacity 250ms ease-in-out;
	font-family: 'AsimosKrok';
	font-size: 23px;
	line-height: 23px;
	background-color: var(--page-bg-color);
	scrollbar-width: inherit;
	scrollbar-color: inherit;
}
body.initially-hidden:not(.fully-loaded) {
	opacity: 0.01;
	pointer-events: none;
	user-select: none;
}
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.9);
	backdrop-filter: blur(10px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
	.lightbox.active {
		opacity: 1;
		pointer-events: all;
		cursor: pointer;
	}
	.lightbox-content {
		max-width: 90vw;
		max-height: 90vh;
		position: relative;
		opacity: 0;
		transform: scale(0.95);
		transition: all 0.3s ease;
	}
	.lightbox.active .lightbox-content {
		opacity: 1;
		transform: scale(1);
	}
	.lightbox-image {
		max-width: 100%;
		max-height: 80vh;
		display: block;
		margin: 0 auto;
		cursor: default;
	}
	.lightbox-description {
		color: white;
		text-align: center;
		margin-top: 1rem;
		padding: 0 1rem;
	}
	.lightbox-placeholder {
		padding: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 2em;
	}
		.lightbox-placeholder::before {
			content: '⌛';
		}
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, 230px);
	justify-content: space-between;
}
	.gallery figure {
		text-align: center;
		margin: 0 0 30px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		.gallery a {
			color: black;
			text-decoration: none;
			cursor: pointer;
		}
			.gallery img {
				/*! height: 180px; */
				width: 180px;
				object-fit: cover;
				border: 1px solid;
				border-radius: 3px;
			}
			.gallery figcaption {
				margin-top: 7px;
				max-width: 180px;
			}

.discography .disc {
	display: flex;
	flex-flow: row wrap;
	border: 1px dotted;
	padding: 1em;
	border-radius: 1em;
	text-align: center;
	margin-bottom: 1em;
} 
	.discography .disc-cover {
		width: 100%;
		margin-bottom: 1em;
	}
		.discography .disc-cover a::after {
			content: none !important;
		}
			.discography .disc-cover img {
				width: 200px;
			}
	.discography .disc-title {
		font-size: 1.3em;
		font-weight: bold;
		margin-top: 0.75em;
		margin-bottom: 0.75em;
	}
	.discography .disc-text {
		margin-bottom: 1em;
	}
	.discography .disc-tracklist {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin-left: -3em;
	}
		.discography .disc-tracklist > div {
			margin-left: 3em;
		}
		.discography .disc-tracklist ol {
			padding-left: 1em;
		}
	.discography .disc-footer {
		font-style: italic;
	}

#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 30px;
	background-color: var(--ui-bg-color);
}
	.header-button {
		cursor: pointer;
		font-size: xx-large;
	}
	#page-title {
		font-size: 1.3em;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		padding: 0 20px 0 20px;
	}
		#page-title img {
		  max-height: 100px;
		  aspect-ratio: 1;
		  width: auto;
		}
	#play-pause-button:not(.icon-pause) {
		border-radius: 50%;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
		animation: pulse 2.5s infinite;
		animation-delay: 1s;
	}
		#play-pause-button::before {
			border-radius: 999px;
			box-shadow: inset 0 0 0 1px black;
		}

#page-container {
	flex-grow: 1;
	display: flex;
	background-color: var(--ui-bg-color);
}
	#navigation {
		padding-top: 10px;
		max-width: 200px;
		transition: max-width 250ms ease-in-out, opacity 250ms ease-in-out;
		overflow: hidden;
		flex-shrink: 0;
		background-color: var(--ui-bg-color);
		color: var(--ui-text-color);
	}
		#nav-header {
			text-align: center;
			padding: 1em 0;
			font-size: 1.1em;
		}
		#navigation .nav-item {
			display: block;
			text-decoration: none;
			color: var(--ui-text-color);
			padding: 5px 15px;
			margin: 0 0 5px 10px;
			cursor: pointer;
			border-radius: 10px 0 0 10px;
			white-space: nowrap;
			transition: background 250ms ease-in-out, color 250ms ease-in-out;
			border: 1px solid transparent;
			border-right: none;
		}
		#navigation .nav-item.invisible {
			display: none;
		}
		body:not(.dark-mode) #navigation .nav-item.accented {
			border-color: var(--accent-color);
		}
		body.dark-mode #navigation .nav-item.accented {
			color: var(--accent-color);
		}
		#navigation .nav-item.accented-style-1 {
			--accent-color: yellow;
		}
		#navigation .nav-item.accented-style-2 {
			--accent-color: rgb(255, 50, 50);
		}
		#navigation .nav-item:hover,
		#navigation .nav-item.current {
			background: var(--ui-alt-bg-color);
			color: var(--ui-alt-text-color);
		}
		body.dark-mode #navigation .nav-item:hover {
			text-decoration: underline;
		}
		body:not(.dark-mode) #navigation .nav-item.accented:hover,
		body:not(.dark-mode) #navigation .nav-item.accented.current {
			color: var(--accent-color);
		}
	#page {
		flex-grow: 1;
		padding: 20px;
		position: relative;
		box-sizing: border-box;
		max-width: 100%;
		border-style: solid;
		border-color: black;
		border-width: 1px 0 0 1px;
		border-radius: 10px 0 0 0;
		transition: border-width 200ms ease-in-out, border-radius 150ms ease-in-out;
		background-color: var(--page-bg-color);
	}
		#page > * {
			transition: opacity 100ms ease-in-out;
		}
		#page.hidden > * {
			opacity: 0;
			pointer-events: none;
			user-select: none;
		}
		#page h1 {
			width: 100%;
			font-size: 28px;
		}
		#page h2 {
			width: 100%;
			font-size: 25px;
		}
		#page h1 + h2 {
			margin-top: 0;
		}
		#selida-arxiki .current-song {
			margin: 1em 0;
		}
		#page h1:first-child {
			margin-top: 0;
		}
		#page li {
			margin-bottom: 10px;
		}
		#page a[href^="https://"], #page a[href^="http://"] {
			position: relative;
		}
		#page a[href^="https://"]:hover:after, #page a[href^="http://"]:hover:after {
			font-family: 'AsimosIcons' !important;
			font-style: normal;
			text-decoration: none;
			content: "\e901";
			font-size: 14px;
			position: absolute;
			top: 0;
			right: -19px;
			line-height: 14px;
		}
		#page .fullframe {
			display: flex;
			height: calc(100% + 40px);
			margin: -20px;
		}
			#page .fullframe iframe {
				flex-grow: 1;
				border: none;
			}
		#selida-arxiki .lyrics {
			white-space: pre-line;
			line-height: 1.29999999em;
		}
		#selida-arxiki .right-pane img {
			max-width: 100%;
			max-height: 70vh;
		}
		#selida-apofthegmata li {
			white-space: pre-line;
		}
		#selida-diskografia h2,
		#selida-diskografia h3 {
			margin-top: 50px;
		}
		#selida-stixoi .lyrics {
			white-space: pre-line;
		}
		#selida-stixoi .lyrics-photo {
			max-width: min(75%, 360px);
			margin-top: 1em;
			border-radius: 3px;
		}
		#selida-symvanta ul {
			padding-left: 0;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
			justify-items: center;
		}
			#selida-symvanta li {
				list-style-type: none;
				width: 100%;
				text-align: center;
				padding: 1em;
				margin-bottom: 0;
				box-sizing: border-box;
			}
				#selida-symvanta li > :first-child {
					margin-top: 0;
				}
				#selida-symvanta iframe {
					max-width: 100%;
					border-radius: 10px;
					border: 1px solid;
				}
				#selida-symvanta .video-details {
					margin-top: .5em;
				}
					#selida-symvanta .video-details > :last-child {
						margin-bottom: 0;
					}
		body.dark-mode {
			--page-bg-color: black;
			--ui-bg-color: black;
			--ui-text-color: white;
		}
		.museum {
			border-top-left-radius: 10px;
			overflow: hidden;
		}
		.museum a-scene {
			width: 100%;
			height: 100%;
			background-color: black;
		}

#chat-outer {
  --color-text: #000;
  --color-border: #000;
  --grey-1: #5E5E5E;
  --grey-2: #7e7e7e;
  --focus-outline: #777;
  --color-bg-fill: #FFF;
  --focus-outline-color: #777;
  --chat-height: calc(100vh - 205px);
  height: var(--chat-height);
  max-height: var(--chat-height);
}
#chat {
  display: flex;
  flex-flow: column nowrap;
  height: inherit;
}
#chat-logs {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  flex-grow: 1;
}
#chat-logs table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
#chat-logs td {
  vertical-align: top;
  font-size: 23px;
}
#chat-logs .name {
  font-size: 24px;
  color: var(--grey-1);
  white-space: nowrap;
}
#chat-logs .name span {
  cursor: pointer;
}
#chat-logs .name span:focus {
  outline: var(--focus-outline);
}
#chat-logs .name span:hover {
  color: var(--color-text);
}
#chat-logs .time {
  font-size: 20px;
  color: var(--grey-2);
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}
#chat-logs .msg a {
  text-decoration: none;
  word-break: break-all;
  font-size: inherit;
  border-bottom: 1px solid;
}
#chat-logs .msg a:hover,
#chat-logs .msg a:focus {
  color: var(--grey-1);
}
#chat-inputs {
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;
  flex-flow: row nowrap;
}
#chat-inputs input {
  background: transparent;
  color: var(--color-text);
  padding: 5px 10px;
  border: none;
  box-shadow: inset 1px -1px 0px 0px var(--color-border);
  font-family: 'AsimosKrok';
  font-size: 23px;
  border-bottom-left-radius: 10px;
}
#chat-inputs input:focus {
  outline: none;
  box-shadow: inset 2px -2px 0px 0px var(--color-border);
}
#chat-input-name {
	order: 1;
	flex-grow: 1;
	width: 5px;
	min-width: 50px;
	width: 50px;
	max-width: 200px;
}
#chat-input-message {
  order: 2;
  flex-grow: 3;
  margin: 0 15px;
  width: 5px;
  min-width: 100px;
}
#chat-inputs button {
  order: 3;
  background: var(--color-bg-fill);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  padding: 7px 15px;
  cursor: pointer;
  border-radius: 10px;
  font-family: 'AsimosKrok';
  font-size: 23px;
}
#chat-inputs button:focus {
  outline: none;
  border-color: var(--focus-outline-color);
}
@media only screen and (max-width: 554px) {
  #chat-inputs {
    flex-flow: row wrap;
  }
  #chat-inputs input {
  	min-height: 29px;
  }
  #chat-input-name {
  	max-width: initial;
  }
  #chat-input-message {
  	order: 3;
  	margin: 15px 0 0 0;
  	width: 100%;
  }
  #chat-inputs button {
  	order: 2;
  	margin-left: 15px;
  }
  body.mobile-nav-shown #chat-input-message {
  	order: 2;
  }
  body.mobile-nav-shown #chat-inputs button {
  	order: 3;
  	margin-left: 0;
  	margin-top: 15px;
  }
  #chat-logs table, #chat-logs tbody {
  	display: block;
  }
  #chat-logs tr {
  	display: flex;
  	flex-flow: row wrap;
  	border-left: 1px solid var(--grey-1);
  	padding-left: 10px;
  }
  #chat-logs tr:not(:first-of-type) {
  	margin-top: 10px;
  }
  #chat-logs td {
  	display:inline;
  }
  #chat-logs .msg {
  	order: 3;
  	width: 100%;
  }
  #chat-logs .time {
  	order: 2;
  	flex-grow: 1;
  	padding-right: 0;
  }
  #chat-logs .name {
  	order: 1;
  }
}

@keyframes pulse {
	0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0.555); box-shadow: 0 0 0 0 rgba(0,0,0,0.555);  }
	70% { -moz-box-shadow: 0 0 0 16px rgba(0,0,0,0); box-shadow: 0 0 0 16px rgba(0,0,0,0);  }
	100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0);  }
}

/* ICOMOON */
[class^="icon-"], [class*=" icon-"] {
	font-family: 'AsimosIcons' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-external:before { content: "\e901" }
.icon-menu:before { content: "\e900" }
.icon-youtube:before { content: "\e912" }
.icon-play:before { content: "\ea15" }
.icon-pause:before { content: "\ea16" }

@media only screen and (max-width: 768px) {
	#navigation.hidden {
		max-width: 0;
		opacity: 0;
	}
	#navigation.hidden + #page {
		border-width: 1px 0 0 0;
		border-radius: 0;
	}
	.gallery {
		justify-content: space-around;
	}
	.gallery img {
		height: calc(100vw - 80px);
		width: calc(100vw - 80px);
		max-height: min(50vw, 50vh);
		max-width: 100%;
	}
	.gallery figcaption {
		max-width: calc(100vw - 80px);
	}
	#selida-arxiki .right-pane {
		padding: 30px;
		margin-top: 20px;
		text-align: center;
	}
}
@media only screen and (min-width: 768px) {
	#menu-toggle {
		display: none;
	}
	#selida-arxiki .right-pane {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 250px;
		user-select: none;
		pointer-events: none;
	}
	.discography .disc {
		text-align: unset;
		flex-flow: row nowrap;
	}
	.discography .disc-cover {
		width: unset;
		margin-right: 1em;
		margin-bottom: 0;
	}
	.discography .disc-tracklist {
		justify-content: unset;
	}
}