* {
  --column-width:768px;
}

body {
	margin:0;
	border-width: 0;
	background: url("img/dot.png");
	background-size: 16px 16px;
	background-position:calc(calc(calc(100vw - var(--column-width)) / 2) + 32px) 5.5px;
	min-height:101vh;
	background-color: black;
}
.grid{
	display: grid;
	grid-template-columns: repeat(8, 16px);
	grid-template-rows: repeat(10, 16px);
}
.gridhalf{
	display: grid;
	grid-template-columns: repeat(4, 16px);
	grid-template-rows: repeat(10, 16px);
}
.square{
	place-self: center;/* reference: css-tricks.com/snippets/css/complete-guide-grid/ */
	height:16px;
	width:16px;
	display: grid;
}
.dots{
	background: #828282;
	border-radius: 3px;
	height:4px;
	width: 4px;
	transition: all 200ms ease-in-out;
	margin:auto;
	place-self: center;
}
.full {
	height:14px;
	width: 14px;
	background-color: #FF4F00;
	animation-delay: 200ms;
	place-self: center;
}
.letter {
	height: 160px;
	width: 128px;
	float: left;
}
.half {
	height: 160px;
	width: 64px;
	float: left;
}



.biggrid{
	min-height:101vh;
	display:grid;
  	width:var(--column-width);
 	grid-template-columns:repeat(56, 16px);
  	grid-template-rows:repeat(400, 16px);
  	margin:-10.5px auto;
}

#namepage {
	grid-column: 9/42;
	grid-row:20/30;
	position: relative;
	display: none;
}
#tap{
	grid-column: 9/42;
	grid-row:20/30;	
	animation: blink steps(1) 500ms infinite;
}
#tap .full {
	background-color:#9f9f9f!important;
}
#tap .dots:not(.full):not(.makefull){
	opacity: 0;
}
#tetris{
	width:512px;
	margin-left:128px;
	margin-top:-192px;
	z-index: 100;
}
.layer{
	height:16px;
	width:512px;
	background-size: 100%;
	position: relative;
}
.animationstarts{
	animation: tetris steps(32) 5000ms;
	animation-fill-mode: forwards;
}
.aa{
	background-image: url("img/Tetris-02.png");
	animation-delay: 20900ms;
	animation-duration: 1000ms;
}
.bb{
	background-image: url("img/Tetris-03.png");
	animation-delay: 19900ms;
	animation-duration: 1000ms;
}
.cc{
	background-image: url("img/Tetris-04.png");
	animation-delay: 18900ms;
	animation-duration: 1000ms;
}
.dd{
	background-image: url("img/Tetris-05.png");
	animation-delay: 16900ms;
	animation-duration: 2000ms;
}
.ee{
	background-image: url("img/Tetris-06.png");
	animation-delay: 14900ms;
	animation-duration: 2000ms;
}
.ff{
	background-image: url("img/Tetris-07.png");
	animation-delay: 9900ms;
}
.gg{
	background-image: url("img/Tetris-08.png");
	animation-delay: 4900ms;
}
.hh{
	background-image: url("img/Tetris-09.png");
	
}

#specimen{
	grid-column: 1/50;
	grid-row: 100/150;
	position: relative;
}
#numbers{
	grid-column: 1/50;
	grid-row:150/170;
	position: relative;
}
#punctuation{
	grid-column: 1/50;
	grid-row:170/180;
	position: relative;
}
.FULL{
	height:14px;
	width: 14px;
	background-color: #FF4F00;
	animation-delay: 200ms;
	place-self: center;
}
/*.center{
	width: 100vw;
	position: absolute;
	top: 1590.5px;
    left: 0.5px;
    z-index: -10;
}
.Center{
	width:1280px;
	height: 1280px;
	margin:auto;
}
#drawingleft {
	width:240px; 
	height:1280px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 16px);
	grid-template-rows: repeat(auto-fill, 16px);
	float:left;
	z-index: 10;
}
#drawingright {
	width:240px; 
	height:1280px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 16px);
	grid-template-rows: repeat(auto-fill, 16px);
	float: right;
	z-index: 10;
	margin-right: 32px;
}*/
/*#test{
	grid-column: 20/21;
	grid-row: 1/1;
	background-color:red;
	border-radius: 3px;
	height: 14px;
	width: 14px;
}*/




#quote{
	grid-column: 1/64;
	grid-row:200/300;
	position: relative;
}

#author{
	grid-column: 1/58;
	grid-row: 300/400;
}
#author .full {
	background-color:#9f9f9f!important;
}
#author .dots:not(.full):not(.makefull){
	opacity: 0;
}

@keyframes blink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
} 

@keyframes tetris {
	0% {top:0px;}
	100%{top:512px;}
}