/*

	Copyright © 2020, Stewart Smith. See LICENSE for details.

*/
@charset "utf-8";
/*


	Mobile devices in portrait orientation sorted by
	  CSS Viewport Width descending, 
	  Pixel Ratio descending, 
	  Release Date descending.


	Device         Released     Viewport     Rat   Pixels         PPI
	─────────────────────────────────────────────────────────────────
	iPhone XS Max  2018 Sep     414 × 896    3     1242 × 2688    458
	iPhone XR      2018 Oct     414 × 896    2      828 × 1792    326
	iPhone 8+      2017 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 7+      2016 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 6s+     2015 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 6+      2014 Sep     414 × 736    3~    1080 × 1920    401
	Pixel 3 XL     2018 Oct     412 × 847    4~    1440 × 2960    523
	Pixel 3        2018 Oct     412 × 824    3~    1080 × 2160    443
	Pixel 2 XL     2017 Oct     412 × 732    4~    1440 × 2880    538
	Pixel 1 XL     2016 Oct     412 × 732    4~    1440 × 2560    534
	Pixel 2        2017 Oct     412 × 732    3~    1080 × 1920    441
	Pixel 1        2016 Oct     412 × 732    3~    1080 × 1920    441
	iPhone Xs      2018 Sep     375 × 812    3     1125 × 2436    458
	iPhone X       2017 Nov     375 × 812    3     1125 × 2436    458
	iPhone 8       2017 Sep     375 × 667    2      750 × 1334    326
	iPhone 7       2016 Sep     375 × 667    2      750 × 1334    326
	iPhone 6s      2015 Sep     375 × 667    2      750 × 1334    326
	iPhone 6       2014 Sep     375 × 667    2      750 × 1334    326
	iPhone SE      2016 Mar     320 × 568    2      640 × 1136    326


	https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
	https://mediag.com/blog/popular-screen-resolutions-designing-for-all/




*/






    /***************/
   /*             */
  /*   Fitting   */
 /*             */
/***************/


@media screen and ( max-device-width: 480px ){

	body {

		-webkit-text-size-adjust: 100%;
	}
}
body {
	
	--size: 8px;
	--size: calc( 1vh * 0.8 );
}
/*
@media all and ( min-aspect-ratio: 294/100 ){

	body { --size: calc( 2.94vh * 0.8 ); }
}
@media all and ( max-aspect-ratio: 294/100 ){

	body { --size: calc( 1vw * 0.8 ); }
}
*/
@media all and ( min-aspect-ratio: 1/1 ){

	body { --size: calc( 1vh * 0.8 ); }
	/*main { background-color: green; }*/
}
@media all and ( max-aspect-ratio: 1/1 ){

	body { --size: calc( 1vw * 0.8 ); }
	/*main { background-color: blue; }*/
}





* {

	box-sizing: border-box;
	margin:  0;
	border:  0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
	transform-style: preserve-3d;
}
::-moz-selection {

	background: #FC0;
	color: black;
}
::selection {

	background: #FC0;
	color: black;
}




html, body, main {

	width:  100%;
	height: 100%;
}
html {

	font-size: 16px;
}
body {

	--vh: 1vh;
	
	--beats-per-minute: 120;
	--beat:         calc( 60s / var( --beats-per-minute ));
	--beat-half:    calc( var( --beat ) / 2 );
	--beat-quarter: calc( var( --beat ) / 4 );
	--beat-eighth:  calc( var( --beat ) / 8 );

	--color-background:             hsl( 220,  10%,  80% );
	--color-key-background:         hsl( 220,   0%, 100% );
	--color-key-text:               hsl( 220,  10%,  55% );
	--color-key-text-glow:          none;
	--color-key-press-background:   hsl( 220,  10%,  40% );
	--color-key-press-text:         hsl( 220, 100%, 100% );
	--color-key-press-glow:         none;
	--color-key-options-background: hsl(  25, 100%,  50% );
	--color-key-options-text:       hsl(  25, 100%, 100% );

	margin: 0;
	padding: 0;
	color: hsl( 220, 7%, 40% );
	font-weight: 400;
	font-family: 'SF Pro Text', system-ui, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	hanging-punctuation: first;
	/*overflow: hidden;*/
}
body, #fullscreen-container {

	background-color: var( --color-background );
}










#fullscreen-container {

	position: relative;
	width:  100%;
	height: 100%;
	/*perspective: 600px;*/
	overflow: auto;
}
main {

	position: relative;
	width:  100vw;
	/*height: calc( var( --vh, 1vh ) * 100 );*/
	height: 100vh;
	text-align: center;
	overflow: hidden;
	/*perspective: 600px;*/
	perspective: calc( var( --size ) * 90 );
	perspective-origin: 50vw 50vh;
	transform-style: preserve-3d;
}
section, footer {

	position: relative;
	margin:  0;
	padding: 0;
}








    /****************/
   /*              */
  /*   Keyboard   */
 /*              */
/****************/


.keyboards-rotator,
.keyboards-translator,
.keyboard {
	
	position: absolute;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
	margin: auto;
	width:  calc( var( --size ) * 106 );
	height: calc( var( --size ) *  44 );
	border-radius: calc( var( --size ) * 1 );
	padding: calc( var( --size ) * 4 ) 0;
	font-size:   0;
	line-height: 0;

/*	perspective: calc( var( --size ) * 90 );
	transform-style: preserve-3d;
*/
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.keyboard .shift,
.keyboard .option,
.keyboard .shift-option {

	display: none;
}
.keyboard .default {

	display: block;
}




#receipt {

	background-color: hsl( 0, 0%, 96% );
	background: linear-gradient(

		hsl( 0, 0%, 92% ),
		hsl( 0, 0%, 88% )
	);
}
#receipt-content {

	max-width:  540px;
	max-height: 420px;
	overflow: auto;
	margin: 
		calc( var( --size ) * 8 )
		auto
		0
		auto;
	border-radius: calc( var( --size ) * 1 );
	background-color: white;
	padding: 
		calc( var( --size ) *  6 )
		calc( var( --size ) *  6 )
		calc( var( --size ) * 10 )
		calc( var( --size ) *  6 );
	font-size:   18px;
	line-height: 24px;
	color: hsl( 0, 0%, 75% );
	text-align: left;
	white-space: pre-wrap;
	word-break: break-all;
	overflow-wrap: break-word;
	font-family: "Roboto Mono", "Courier New", "Courier", monospace;
}
#receipt-content.show {

	color: black;
}



.keyboard.shift .default,
.keyboard.shift .option,
.keyboard.shift .shift-option {

	display: none;
}
.keyboard.shift .shift {

	display: block;
}




.keyboard.option .default,
.keyboard.option .shift,
.keyboard.option .shift-option {

	display: none;
}
.keyboard.option .option {

	display: block;
}




.keyboard.shift.option .default,
.keyboard.shift.option .shift,
.keyboard.shift.option .option {

	display: none;
}
.keyboard.shift.option .shift-option {

	display: block;
}




.keyboard.capslock .shift,
.keyboard.capslock .option,
.keyboard.capslock .shift-option {

	display: none;
}
.keyboard.capslock .default {

	display: block;
}
.keyboard.capslock .letter .default {

	display: none;
}
.keyboard.capslock .letter .shift {

	display: block;
}











.row {

	position: relative;
}
.key {

	display: inline-block;
	position: relative;
	vertical-align: bottom;
	margin: calc( var( --size ) * 0.4 );
	width:  calc( var( --size ) * 6 );
	height: calc( var( --size ) * 6 );
	border-radius: calc( var( --size ) * 0.5 );
	


	/*background: var( --color-key-background );*/
	background-color: hsl(

		var( --background-hue ),
		var( --background-saturation ),
		var( --background-lightness )
	);


	padding: 0 calc( var( --size ) * 1 );
	


	/*color: var( --color-key-text );*/
	color: hsl(

		var( --text-hue ),
		var( --text-saturation ),
		var( --text-lightness )
	);

	
	

	text-align: center;
	font-size:   calc( var( --size ) * 2 );
	line-height: calc( var( --size ) * 5.8 );
	overflow: hidden;
	cursor: pointer;
	text-shadow:
		0
		0
		calc( var( --size ) * 2 )
		var( --color-key-text-glow );
	/*
	transition: 
		all 5s linear,
		transform var( --beat ) ease-out;
	transform-origin: center center;
	*/

/*	perspective: calc( var( --size ) * 90 );
	perspective: 500px;
	transform-style: preserve-3d;*/

	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.key.engaged/*,
.key:hover*/ {

	position: relative;
	top:  calc( var( --size ) * 0.1 );
	left: calc( var( --size ) * 0.1 );
	/*box-shadow: 
		0
		0
		calc( var( --size ) * 4 )
		var( --color-key-press-text-glow );*/
	/*transition: none;*/
}





.key.word {

	font-size:   calc( var( --size ) * 1 );
	line-height: calc( var( --size ) * 9 );
}
.key.left {

	text-align: left;
}
.key.right {

	text-align: right;
}








.key-delete,
.key-tab {

	width: calc( var( --size ) * 10 );
}
.key-capslock {

	width: calc( var( --size ) * 10.797 );
}
.key-return {

	width: calc( var( --size ) * 12 );
}
.key-shift-left,
.key-shift-right {

	width: calc( var( --size ) * 14.797 );
}
.key-space {

	width: calc( var( --size ) * 33.189 );
}
.key-command-left,
.key-command-right {

	width: calc( var( --size ) * 8 );	
}



.arrow-up-down-container {

	position: relative;
	display: inline-block;
}
.key-arrow-up, 
.key-arrow-down {

	display: block;
}
.key-arrow-up {

	margin-bottom: 0;
	border-bottom-left-radius:  0;
	border-bottom-right-radius: 0;
}
.key-arrow-down {

	margin-top: 0;
	border-top-left-radius:  0;
	border-top-right-radius: 0;
}
.arrow {

	height:      calc( var( --size ) * 3.0 );
	font-size:   calc( var( --size ) * 1.5 );
	line-height: calc( var( --size ) * 2.8 );
}






.capslock-indicator {

	display: none;
	position: absolute;
	top:    calc( var( --size ) * 1 );
	left:   calc( var( --size ) * 1 );
	width:  calc( var( --size ) * 0.5 );
	height: calc( var( --size ) * 0.5 );
	border-radius: 100%;
	background-color: hsl( 120, 100%, 50% );
	overflow: hidden;
}
.keyboard.capslock .capslock-indicator {

	display: block;
}









.keyboard.option .key-tick,
.keyboard.option .key-E,
.keyboard.option .key-U,
.keyboard.option .key-I,
.keyboard.option .key-N {

	background-color: var( --color-key-options-background );
	color: var( --color-key-options-text );
	/*transition: none;*/
	/*animation:  none;*/
	box-shadow: none;
}
.option {

	/*background-color: */
}












    /****************/
   /*              */
  /*   Controls   */
 /*              */
/****************/

#button-load {

	position: absolute;
	bottom: 120px;
	left: calc( 50% - 30px );
	border-radius: 100%;
	width:  60px;
	height: 60px;
	background-color: black;
	color: white;
	box-shadow: 0px 2px 20px hsla( 0, 0%, 100%, 0.3 );
}
#button-load svg use {

	fill: white;
}
@keyframes load-pulse {

	
}


#controls-activator, 
#controls {

	--size: 8px;
	/*position: fixed;*/
	position: absolute;
	z-index: 100;/*  Fix for Safari iOS.  */
	top:   0;
	right: 0;
	left:  0;
	text-align: center;

	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
#controls-activator {

	display: none;
	height: calc( var( --size ) * 8 );
}
#controls {

	display: grid;
	grid-template-columns: 
		calc( var( --size ) * 8 ) 
		calc( var( --size ) * 8 )
		auto
		calc( var( --size ) * 8 );
	grid-template-rows: calc( var( --size ) * 8 );
	height: calc( var( --size ) * 8 );
	transition: top 0.5s ease-in;
	top: calc( var( --size ) * -8 );
}
#controls.show {

	top: 0;
	transition: top 0.5s ease-out;
}





#controls > div {

	grid-row: 1 / 2;
}
#fullscreen-container:fullscreen #controls-activator {

	height: calc( var( --size ) * 12 );
}
#fullscreen-container:fullscreen #controls {

	top: calc( var( --size ) * -8 );
}
#fullscreen-container:fullscreen #controls.show {

	top: 0;
}




.button {

	display: block;
	width:  100%;
	height: 100%;
	cursor: pointer;
	background-color: hsl( 220, 10%, 70% );
	color: hsl( 220, 10%, 90% );
	line-height: calc( var( --size ) * 7.9 );

	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.button:hover {

	background-color: hsl( 220, 10%, 65% );
	color: hsl( 220, 10%, 100% );
}
.button svg use {

	display: block;
	width:  100%;
	height: 100%;
	fill: hsl( 220, 10%, 90% );
}
#play-pause {

	grid-column: 1 / 2;
}
#play-pause > div {

	width:  100%;
	height: 100%;
}
	#button-play {

		display: block;
		background-color: hsl( 25, 100%, 50% );
		color: white;		
		animation-duration: calc( var( --beat ) * 2 );
		animation-name: pulse;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out;
	}
	#button-play:hover {

		background-color: white;
		color: hsl( 25, 100%, 50% );
		animation: none;
	}
	#button-pause {

		display: none;
	}
	#play-pause.playing #button-play {

		display: none;
	}
	#play-pause.playing #button-pause {

		display: block;
	}
	@keyframes pulse {

		from { background-color: hsl( 25, 100%, 50% ); }
		to   { background-color: hsl( 25, 100%, 40% ); }
	}
#button-restart {

	grid-column: 2 / 3;
}
#button-fullscreen {

	grid-column: 4 / 5;
}
#button-fullscreen #button-fullscreen-exit {

	display: none;
}
#fullscreen-container:fullscreen #button-fullscreen-enter {

	display: none;
}
#fullscreen-container:fullscreen #button-fullscreen-exit {

	display: unset;
}




#timeline {

	position: relative;
	grid-column: 3 / 4;
	width:  100%;
	height: 100%;
	cursor: ew-resize;
}
.loaded {

	position: absolute;
	width: 0;
	height: 100%;
	background-color: hsl( 220, 10%, 75% );
}
#progress,
#progress-head,
#seeker-head {

	position: absolute;
	height: 100%;
}
#progress {

	background-color: hsl( 220, 10%, 70% );
}
#progress-head,
#seeker-head {

	top: 0;
	width: 1px;
}
#progress-head {

	right: 0;
	background-color: hsl( 220, 10%, 90% );
}
#seeker-head {

	left: 0;
	background-color: hsl( 220, 10%, 100% );
}
#progress-clock,
#seeker-clock {

	position: absolute;
	transform: translate( -50%, 180% );
	font-size:   calc( var( --size ) * 2.5 );
	letter-spacing: calc( var( --size ) * 0.08 );
}
#progress-clock {

	color: hsl( 220, 10%, 90% );
}
#seeker-clock {

	color: hsl( 220, 10%, 100% );
}
#progress-head,
#progress-clock,
#seeker-head,
#seeker-clock {

	opacity: 0;
	transition: opacity 0.5s;
}




#timeline.show #progress-head,
#timeline.show #progress-clock,
#timeline.show #seeker-head,
#timeline.show #seeker-clock {

	opacity: 1;
}
/*#timeline:hover #progress-head,
#timeline:hover #progress-clock,
#timeline:hover #seeker-head,
#timeline:hover #seeker-clock {

	opacity: 1;
}*/