:root{
--hole1: 99.999999%;
--hole2: 86.809109664%;
--hole3: 75.358215942%;
--hole4: 65.41779693%;
--hole5: 56.78860761%;
--hole6: 49.2976851%;
--hole7: 42.79488186%;
--hole8: 37.14985623%;
--hole9: 32.24945967%;
--hole10: 27.995469%;
--hole11: 24.30261753%;
--hole12: 21.09688602%;
--hole13: 18.314019%;
--hole14: 15.8982369%;
--hole15: 13.80111792%;
--hole16: 11.98062759%;
--hole17: 10.40027613%;
--hole18: 9.02838708000001%;
--hole19: 7.83746241000002%;
--hole20: 6.80363127000001%;
--hole21: 5.90617167000001%;
--hole22: 5.12709498000001%;
--hole23: 4.45078542000001%;
--hole24: 3.8636871%;
--hole25: 3.35403228000001%;
--hole26: 2.91160548000001%;
--hole27: 2.52753867000001%;
--hole28: 2.19413373000002%;
--hole29: 1.90470783000001%;
--hole30: 1.65345981%;
--hole31: 1.43535363000001%;
--hole32: 1.24601757000001%;
--hole33: 1.08165666000001%;
--hole34: 0.938976390000015%;
--hole35: 0.815116920000001%;
--hole36: 0.707595600000019%;
--hole37: 0.61425732%;
--hole38: 0.533231190000009%;
--hole39: 0.462893130000005%;
--hole40: 0.401833260000018%;
--hole41: 0.34882776000002%;
--hole42: 0.30281415000001%;
--hole43: 0.262870140000011%;
--hole44: 0.228195090000007%;
--hole45: 0.198093990000004%;
--hole46: 0.171963510000005%;
--hole47: 0.149279850000006%;
--hole48: 0.129588390000016%;
--hole49: 0.112494390000009%;
--hole50: 0%;


--tunnelcolor1: #000000;
--tunnelcolor2: #F9F9F9;
--tunnelcolor3: #F4F4F4;
--tunnelcolor4: #EFEFEF;
--tunnelcolor5: #EAEAEA;
--tunnelcolor6: #E4E4E4;
--tunnelcolor7: #DFDFDF;
--tunnelcolor8: #DADADA;
--tunnelcolor9: #D5D5D5;
--tunnelcolor10: #D0D0D0;
--tunnelcolor11: #CACACA;
--tunnelcolor12: #C5C5C5;
--tunnelcolor13: #C0C0C0;
--tunnelcolor14: #BBBBBB;
--tunnelcolor15: #B6B6B6;
--tunnelcolor16: #B0B0B0;
--tunnelcolor17: #ABABAB;
--tunnelcolor18: #A6A6A6;
--tunnelcolor19: #A1A1A1;
--tunnelcolor20: #9C9C9C;
--tunnelcolor21: #969696;
--tunnelcolor22: #919191;
--tunnelcolor23: #8C8C8C;
--tunnelcolor24: #878787;
--tunnelcolor25: #828282;
--tunnelcolor26: #7C7C7C;
--tunnelcolor27: #777777;
--tunnelcolor28: #727272;
--tunnelcolor29: #6D6D6D;
--tunnelcolor30: #686868;
--tunnelcolor31: #626262;
--tunnelcolor32: #5D5D5D;
--tunnelcolor33: #585858;
--tunnelcolor34: #535353;
--tunnelcolor35: #4E4E4E;
--tunnelcolor36: #484848;
--tunnelcolor37: #434343;
--tunnelcolor38: #3E3E3E;
--tunnelcolor39: #393939;
--tunnelcolor40: #343434;
--tunnelcolor41: #2E2E2E;
--tunnelcolor42: #292929;
--tunnelcolor43: #242424;
--tunnelcolor44: #1F1F1F;
--tunnelcolor45: #1A1A1A;
--tunnelcolor46: #141414;
--tunnelcolor47: #0F0F0F;
--tunnelcolor48: #0A0A0A;
--tunnelcolor49: #050505;
--tunnelcolor50: #000000;
}



body{
	width: 300vw;
	height: 300vh;
	overflow: hidden;
	background-color:red;
	margin: 0;
	justify-items: center;
}

.tunnel {
	justify-self: center;
	align-self: center;
	background-color: inherit;
	height: 300vh;
	width: 300vw;
	position: absolute;
	
}
.tunnelcontainer{
	width: 0;
	height: 0;
	justify-content: center;
	align-content: center;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
}
#tunnel1{top: 50%;left: 50%;background-color:var(--tunnelcolor1);z-index:50;}
#tunnel2{top: 50%;left: 50%;background-color:var(--tunnelcolor2);z-index:49;}
#tunnel3{top: 50%;left: 50%;background-color:var(--tunnelcolor3);z-index:48;}
#tunnel4{top: 50%;left: 50%;background-color:var(--tunnelcolor4);z-index:47;}
#tunnel5{top: 50%;left: 50%;background-color:var(--tunnelcolor5);z-index:46;}
#tunnel6{top: 50%;left: 50%;background-color:var(--tunnelcolor6);z-index:45;}
#tunnel7{top: 50%;left: 50%;background-color:var(--tunnelcolor7);z-index:44;}
#tunnel8{top: 50%;left: 50%;background-color:var(--tunnelcolor8);z-index:43;}
#tunnel9{top: 50%;left: 50%;background-color:var(--tunnelcolor9);z-index:42;}
#tunnel10{top: 50%;left: 50%;background-color:var(--tunnelcolor10);z-index:41;}
#tunnel11{top: 50%;left: 50%;background-color:var(--tunnelcolor11);z-index:40;}
#tunnel12{top: 50%;left: 50%;background-color:var(--tunnelcolor12);z-index:39;}
#tunnel13{top: 50%;left: 50%;background-color:var(--tunnelcolor13);z-index:38;}
#tunnel14{top: 50%;left: 50%;background-color:var(--tunnelcolor14);z-index:37;}
#tunnel15{top: 50%;left: 50%;background-color:var(--tunnelcolor15);z-index:36;}
#tunnel16{top: 50%;left: 50%;background-color:var(--tunnelcolor16);z-index:35;}
#tunnel17{top: 50%;left: 50%;background-color:var(--tunnelcolor17);z-index:34;}
#tunnel18{top: 50%;left: 50%;background-color:var(--tunnelcolor18);z-index:33;}
#tunnel19{top: 50%;left: 50%;background-color:var(--tunnelcolor19);z-index:32;}
#tunnel20{top: 50%;left: 50%;background-color:var(--tunnelcolor20);z-index:31;}
#tunnel21{top: 50%;left: 50%;background-color:var(--tunnelcolor21);z-index:30;}
#tunnel22{top: 50%;left: 50%;background-color:var(--tunnelcolor22);z-index:29;}
#tunnel23{top: 50%;left: 50%;background-color:var(--tunnelcolor23);z-index:28;}
#tunnel24{top: 50%;left: 50%;background-color:var(--tunnelcolor24);z-index:27;}
#tunnel25{top: 50%;left: 50%;background-color:var(--tunnelcolor25);z-index:26;}
#tunnel26{top: 50%;left: 50%;background-color:var(--tunnelcolor26);z-index:25;}
#tunnel27{top: 50%;left: 50%;background-color:var(--tunnelcolor27);z-index:24;}
#tunnel28{top: 50%;left: 50%;background-color:var(--tunnelcolor28);z-index:23;}
#tunnel29{top: 50%;left: 50%;background-color:var(--tunnelcolor29);z-index:22;}
#tunnel30{top: 50%;left: 50%;background-color:var(--tunnelcolor30);z-index:21;}
#tunnel31{top: 50%;left: 50%;background-color:var(--tunnelcolor31);z-index:20;}
#tunnel32{top: 50%;left: 50%;background-color:var(--tunnelcolor32);z-index:19;}
#tunnel33{top: 50%;left: 50%;background-color:var(--tunnelcolor33);z-index:18;}
#tunnel34{top: 50%;left: 50%;background-color:var(--tunnelcolor34);z-index:17;}
#tunnel35{top: 50%;left: 50%;background-color:var(--tunnelcolor35);z-index:16;}
#tunnel36{top: 50%;left: 50%;background-color:var(--tunnelcolor36);z-index:15;}
#tunnel37{top: 50%;left: 50%;background-color:var(--tunnelcolor37);z-index:14;}
#tunnel38{top: 50%;left: 50%;background-color:var(--tunnelcolor38);z-index:13;}
#tunnel39{top: 50%;left: 50%;background-color:var(--tunnelcolor39);z-index:12;}
#tunnel40{top: 50%;left: 50%;background-color:var(--tunnelcolor40);z-index:11;}
#tunnel41{top: 50%;left: 50%;background-color:var(--tunnelcolor41);z-index:10;}
#tunnel42{top: 50%;left: 50%;background-color:var(--tunnelcolor42);z-index:9;}
#tunnel43{top: 50%;left: 50%;background-color:var(--tunnelcolor43);z-index:8;}
#tunnel44{top: 50%;left: 50%;background-color:var(--tunnelcolor44);z-index:7;}
#tunnel45{top: 50%;left: 50%;background-color:var(--tunnelcolor45);z-index:6;}
#tunnel46{top: 50%;left: 50%;background-color:var(--tunnelcolor46);z-index:5;}
#tunnel47{top: 50%;left: 50%;background-color:var(--tunnelcolor47);z-index:4;}
#tunnel48{top: 50%;left: 50%;background-color:var(--tunnelcolor48);z-index:3;}
#tunnel49{top: 50%;left: 50%;background-color:var(--tunnelcolor49);z-index:2;}
#tunnel50{top: 50%;left: 50%;background-color:var(--tunnelcolor50);z-index:1;}

#hole1{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole1), rgba(0, 0, 0, 1) 0%);}
#hole2{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole2), rgba(0, 0, 0, 1) 0%);}
#hole3{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole3), rgba(0, 0, 0, 1) 0%);}
#hole4{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole4), rgba(0, 0, 0, 1) 0%);}
#hole5{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole5), rgba(0, 0, 0, 1) 0%);}
#hole6{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole6), rgba(0, 0, 0, 1) 0%);}
#hole7{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole7), rgba(0, 0, 0, 1) 0%);}
#hole8{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole8), rgba(0, 0, 0, 1) 0%);}
#hole9{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole9), rgba(0, 0, 0, 1) 0%);}
#hole10{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole10), rgba(0, 0, 0, 1) 0%);}
#hole11{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole11), rgba(0, 0, 0, 1) 0%);}
#hole12{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole12), rgba(0, 0, 0, 1) 0%);}
#hole13{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole13), rgba(0, 0, 0, 1) 0%);}
#hole14{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole14), rgba(0, 0, 0, 1) 0%);}
#hole15{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole15), rgba(0, 0, 0, 1) 0%);}
#hole16{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole16), rgba(0, 0, 0, 1) 0%);}
#hole17{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole17), rgba(0, 0, 0, 1) 0%);}
#hole18{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole18), rgba(0, 0, 0, 1) 0%);}
#hole19{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole19), rgba(0, 0, 0, 1) 0%);}
#hole20{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole20), rgba(0, 0, 0, 1) 0%);}
#hole21{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole21), rgba(0, 0, 0, 1) 0%);}
#hole22{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole22), rgba(0, 0, 0, 1) 0%);}
#hole23{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole23), rgba(0, 0, 0, 1) 0%);}
#hole24{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole24), rgba(0, 0, 0, 1) 0%);}
#hole25{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole25), rgba(0, 0, 0, 1) 0%);}
#hole26{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole26), rgba(0, 0, 0, 1) 0%);}
#hole27{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole27), rgba(0, 0, 0, 1) 0%);}
#hole28{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole28), rgba(0, 0, 0, 1) 0%);}
#hole29{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole29), rgba(0, 0, 0, 1) 0%);}
#hole30{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole30), rgba(0, 0, 0, 1) 0%);}
#hole31{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole31), rgba(0, 0, 0, 1) 0%);}
#hole32{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole32), rgba(0, 0, 0, 1) 0%);}
#hole33{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole33), rgba(0, 0, 0, 1) 0%);}
#hole34{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole34), rgba(0, 0, 0, 1) 0%);}
#hole35{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole35), rgba(0, 0, 0, 1) 0%);}
#hole36{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole36), rgba(0, 0, 0, 1) 0%);}
#hole37{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole37), rgba(0, 0, 0, 1) 0%);}
#hole38{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole38), rgba(0, 0, 0, 1) 0%);}
#hole39{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole39), rgba(0, 0, 0, 1) 0%);}
#hole40{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole40), rgba(0, 0, 0, 1) 0%);}
#hole41{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole41), rgba(0, 0, 0, 1) 0%);}
#hole42{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole42), rgba(0, 0, 0, 1) 0%);}
#hole43{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole43), rgba(0, 0, 0, 1) 0%);}
#hole44{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole44), rgba(0, 0, 0, 1) 0%);}
#hole45{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole45), rgba(0, 0, 0, 1) 0%);}
#hole46{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole46), rgba(0, 0, 0, 1) 0%);}
#hole47{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole47), rgba(0, 0, 0, 1) 0%);}
#hole48{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole48), rgba(0, 0, 0, 1) 0%);}
#hole49{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole49), rgba(0, 0, 0, 1) 0%);}
#hole50{mask-image: radial-gradient(circle closest-side,rgba(0, 0, 0, 0) var(--hole50), rgba(0, 0, 0, 1) 0%);}