/*      _____  _ __ __| | | ___   _ __   _____      __       
\ \ /\ / / _ \| '__/ _` | |/ _ \ | '_ \ / _ \ \ /\ / /       
 \ V  V / (_) | | | (_| | |  __/_| | | | (_) \ V  V /   Chris Shoup <chris@shoup.org>
  \_/\_/ \___/|_|  \__,_|_|\___(_)_| |_|\___/ \_/\*/
:root {
	--wn-color-bg: #ffffff;
	--wn-color-fg: #13141c;
	--wn-color-1: #414a5e;
	--wn-color-2: #dee1e9;
	--wn-color-3: #fbfcff;
	--wn-color-4: #dce1ed;
	--wn-color-5: #a7adc0;
	--wn-color-6: #a4aec4;
	--wn-color-7: #79b851;
	--wn-color-8: #f3c237;
	--wn-color-9: #fbfcff;
	--wn-color-10: #f4f8ff;

}
:root[data-theme="w_dark"] {
	--wn-color-bg: #13141c;
	--wn-color-fg: #ffffff;
	--wn-color-1: #fbfcff;
	--wn-color-2: #414458;
	--wn-color-3: #191a24;
	--wn-color-4: #656780;
	--wn-color-5: #7b7f98;
	--wn-color-6: #3d4054;
	--wn-color-7: #659c43;
	--wn-color-8: #c29a2b;
	--wn-color-9: #fbfcff;
	--wn-color-10: #1a1a21;
}
@keyframes w_logo_dash {
	from { stroke-dashoffset: 2000; }
	to { stroke-dashoffset: 0; }
}
@keyframes w_letter_typed {
	0% {
		margin: min(0.5dvh,1dvw);
		padding: 0;
		font-size: min(1dvh,5dvw);
		border-color: var(--wn-color-2);
	}
	80% {
		margin: 0;
		padding: min(0.5dvh,1dvw);
		font-size: min(6dvh,12dvw);
	}
	100% {
		margin: min(0.5dvh,1dvw);
		padding: 0;
		font-size: min(5dvh,10dvw);
		border-color: var(--wn-color-5);
	}
}
@keyframes w_letter_untyped {
	0% {
		margin: min(0.5dvh,1dvw);
		padding: 0;
		font-size: 5dvh;
		border-color: var(--wn-color-5);
	}
	20% {
		margin: 0;
		padding: min(0.5dvh,1dvw);
		font-size: min(6dvh,12dvw);
	}
	100% {
		margin: min(0.5dvh,1dvw);
		padding: 0;
		font-size: min(1dvh,5dvw);
		border-color: var(--wn-color-2);
	}
}
@keyframes w_letter_flip {
	0% { transform:rotateX(0); }
	50% { transform:rotateX(-90deg); }
	100% { transform:rotateX(0); }
}
@keyframes w_bubble {
	0% {
		top: 0;
		opacity: 0;
	}
	10% {
		visibility: visible;
		top: calc(-4dvh - 4dvmin);
		opacity: 1;
	}
	90% {
		top: calc(-4dvh - 4dvmin);
		opacity: 1;
	}
	100% {
		top: 0;
		opacity: 0;
		visibility: hidden;
	}
}
@keyframes w_key { 
	0% {
		filter: brightness(1.2);
		font-size: 3dvmin;
	}
	10% {
		filter: brightness(0.8);
	}
	100% {
		filter: brightness(1);
		font-size: 4dvmin;
	}
}
@keyframes w_fade_in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes w_fade_out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden;  } } 
@keyframes w_rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes w_error {
	0% { visibility: hidden; opacity: 0; }
	1% { visibility: visible; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { visibility: hidden; opacity: 0; }
}
html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: "Montserrat","Open Sans",sans-serif;
	user-select: none;
	-webkit-user-select: none;
	background-color: var(--wn-color-bg);
	color: var(--wn-color-fg);
}
#w_body {
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100dvh;
	position: relative;
}
#w_logo {
	position: absolute;
	top: 30dvh;
	left: 50%;
	transform: translateX(-50%);
	height: auto;
	margin: auto;
	width: 40dvw;
	transition: 0s;
	z-index: 3;
	animation: w_fade_out 0.5s ease 2.7s 1 normal forwards;
}
#w_logo path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: w_logo_dash 5s linear alternate infinite;
	filter: drop-shadow( 75px -75px 0px var(--wn-color-6));
	fill: var(--wn-color-6) !important;
	stroke: var(--wn-color-6) !important;
}
#w_logo path:nth-child(1), #w_logo path:nth-child(2), #w_logo path:nth-child(9), #w_logo path:nth-child(13) {
	fill: var(--wn-color-fg) !important;
	stroke: var(--wn-color-6) !important;
}
#w_join, #w_theme {
	z-index: 2;
	position: fixed;
	top: 2.5dvmin;
	height: 5dvmin;
	width: 5dvmin;
	font-weight: bold;
	font-size: 5dvmin;
	line-height: 5dvmin;
	text-align: center;
	background-color: var(--wn-color-2);
	color: var(--wn-color-1);
	padding: 1dvmin;
	border-radius: 1dvmin;
	user-select: none;
	-webkit-user-select: none;
}
#w_join { left: 2.5dvmin; }
#w_theme { right: 2.5dvmin; }
#w_theme svg {
	display: block;
	height: 100%;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
}
body:not(.w_dark) #w_theme svg:first-child, body.w_dark #w_theme svg:last-child {
	display: none;
}
#w_modal {
	visibility: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	color: var(--wn-color-1);
	background-color: rgba(0,0,0,0.65);
	z-index: 9;
	transition: 0.5s;
}
#w_modal > div {
	background-color: var(--wn-color-3);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: rgba(0,0,0,0.4) 0px 2px 4px, rgba(0,0,0,0.3) 0px 7px 13px -3px, rgba(0,0,0,0.2) 0px -3px 0px inset, rgba(0,0,0,0.2) 4px 4px, rgba(0,0,0,0.1) 8px 8px, rgba(0,0,0,0.05) 12px 12px;
	border: max(0.2vw, 3px) solid #222;
}
#w_modal span {
	display: block;
	font-size: max(1.15vw, 1em);
	text-align: center;
	padding: max(0.6vw, 10px);
}
#w_modal_yn, #w_modal_ok { display: none !important; }
.w_modal_yn #w_modal_yn, .w_modal_ok #w_modal_ok { display: block !important; }
#w_modal input {
	font-size: max(1.15vw, 1em);
	margin: 0.5vw 1vw 0.5vw 1vw;
	padding: 0.5vw 1vw 0.5vw 1vw;
	font-weight: bold;
	cursor: pointer;
	background-color: var(--wn-color-4);
	border-color: var(--wn-color-1);
	color: var(--wn-color-1);
	transition: 0.15s;
}
#w_error {
	position: fixed;
	top: 0;
	width: 100%;
	padding-bottom: 2.5dvh;
	padding-top: 2.5dvh;
	font-size: 5dvh;
	background-color: #f00;
	color: #fff;
	z-index: 11;
	text-align: center;
	border-top: 2px solid #800;
	box-shadow: #000 0px 3px 8px, rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	visibility: hidden;
	transition: 0.5s;
	cursor: pointer;
}
#w_status {
	position: absolute;
	top: 0;
	height: 10dvh;
	width: 100%;
	overflow: hidden;
	color: var(--wn-color-1);
	font-weight: bold;
	font-size: 5dvmin;
	display: flex;
	align-items: center;
	justify-content: center;
}
#w_rows {
	position: absolute;
	top: 0;
	padding-top: 10dvh;
}
#w_rows div {
	display: flex;
	width: 100%;
}
#w_rows > div { opacity: 0; }
#w_rows > div:nth-child(1) { animation: w_fade_in 0.5s ease 2.7s 1 normal forwards; }
#w_rows > div:nth-child(2) { animation: w_fade_in 0.5s ease 2.8s 1 normal forwards; }
#w_rows > div:nth-child(3) { animation: w_fade_in 0.5s ease 2.9s 1 normal forwards; }
#w_rows > div:nth-child(4) { animation: w_fade_in 0.5s ease 3.0s 1 normal forwards; }
#w_rows > div:nth-child(5) { animation: w_fade_in 0.5s ease 3.1s 1 normal forwards; }
#w_rows > div:nth-child(6) { animation: w_fade_in 0.5s ease 3.2s 1 normal forwards; }
#w_rows i {
	font-style: normal !important;
	font-weight: bold !important;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: min(8dvh,15dvw);
	width: min(8dvh,15dvw);
	margin: min(0.5dvh,1dvw);
	font-size: min(5dvh,10dvw);
	text-align: center;
	background-color: var(--wn-color-3);
	color: var(--wn-color-1);
	border: 2px solid var(--wn-color-2);
	border-radius: 4px;
	user-select: none;
	-webkit-user-select: none;
}
.w_x {
	background-color: var(--wn-color-6) !important;
	border-color: var(--wn-color-6) !important;
	color: var(--wn-color-9) !important;
}
.w_g {
	background-color: var(--wn-color-7) !important;
	border-color: var(--wn-color-7) !important;
	color: var(--wn-color-9) !important;
}
.w_y {
	background-color: var(--wn-color-8) !important;
	border-color: var(--wn-color-8) !important;
	color: var(--wn-color-9) !important;
}
#w_load, #w_follow  {
	display: block;
	z-index: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -5dvh;
	color: var(--wn-color-1);
	font-variant: small-caps; 
	font-size: max(3dvmin, 3dvh) !important;
	font-weight: bold;
	white-space: nowrap;
}
#w_load:not(.w_retry) > span:last-child, #w_load.w_retry > span:first-child { display: none; }
#w_load > span > span { text-decoration: underline; }
#w_bubble {
	z-index: 1;
	position: absolute;
	top: -8dvh;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--wn-color-10);
	border: 3px solid var(--wn-color-1);
	border-radius: 10dvmax;
	text-align: center;
	padding: 1dvmin 2dvmin 1dvmin 2dvmin;
	font-size: 3dvmin;
	font-weight: 800;
	color: var(--wn-color-1);
	font-family: arial;
	opacity: 0;
	white-space: nowrap;
	visibility: hidden;
}
#w_bubble b {
	display: inline-block;
	height: 4dvmin;
	width: 4dvmin;
	font-size: 3dvmin;
	color: var(--wn-color-1);
	border-radius: 4px;
	pointer: normal !important;
	opacity: 1 !important;
}
#w_bubble:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--wn-color-1);
	border-bottom: 10px solid transparent;
	right: 50%;
	bottom: -23px;
}
#w_bubble:after {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--wn-color-10);
	border-bottom: 10px solid transparent;
	right: 50%;
	bottom: -18px;
}
#w_keyboard {
	position: absolute;
	bottom: 1dvh;
	height: auto;
	margin: auto;
	width: 60dvw;
	transition: 0.5s;
	z-index: 2;
}
#w_keyboard > div {
	display: flex;
	height: 8dvh;
	min-height: 2.5dvmax;
	padding: 0.5dvmin;

}
#w_keyboard > div > b {
	z-index: 2;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	font-size: 4dvmin;
	background-color: var(--wn-color-4);
	color: var(--wn-color-1);
	border-radius: 4px;
	margin: 0.5dvmin;
	transition: 0.2s;
	user-select: none;
	-webkit-user-select: none;
}
#w_keyboard > div:last-child > b:first-child { font-size: 3dvmin !important; }
#w_keyboard svg { height: 5dvmin; }
#w_keyboard > div:last-child > b:first-child, #w_keyboard > div:last-child > b:last-child {
	flex: 2 !important;
}
.w_disabled b, b.w_disabled {
	pointer: normal;
	opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
	#w_keyboard b:not(.w_disabled):hover, #w_load > span:hover, #w_join:hover, #w_theme:hover {
		opacity: 0.8;
		cursor: pointer;
	}
}
@media (max-aspect-ratio: 1/1) {
	#w_keyboard { width: 100dvw; }
	#w_logo { width: 80dvw; }
}