body {margin: 0;
background: #146c8f;
background: linear-gradient(180deg,rgba(20, 108, 143, 1) 0%, rgba(101, 185, 230, 1) 50%, rgba(217, 234, 252, 1) 100%);}

#popup {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#popup-content {
background-color: SkyBlue;
color: black;
padding: 30px;
border-radius: 0px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 400px;
}
#popup button {
margin-top: 20px;
padding: 10px 20px;
background-color: #B012FF;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
}

		#main_nav {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			width: 100%;
			
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}

		.with_nav #main_nav {
			display: block;
		}

		.access_aid {
			display: none;
		}

		#access_nav {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid #ccc;
			background: white 10px 10px / 20px 20px no-repeat;

			background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			z-index: 1;
		}

		.with_nav #access_nav {
			background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
		}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
     text-align: center;
    
}
    

.div1 {
    grid-column: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 1;
    background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(217, 234, 252, 1) 100%);
border: 3px solid black;
}

.div3 {
    grid-row-start: 2;
    grid-column-start: 2;
    background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(217, 234, 252, 1) 100%);
border: 3px solid black;
}

.div4 {
    grid-column-start: 3;
    grid-row-start: 2;
    background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(217, 234, 252, 1) 100%);
border: 3px solid black;
}

.div5 {
    grid-column-start: 4;
    grid-row-start: 2;
    background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(217, 234, 252, 1) 100%);
border: 3px solid black;
}
.div6 {
    grid-column: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 3;
    background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(217, 234, 252, 1) 100%);
border: 3px solid black;
}