*{
 			margin:0;
 			box-sizing:border-box;
 			-webkit-box-sizing:border-box;
 			font-size:1em;
 		}

 		html{
 			background-size:cover;
 			-webkit-background-size:cover;
 			width:100%;
 			height:100%;
			-webkit-width:100%;
 			-webkit-height:100%;
 			background-color:#000;
 			padding:0;
 	 	}

 		body{
 			background:100%;
 		}
 		.calc{
 			position:absolute;
 			left:20%;
 			top:10%;
 			width:60%;
 			height:80%;
			-webkit-width:60%;
 			-webkit-height:80%;
 			border-collapse:collapse;
 			display:grid;
 			grid-template-areas:
 			"screeen"
 			"btnz"
 			;
 			grid-template-rows:[row1-start]20%[row1-end row2-start]80%[row2-end];
 			grid-template-columns:100%;
 			
			-webkit-grid-template-areas:
 			"screeen"
 			"btnz"
 			;
 			-webkit-grid-template-rows:[row1-start]20%[row1-end row2-start]80%[row2-end];
 			-webkit-grid-template-columns:100%;
 			
 		}

 		.screen{
 			font-size:1.2rem;
 			padding:5%;
 			text-align:center;
 			background:#000;
 			font-weight:bolder;
 			font-style:oblique;
 			border:2px outset darkorange;
 			color:darkgreen;
 			-webkit-text-fill-color:darkgreen;
 			font-weight:bolder;
 			font-family:oblique;
 			overflow-x:auto;
			overflow-y:hidden;
			-webkit-overflow-scrolling:touch;
 			grid-area:screeen;
 			-webkit-grid-area:screeen;

 		}


 		.btnz{
 			width:100%;
 			height:100%;
			-webkit-width:100%;
 			-webkit-height:100%;
 			grid-area:btnz;
 			-webkit-grid-area:btnz;
 			display:grid;
 			grid-template-columns:25% 25% 25% 25%;
 			grid-template-rows:[row1-start]20%[row1-end row2-start] 20% [row2-end row3-start]20%[row3-end row4-start] 20% [row4-end row5-start]20%[row5-end];
 			grid-template-areas:
 			"c b a del"
 			"f e d div"
 			"i h g times"
 			"j sqr min plus"
 			"pie dot dell eval"
 			;
			
			-webkit-grid-template-columns:25% 25% 25% 25%;
 			-webkit-grid-template-rows:[row1-start]20%[row1-end row2-start] 20% [row2-end row3-start]20%[row3-end row4-start] 20% [row4-end row5-start]20%[row5-end];
 			-webkit-grid-template-areas:
 			"c b a del"
 			"f e d div"
 			"i h g times"
 			"j sqr min plus"
 			"pie dot dell eval"
 			;

 			
 		}

 		.btnz button{
 			width:100%;
 			height:100%;
			-webkit-width:100%;
 			-webkit-height:100%;
 			border-radius:0;
 			-webkit-border-radius:0;
 			background-color:#222;
 			color:azure;
 			-webkit-text-fill-color:azure;
 			padding:1%;
 			border:solid darkorange 3px;
 			border-style:outset;

 		}

 		.btnz button[type="number"]{
 			background-color:#666;
 			text-shadow:0 0 10px #fff;
 			font-weight:bolder;
 			-webkit-text-stroke:.4px darkorange;

 		}


 		.btnz button[type="op"]{
 			font-weight:bold;
 			-webkit-text-stroke:.4px darkorange;
 		}
 		.btnz button[type="number"]:hover{
 			background-color:darkslategray;
 		}



 		@media screen and (max-width:500px){
 			.calc{
 				width:100%;
 				height:100%;
				-webkit-width:100%;
 				-webkit-height:100%;
 				top:0%;
 				left:0;
 				grid-template-rows:[row1-start]20%[row1-end row2-start]80%[row2-end];
				-webkit-grid-template-rows:[row1-start]20%[row1-end row2-start]80%[row2-end];
 				font-size:1.4em;
 			}

 			.screen{
 				padding-top:9%;
 			}

 		}


 		@media screen and (max-width:900px) and (max-height:500px){

 			.calc{
 				width:100%;
 				height:100%;
				-webkit-width:100%;
 				-webkit-height:100%;
 				top:0;
 				left:0;
	  			grid-template-rows:[row1-start]30%[row1-end row2-start]70%[row2-end];
	  			-webkit-grid-template-rows:[row1-start]30%[row1-end row2-start]70%[row2-end];
				
 			}

 			.screen{
 				padding-top:9%;
 			}

 		}

 		}