@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap');

:root {
	--BACK: #2b2b2b;
	--FACE: #524e4d;
	--FONT: #FFF7;
	--GLARE: #FFF4;
	--SHADOW: #0004;
	--HOVER: #FFFC;
	--OUTSET: .1rem .1rem .1rem var(--GLARE) inset, .2rem .2rem .3rem var(--SHADOW);
	--INSET:  .1rem .1rem .1rem var(--GLARE), 2px 2px 2px var(--SHADOW) inset;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background-color: transparent;
}
html { font-size: 10px; }
body { font-size: 1.6em; }
:focus { outline: none;	}	/* for Chrome */
input,
button,
select {
	appearance: none;
	border: none;
}
h1,h2 { font-weight: revert; }
body { font-family: 'Oswald', sans-serif; }
time { font-family: 'Inconsolata', monospace; }
#LOGS_LIST .COMMENT,
#COMMENT_TEXT { font-family: "Marcellus", sans-serif; }

svg {
	fill: currentColor;
	display: block;
	width: auto;
	height: 50%;
	margin: auto;
}

label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
label,
button:not(.Color) {
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	box-shadow: var(--OUTSET);
}
label.On { box-shadow: var(--INSET); }
input[type="checkbox"] {
	display: none;
	&~ .Off { display: inline-flex; }
	&~ .On { display: none; }
	&:checked ~ .Off { display: none; }
	&:checked ~ .On { display: inline-flex;  }
}

button.Color {
	height: 3rem;
	width: 3rem;
	position: relative;
	z-index: 1;
}

label:hover,
button:hover { cursor: pointer; }
label:not(.Color):hover,
button:not(.Color):hover { color: var(--HOVER); }

label:not(.Color):active,
button:not(.Color):active { box-shadow: var(--INSET); }

input[type="text"] {
	background-color: var(--BACK);
	font-weight: bold;
	height: 3rem;
	width: 0px;
	flex: auto;
	border: none;
	border-radius: 1.5rem;
	padding: 0 1.5rem;
	box-shadow: var(--INSET);
	margin-left: calc( -3rem - 5px );
	padding-left: calc( 3rem - 5px );
	&~ .Valid { display: none; }
	&:valid ~ .Valid { display: inline-flex; }
	&~ .Invalid { display: inline-flex; }
	&:valid ~ .Invalid { display: none; }
}

.Spin { animation: SpinAnimation 1s steps(8) infinite; }
@keyframes SpinAnimation{
	  0%{ transform: rotate(0deg); }
	100%{ transform: rotate(1turn); }
}

body {
	height: 100dvh;
	background-color: var(--BACK);
	color: var(--FONT);
	display: flex;
	flex-direction: column;
	> main {
		flex:auto;
		overflow: auto;
	}
	> header, > footer {
		background-color: var(--FACE);
		z-index: 1;
	}
	> header {
		flex:none;
		box-shadow: 0 .2rem .3rem var(--SHADOW);
		display: flex;
		padding: 0 .6rem;
		justify-content: space-between;
		align-items: center;
		> span:last-child {
			display: flex;
			flex-direction: column;
			line-height: 105%;
			text-align: right;
			font-size: 1.2rem;
			margin: .6rem 0;
		}
	}
	> footer {
		flex: none;
		box-shadow: 0 .1rem .1rem var(--GLARE) inset;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .6rem;
	}
}