@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/roboto-mono-v13-latin-regular.eot');
	src: local(''),
		url('assets/fonts/roboto-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/roboto-mono-v13-latin-regular.woff2') format('woff2'),
		url('assets/fonts/roboto-mono-v13-latin-regular.woff') format('woff'),
		url('assets/fonts/roboto-mono-v13-latin-regular.ttf') format('truetype'),
		url('assets/fonts/roboto-mono-v13-latin-regular.svg#RobotoMono') format('svg');
}

@font-face {
	font-family: 'Roboto Mono';
	font-style: bold;
	font-weight: 600;
	src: url('assets/fonts/roboto-mono-v13-latin-600.eot');
	src: local(''),
		url('assets/fonts/roboto-mono-v13-latin-600.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/roboto-mono-v13-latin-600.woff2') format('woff2'),
		url('assets/fonts/roboto-mono-v13-latin-600.woff') format('woff'),
		url('assets/fonts/roboto-mono-v13-latin-600.ttf') format('truetype'),
		url('assets/fonts/roboto-mono-v13-latin-600.svg#RobotoMono') format('svg');
}

@font-face {
	font-family: 'keys';
	font-style: normal;
	font-weight: 400;
	src:  url('assets/fonts/keys.eot?z4tvn8');
	src:  url('assets/fonts/keys.eot?z4tvn8#iefix') format('embedded-opentype'),
	url('assets/fonts/keys.ttf?z4tvn8') format('truetype'),
	url('assets/fonts/keys.woff?z4tvn8') format('woff'),
	url('assets/fonts/keys.svg?z4tvn8#keys') format('svg');
}


:root {
	--background-color: black;
	--text-color: white;
	--highlight-color: red;
	--highlight-transparent: #ff000040;
	--highlight-dark: #400000;
	--dot-border-color: #444;
	--button-radius: 4px;
}

::selection,
select {
	background: var(--highlight-transparent);
}

html,
body {
	overflow: hidden;
	background: #000;
	background: var(--background-color);
}

body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	height: 100vh;
}


* {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	box-sizing: border-box;
	color: var(--text-color);
	text-decoration: none;
	text-rendering: geometricPrecision;
}

*,
*::after,
*::before {
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
	cursor: default;
}

*:focus {
	outline: none;
}

input {
	font-size: 1rem;
	background: transparent;
	border: 0;
	outline: none;
	padding: .5rem .75rem;
	-webkit-user-select: all;
}

button {
	position: relative;
	width: auto;
	font-size: 1rem;
	background: var(--highlight-transparent);
	color: var(--highlight-color);
	border: 0;
	border-radius: var(--button-radius);
	padding: .5rem 1rem;
/*	text-transform: uppercase;*/
	letter-spacing: .02rem;
	outline: none;
	cursor: initial;
}

button:active {
	animation: fade 2s ease reverse forwards;
	opacity: .8;
}

a {
	margin: initial;
	padding: .1em .3em;
	border-radius: var(--button-radius);
}

a[target=_blank]:after {
	content: '';
	display: inline-block;
	height: 1em;
	width: 1em;
	margin: 0 .1rem 0 .25rem;
	vertical-align: text-bottom;
	background-image: url('assets/icons/arrow-up-right.svg');
	background-position: center;
	background-repeat: no-repeat;
}

a:active {
	background: var(--highlight-transparent);
}

.nointeraction{
	pointer-events: none !important;
}

.noscroll {
	overflow-Y: hidden;
	touch-action: none;
}

#c {
	display: none;
}

main {
	display: flex;
	flex-direction: column;
	justify-content: space-around;

	position: fixed;
	height: 100%;
	width: 100%;
	animation: zoomIn .6s linear forwards;
}

#grid {
	position: absolute;
	width: 500px;
	height: 500px;
	max-width: 90vw;
	max-height: 90vw;
	max-width: min(90vw, 80vh);
	max-height: min(90vw, 80vh);
	align-self: center;

	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(16, 1fr);
	grid-template-columns: repeat(var(--grid-res), 1fr);
	grid-template-rows: repeat(var(--grid-res), 1fr);
	cursor: pointer;
	box-sizing: content-box;
	border: 20vw solid transparent;

	transform-origin: 50% 40%;

	animation: maskreveal 1.2s ease-in forwards;
	mask: radial-gradient(circle at center, black 50%, transparent 100%) center;
	mask-repeat: no-repeat;
	mask-position: 50% 50%;
	mask-size: 400% 400%;

	-webkit-animation: maskreveal 1.2s ease-in forwards;
	-webkit-mask: radial-gradient(circle at center, black 50%, transparent 100%) center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 400% 400%;
}

#grid>* {
	display: inline-block;
	background: #111;
	background: #191919;
	border-radius: 50%;
	box-sizing: border-box;
	border: 5px solid var(--background-color);
	border: var(--dot-border) solid var(--background-color);
	transition: background .4s ease;
	transition: background min(var(--frame-time)*0.66, .4s) ease;
	cursor: inherit;
}

#grid.draw {
	cursor: url('assets/cursors/draw.png'), auto;
	cursor: -webkit-image-set(url('assets/cursors/draw.png') 1x,
		url('assets/cursors/draw@2x.png') 2x), auto;
	cursor: url(assets/cursors/draw.svg), auto;
}

#grid.erase {
	cursor: url('assets/cursors/erase.png'), auto;
	cursor: -webkit-image-set(url('assets/cursors/erase.png') 1x,
		url('assets/cursors/erase@2x.png') 2x), auto;
	cursor: url(assets/cursors/erase.svg), auto;
}

#grid.selection {
	cursor: crosshair;
}

#grid.shifting {
	cursor: move;
}

body:not(.playing) #grid[class=''] dot.active,
body:not(.playing) #grid.draw dot.active {
	animation: dotborder .8s ease forwards;
}

body.playing dot.active {
	animation: none;
}

body::after {
	/*preload cursors*/
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content:
		url(assets/cursors/draw.svg) url(assets/cursors/erase.svg) url('assets/cursors/draw.png') url('assets/cursors/draw@2x.png') url('assets/cursors/erase.png') url('assets/cursors/erase@2x.png') url('assets/icons/ghost-on.svg');
}


.invisible{
	opacity: 0 !important;
}

#grid>.ghost {
	background: #444;
	transition: background .2s ease;
}

#grid>.active {
	background: var(--text-color);
	/*transition: background .2s ease;*/
}

#grid>.selected {
	background: var(--highlight-dark) !important;
	cursor: move;
	/*animation: fade 2.5s ease-in-out 2s alternate infinite;*/
	transition-duration: 0s;
	transition: unset;
}

#grid>.selected.active {
	background: var(--highlight-color) !important;
}

#select_rect {
	position: fixed;
	border: 2px solid var(--highlight-color);
	border-style: dashed;
	cursor: crosshair;
}

.hidden #timeline,
.hidden #controls,
.hidden #tools,
.hidden footer {
	animation: fadeOut 1s ease forwards !important;
	pointer-events: none;
}

#timeline {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	position: fixed;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	overflow-x: auto;
	overflow-y: unset;
	padding: .5rem .5rem 1.6rem .5rem;
}

#timeline::-webkit-scrollbar {
	display: none;
}

#timeline:before {
	content: '';
	position: relative;
	background: var(--highlight-color);
	margin: 2px;
	min-width: var(--button-radius);
	min-height: var(--button-radius);
	border-radius: var(--button-radius);
	transition: opacity .75s ease;
	/* animation: grow 2s linear forwards; */
	animation: fade var(--beat-time) linear infinite;
}

#timeline>div {
	position: relative;
	background: var(--highlight-color);
	opacity: .25;
	margin: 2px;
	padding: 0 0 0 1rem;
	width: 100%;
	cursor: initial;

	min-height: var(--button-radius);
	border-radius: var(--button-radius);

	transition: opacity .5s ease;
	animation: grow .5s linear forwards;
	/*animation: grow var(--frame-time) linear forwards;*/
}

#timeline #spacer {
	opacity: 0;
	animation-duration: 0s;
	pointer-events: none;
}

#timeline #dragframe {
	opacity: 1;
	left: 0;
	animation: none;
	position: absolute;
	pointer-events: none !important;
/*	transform: translateY(.5em);*/
}

#timeline>div.play:before,
#timeline>div.pause:before {
	content: '';
	position: absolute;
	background: var(--highlight-color);
	left: 0;
	height: 100%;
	border-radius: var(--button-radius);
	min-width: var(--button-radius);
	width: 100%;
}

#timeline>div.pause:before {
	animation: unset;
	width: 100%;
}

#timeline>div.play:before {
	animation: grow 2s linear forwards;
	animation: grow var(--frame-time) linear forwards;
}

#timeline>div:after {
	/*increase click area*/
	content: '';
	position: absolute;
	height: 2rem;
	left: 0;
	right: 0;
	border-radius: var(--button-radius);
	cursor: initial;
}

#timeline>.selected {
	opacity: .75;
}

#timeline>.play,
#timeline>.pause {
	transition: unset;
	opacity: 1;
	background: var(--highlight-dark);
}

#timeline>div.remove {
	animation: fadeShrink .5s linear forwards;
}

.preview{
	position: fixed;
	height: 7em;
	background: black;
	z-index: 9999;
	border: 2px solid #191919;
	border-radius: 0.5rem;
	pointer-events: none;
	opacity: 0;
	animation: fadeOut .2s ease reverse forwards;
	z-index: 1;
}

/*BUTTONS*/

#controls {
	display: flex;
	position: fixed;
	flex-direction: column;
	top: 1rem;
	left: .7rem;
	bottom: 0;
	margin: .5rem;
	opacity: 0;
	animation: fadeInSlideInLeft 1s ease .5s forwards;
	height: auto;
}

#controls>* {
	cursor: initial;
	min-width: 4.5rem;
	width: 4.5rem;
	margin-bottom: .1rem;
	transition: background 0s ease;

	position: relative;
	padding: 1.3rem 1rem;
	border-radius: var(--button-radius);
	color: var(--highlight-color);
	font-size: 1.75rem;
	text-align: center;
	opacity: 1;
	cursor: initial;
	overflow: hidden;
	height: 3em;
}

#controls>.slider{
	-webkit-appearance: none;
		position: absolute;
		top: 3.1em;
		height: 500px;
		width: 100%;
		width: 4.5rem;
		background: #250203;
		background: var(--highlight-dark);
		border-radius: var(--button-radius);
		outline: none;
		overflow: hidden;
		margin: 0;
		z-index: 1;
		opacity: 1;
		transform: scale3d(1,1,1);
		transition: .25s height ease, .25s opacity ease, .25s transform ease;
		backdrop-filter: blur(.4em);
		-webkit-backdrop-filter: blur(.4em);
}

#controls>.slider:active{
		background: var(--highlight-dark);
}

#controls>.slider.appear{
		height: 0;
		opacity: 0;
		padding: 0;
		transform: scale3d(.9,.9,.9);
}


.slider_level{
	-webkit-appearance: none;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 100%;
		height: 50%;
		background: var(--highlight-color);
		outline: none;
		margin: 0;
		z-index: 1;
		pointer-events: none;
}

#controls>*{
	animation-delay: 1s;
}

#controls>#bpm,
#controls>#saveVideo.mp4,
#controls>#saveVideo.webm {
	padding: .7rem .5rem 2.2rem .5rem;
}

#controls>*:active,
#controls>*:focus,
#controls>.active {
	background-color: var(--highlight-transparent);
}

#controls>*:after {
	position: absolute;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .05rem;
	bottom: 1rem;
	left: 0;
	width: 100%;
	text-align: center;
}

#controls>#saveVideo {
	background-image: url(assets/icons/save.svg);
	background-size: 1.25em;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	margin-top: auto;
}

#multiplyer:before {
	content: '×';
}

#bpm:after {
	content: 'BPM';
}

.changed {
	animation: fade 2s ease forwards;
}

.loading:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 0 !important;
	border-radius: var(--button-radius);
	background: var(--highlight-transparent);
	animation: progress 5s ease forwards;
	animation-duration: inherit;
}


#playpause {
	background-position: center;
	background-repeat: no-repeat;
	background-size: .8rem;
}

#addframe {
	display: none;
}

#playpause.play {
	background-image: url(assets/icons/play.svg);
}

#playpause.stop {
	background-image: url(assets/icons/stop.svg);
}

/*TOOLS*/

#tools {
	display: flex;
	position: fixed;
	flex-direction: column;
	right: .7rem;
	margin: .5rem;
	height: 100%;
	justify-content: center;
	opacity: 0;
	animation: fadeInSlideInRight 1s ease .5s forwards;
	z-index: 1;
	pointer-events: none;
}

#tools>*{
	position: relative;
	cursor: initial;
	margin-bottom: .1rem;
	transition: background 0.2s ease;
	height: 2.5rem;
	width: 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
	margin: .75rem 0;
	pointer-events: auto;
	border-radius: 50%;
}

.icnbtn {
	position: relative;
	cursor: initial;
	transition: background 0.2s ease, opacity 1s ease ;
	height: 2.5rem;
	width: 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: auto;
	border-radius: 50%;
}


.tapped{
	animation: fadeOutBackground 1.5s forwards !important;
}

[data-title]:hover:after,
#tools>*:hover:after,
.icnbtn:hover:after {
	/*tooltip*/
	content: attr(data-title);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
	transform: translateX(-100%);
	border: 0;
	padding: 3px 6px;
	background: #222;
	color: var(--text-color);
	border-radius: var(--button-radius);
	opacity: 0;
	animation: fadeOut .2s 1.2s forwards reverse;
	font-size: .8rem;
	font-weight: normal;
	letter-spacing: .02rem;
	pointer-events: none;
}

[data-title]:hover:after,
footer .icnbtn:hover:after {
	transform: translateX(0) translateY(-120%);	
}

footer .icnbtn:not(.selected) {
	opacity: .5;
	animation: none;
}

#tools>.eraser:hover:after {
	/*tooltip special*/
	content: 'Eraser' !important;
	left: unset;
	right: 0;
	transform: rotate(-180deg) translateX(-100%) !important;
}

#tools>#edges.on:hover:after {
	/*tooltip special*/
	content: 'Cut Edges' !important;
}

#tools>:not(.selected) {
	animation: fade .5s ease forwards;
}

#tools>.selected {
	opacity: 1;
}

#mirror,
#ghost,
#edges {
	opacity: 1 !important;
}

#pointer {
	background-image: url('assets/icons/pointer.svg');
}

#pen {
	background-image: url('assets/icons/draw.svg');
	transition: transform .3s ease;
}

#pen.eraser {
	transform: rotate(180deg);
	background-image: url('assets/icons/draw.svg');
}


#pen.selected:before,
#pen.eraser.selected:before {
	content: '';
	position: absolute;
	height: 2.5rem;
	width: 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
}

#pen.selected:before {
	background-image: url('assets/icons/draw-fill.svg');
}

#pen.eraser.selected:before {
	background-image: url('assets/icons/erase-fill.svg');
}

#selection {
	background-image: url('assets/icons/select.svg');
}

#shifting {
	background-image: url('assets/icons/move.svg');
}

#mirror {
	background-image: url('assets/icons/mirror.svg');
}

#mirror.x {
	background-image: url('assets/icons/mirror-x.svg');
}

#mirror.y {
	background-image: url('assets/icons/mirror-y.svg');
}

#mirror.xy {
	background-image: url('assets/icons/mirror-xy.svg');
}

#mirror.off {
	background-image: url('assets/icons/mirror-off.svg');
}

#ghost {
	background-image: url('assets/icons/ghost-off.svg');
}

#ghost.on {
	background-image: url('assets/icons/ghost-on.svg');
}

#edges {
	background-image: url('assets/icons/cutedges-off.svg');
}

#edges.on {
	background-image: url('assets/icons/cutedges-on.svg');
}

#undo {
	background-image: url('assets/icons/undo.svg');
}
#redo {
	background-image: url('assets/icons/redo.svg');
}
#undo, #redo {
	animation: unset;
}
#undo:not(.selected), #redo:not(.selected) {
	background-color: transparent !important;
}



/*Context Menu*/

#options_list {
	position: fixed;
	list-style: none;
	top: .25rem;
	padding: 0;
	width: auto;
	line-height: 3rem;
	color: var(--highlight-color);
	background: var(--highlight-dark);
	border-radius: var(--button-radius);
	border: 0;
	z-index: 2;
	margin-top: .75rem;
	overflow: hidden;

	left: auto;
	top: 54%;
	align-self: center;
}

#options_list p{
	line-height: 1;
	color: inherit;
	margin-right: auto;
	pointer-events: none;
}

#options_list>li {
	display: flex;
	color: inherit;
	min-width: 9em;
	margin-bottom: 2px;
	padding: 0 1rem;
	-webkit-tap-highlight-color: var(--highlight-transparent);
}

#options_list>li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

/*#options_list>li:not(.inactive):active,*/
#options_list>li:not(.inactive).active {
	background: var(--highlight-transparent);
}

#options_list>li.inactive {
	color: var(--highlight-transparent) !important;
	display: none;
}

#options_list span {
	font-family: 'keys', 'Roboto Mono';
	text-transform: uppercase;
	background: transparent;
	color: var(--highlight-transparent);
	border-radius: var(--button-radius);
	border: 0;
	outline: 1.5px solid var(--highlight-transparent);
	font-size: .8em;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	right: 1em;
	height: 1.6em;
	line-height: 1.6em;
	width: 1.5em;
	margin: auto 0 auto 1em;
	top: 0.3em;
	bottom: 0.3em;
	opacity: 0;
	transition: opacity .5s ease;
}
#options_list span{
	min-width: 1.5em;
    width: auto;
    margin-right: -.5em;
    letter-spacing: .15em;
    outline: none;
    font-size: .9em;
}
#options_list .icon{
	opacity: 1;
	outline: 0;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 0;
	margin-right: 1em;
	order: -1;
}

#options_list:hover span {
	opacity: 1;
}

/*INFO Overlay*/

.overlay {
	position: fixed;
	background: #000000EA;
	background: linear-gradient(0deg, black, #000000EA);
	padding: 3rem;
	overflow-Y: auto;
	top: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	text-align: right;

	opacity: 0;
	transform: translateY(5%);
	transition: transform .25s ease, opacity .25s ease;
	pointer-events: none;

	animation: hide .35s ease forwards;
}

.overlay.visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
	z-index: 1;

	animation: none;
}

.overlay>* {
	max-width: 900px;
	margin: auto;
	padding: 3rem;
	text-align: left;
}

.overlay img {
	border-radius: var(--button-radius);
}

#howto hr {
	margin: 2rem 0;
	opacity: .15;
	border-color: var(--text-color);
}

#howto h2 {
	margin: 1rem 0 3rem 0;
}

#howto div [class=''] {
	color: var(--highlight-dark);
}

#howto div {
	display: inline-block;
}

#howto>div {
	min-width: 50%;
}

.overlay p,
.overlay a {
	display: inline-block;
	line-height: 1.65;
	letter-spacing: -0.01em;
	max-width: 36em;
}

.overlay p.note{
	opacity: .3;
	width: 100%;
}

.overlay a {
	cursor: unset;
	color: var(--highlight-color);
}

.overlay .close {
	display: block;
	position: sticky;
	margin: 0 0 0 auto;
	top: 0;
	right: 0;
	height: 2rem;
	width: 2rem;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.9rem;
	background: var(--background-color);
	border-radius: 50%;
	padding: 0;
}

.overlay .close:active,
.overlay .close:focus {
	color: var(--highlight-color);
	background: var(--highlight-transparent);
}

#examples {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 2em 0;
	gap: 2em;
}

.file {
	display: block;
	position: relative;
	height: 8em;
	width: 6em;
	backdrop-filter: blur(0.4em);
	-webkit-backdrop-filter: blur(0.4em);
}

.cover{
	position: absolute;
	top: 0;
	bottom: -20%;
	width: 100%;
	aspect-ratio: 1;
	padding: 10%;
	margin: auto;
	z-index: -1;
}

#info .key {
	font-family: 'keys', 'Roboto Mono';
	font-weight: 400;
	color: var(--highlight-color);
	background: var(--highlight-transparent);
	padding: 0 1rem;
	min-width: 3rem;
	height: 3rem;
	line-height: 3rem;
	border-radius: var(--button-radius);
	margin: .25rem;
	display: inline-block;
	text-align: center;
	backdrop-filter: blur(.4em);
	-webkit-backdrop-filter: blur(.4em);
}

#info .description {
	padding: 1rem 1.5rem;
	display: inline-block;
}

#save.overlay input {
	border-bottom: 2px solid currentColor;
}

#touchdevice.overlay {
	display: none;
}

#touchdevice.overlay>div {
	text-align: center;
	max-width: 360px;
	display: flex;
	height: 80%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#touchdevice.overlay button {
	bottom: 10vh;
	position: absolute;
}

/* SAVE MODAL, RESUME MODAL */

.save>#grid{
	transform: scale(0.5);
}

.resume>#grid {
	transform: scale(0.7);
}

.resume>#grid {
	pointer-events: none;
}

.file:before,
#grid:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('assets/img/file.svg');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: .5rem;
}

#grid:before{
	width: 120%;
	height: 170%;
	top: -100%;
	right: -100%;
	bottom: -100%;
	bottom: -70%;
	left: -100%;
	margin: auto;
	border-radius: 2rem;
	transition: opacity .25s ease-in;
	opacity: 0;
	pointer-events: none;
}

.save>#grid:before {
	opacity: 1;
	pointer-events: all;
	transition-duration: .5s;
}

#filemodal {
	display: none;
	z-index: 1;
	opacity: 0;
	grid-gap: 1em;
	align-items: center;
	margin-top: min(100vw, 500px);
	justify-content: center;
	pointer-events: none;
}
#filemodal div{
	display: flex;
}
#filemodal button{
	background: var(--highlight-dark);
	z-index: 1;
	margin: .1em !important;
	overflow: hidden;
}

.save>#filemodal,
.resume>#filemodal{
	display: grid;
	opacity: 1;
	animation: fadeInSlideInDown .75s forwards;
}
.save>#filemodal * ,
.resume>#filemodal * {
	pointer-events: all;
	color: var(--highlight-color) !important;
	margin: auto;
}
#filename{
	position: relative;
	min-width: 0.5em;
	white-space: nowrap;
	overflow: auto;
	padding: .75rem 1.25rem;
}
#filename:focus:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--highlight-dark);
	border-radius: var(--button-radius);
	z-index: -1;
	opacity: .5;
	animation: fade 2s ease forwards;
}

#filename *{
	display: inline;
}
#filename br {
	content: " ";
	display: none;
}
#filename:after {
	content: '.dots';
	opacity: .5;
}
#grid{
	transform: scale(1);
	transition: transform .5s ease, opacity .5s ease;
}



/*FOOTER*/

footer {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	text-align: right;
	bottom: 0;
	width: 100%;
	padding: 1rem 1.5rem;
	align-items: center;
	pointer-events: none;
}

footer *{
	pointer-events: all;
}

footer>a:active {
	animation: fade 2s ease forwards;
	background: var(--highlight-transparent);
	color: var(--highlight-color);
}

footer>a.active {
	color: var(--highlight-color);
}

footer>a {
	cursor: initial;
	color: var(--highlight-color);
	color: #222; 
	padding: .25rem .6rem;
	border-radius: 50%;
	border-radius: 2rem;
	font-weight: 600;
	font-size: .9rem;
}
footer>div {
	margin: 0;
	animation: fadeInSlideInLeft 1s ease .5s forwards;
}

footer>#wtf {
	color: var(--highlight-color);
	opacity: 0;
	animation: fadeInSlideInRight 3s ease .5s forwards;
	height: auto;
}

footer>#pointer {
	display:none;
}

.mobile {
	display: none;
}

/*MOBILE*/
@media (max-width: 420px) {
	#examples *:nth-child(n+5){
  		display: none;
	}
	#grid {
		padding: 0;
		border: 0;
	}

	#info {
		padding: 1rem 0;
	}

	#info .close {
		top: 2rem;
		right: 1.5rem;
	}

	.overlay p,
	.overlay a {
		line-height: 1.7;
	}
	footer{
		padding: 0 1rem;
	}
}

/*MOBILE LANDSCAPE*/

@media (max-height: 420px) {
	#controls>* {
		width: 2.75em;
		min-width: 2.75em;
		font-size: 1.5em;
		height: 2.75em;
		line-height: 1;
	}

	#controls>*:after {
		bottom: .8em;
		font-size: .8rem;
	}

	#controls>.slider {
		top: 3em;
		width: 2.75em;
		height: 70vh;
	}
}

/*MOBILE PORTRAIT*/

@media (min-height: 110vw) {

	#grid {
		border: 0;
	}

	/*----*/

	#controls {
		flex-direction: row;
		max-width: 100vw;
		scrollbar-width: none;
		animation: fadeInSlideInUp 1s ease .5s forwards;

		top: 0;
		right: 0;
		bottom: auto;
		left: 0;

		background: #290000;
		border-radius: calc(2 * var(--button-radius));
		padding: .5rem;

		z-index: 1;
	}
	
	#controls::-webkit-scrollbar {
		display: none;
	}

	#controls:after {
		content: '';
		width: 2rem;
		position: relative;
		padding: 0 .25rem;
	}

	#controls>.slider{
		top: 3.5em;
	}
	
	#controls {
		width: fit-content;
		margin: auto auto 5em auto;
		position: unset;
		order: 4;
	}

	#controls>div {
		font-size: 1.5rem;
		line-height: 1.5rem;
		margin: 0;
		border: 0;
	}

	#controls>#multiplyer {
		padding: 1.4rem 1rem 1.2rem 1rem;
	}

	#timeline {
		top: 6.25rem;
	}

	#tools {
		height: unset;
		bottom: 1.5rem;
		width: auto;
		flex-direction: row;
		left: .7rem;
		animation: fadeInSlideInDown 1s ease .5s forwards;
	}

	#tools>* {
		min-width: 2.5rem;
		margin: .75rem;
	}

	#bpm:after,
	#saveVideo:after {
		bottom: .7rem;
	}

	footer>#wtf {
		margin-left: auto;
	}

	/*newlayout*/
	body{
		display: flex;
		flex-direction: column;
	}
	footer {
		top: 0;
		bottom: auto;
		position: unset;
		order: 0;
	}
	footer #pointer{
		display: block;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		animation: unset;
	}
	#timeline {
		position: unset;
		order: 3;
		width: 500px;
		margin: auto;
		max-width: min(90vw, 80vh);
		margin-top: 2em;
		padding: 1.6rem 0.5rem;
	}
	#timeline>div:after{
		bottom: 0;
	}
	#controls>.slider{
		top: unset;
		bottom: 3.5em;
	}
	#options_list{ 
		display: flex;
		flex-direction: column-reverse;
		transform: translateY(-107%);/*quickfix*/
	}
	#tools {
		position: unset;
		order: 1;
		animation: unset;
	}
	#tools.show{
		animation: fadeInSlideInDown .25s ease forwards;
	}
	#controls:after {
		display: none;
	}
	main {
		position: unset;
		order: 2;
	}

}

@media (min-width: 180vh) {

	#tools {
		bottom: .25rem;
	}

	#tools>* {
		margin: .5rem 0;
	}
}

@media (hover: none),
(pointer: coarse) {

	/* TOUCH */
	body {
		-webkit-touch-callout: none !important;
	}

	a {
		-webkit-user-select: none !important;
	}

	.overlay {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: none;
	}

	#touchdevice.overlay,
	div.mobile {
		display: block;
	}

	div.desktop {
		display: none;
	}

	#grid {
		pointer: unset;
		border: 0;
		-webkit-tap-highlight-color: transparent;
	}

	#controls::-webkit-scrollbar {
		display: none;
	}

	#playpause {
		display: block;
	}

	#info #howto {
		display: none;
	}

	#selection {
		display: none;
	}

	button {
		padding: .75rem 1.25rem;
	}

	#tools>*:hover:after,
	.icnbtn:hover:after { /*tooltip*/
		display: none;
	}

	#options_list span:not(.icon) {
		display: none;
	}
}

@media (display-mode: standalone) {
	#tools {
		bottom: 2rem;
	}

	#pinadvice {
		display: none;
	}
}

/*ANIMATIONS*/

@keyframes grow {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: .5;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOutBackground {
	0% {
		background-color: var(--highlight-transparent);
	}

	100% {
		background-color: transparent;
	}
}

@keyframes fadeInSlideInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20%);
	}

	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}

@keyframes fadeInSlideInRight {
	0% {
		opacity: 0;
		transform: translateX(20%);
	}

	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}

@keyframes fadeInSlideInUp {
	0% {
		opacity: 0;
		transform: translateY(-20%);
	}

	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

@keyframes fadeInSlideInDown {
	0% {
		opacity: 0;
		transform: translateY(20%);
	}

	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

@keyframes fadeShrink {
	0% {
		opacity: 1;
		width: 100%;
	}

	50% {
		opacity: 0;
		width: 100%;
	}

	100% {
		opacity: 0;
		width: 0%;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(.9);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes progress {
	0% {
		width: 0%;
	}

	100% {
		width: 100;
	}
}

@keyframes hide {

	0%,
	99% {
		visibility: visible;
	}

	100% {
		visibility: hidden;
	}
}

@keyframes dotborder {
	0% {
		border-color: inital;
	}

	20% {
		border-color: var(--dot-border-color);
	}

	100% {
		border-color: inital;
	}
}

@keyframes maskreveal {
	0% {
		
		-webkit-mask-size: 0% 0%;
		mask-size: 0% 0%;
	}
	99% {
		
		-webkit-mask-size: 400% 400%;
		mask-size: 400% 400%;
	}
	100% {
		
		-webkit-mask-size: 400% 400%;
		mask-size: 400% 400%;
		
		-webkit-mask: unset;
		mask: unset;
	}
}