:root { scrollbar-color: orange #eee; scroll-padding: 10px; }
		body { padding: 10px 10px 80px 10px; background: #eee; font-family: PicNic; font-size: 1.3rem; background-image: url("https://bog-body.neocities.org/weirdweb/2026/otgw.png"); background-size: cover; color: white;}
		h2 { font-size: 3rem; }
		h1, h2, p, span { text-align: center; }
		h1, h2 { max-width: 30rem; margin: 50px auto 0; padding: 10px 0; line-height: 1; color: white;}
		p { max-width: 50rem; margin: 12px auto; text-wrap: balance; color: white;}
		ol li > span { opacity: 0.6; color: white;}
		a:link { color: white; }
		a:visited { color: orange; }
		a:hover, a:focus {  }
		@media (max-width:90vw) {
			ol { column-count: 2 ; }
			ol > span { display: none; }
		}
		@media (min-width:80vw) {
			ol { display: grid; margin: 10px auto; max-width: 90vw; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
			ol > li, ol > span { border: 3px outset; position: relative; list-style-position: inside; padding: 10px; background: rgba(255, 255, 255, 0); height: 85px; }
			li > a, li > span { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: 79px; padding: 4px 2px 0; }
			li a:hover, li a:focus { background: unset; }
			li:has(a:hover), li:has(a:focus) { background: aliceblue; }
			ol > span:nth-child(-n + 7) { color: white; background: black; height: 42px; }
		}
		@media (prefers-color-scheme:dark) {
			:root { scrollbar-color: black darkslategrey; }
			body { background: url('../microscopy/bg.png') darkslategrey; }
			h1 { border-bottom: 5px solid black; }
			a:link { color: lightblue; }
			a:visited { color: #b2d7c1; }
			a:hover, a:focus { background: darkslategrey; }
		}
		@media (prefers-color-scheme:dark) and (min-width:80vw) {
			ol > li, ol > span { background: rgb(220,255,255,0.05); }
			li a:hover, li a:focus { background: unset; }
			li:has(a:hover), li:has(a:focus) { background: darkslategrey; }
			ol > span:nth-child(-n + 7) { color: white; background: black; }	
		}

@font-face {
  font-family: 'PicNic';
  src: url(https://bog-body.neocities.org/weirdweb/2026/PicNic.woff);
}

/*back button*/
.home{
  display: block;
  position: absolute;
  top: 4.5vw;
  left: 4%;
  transform: translate(-50%, -40%);
  width: 3vw;
}
.home span {
			opacity: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: calc(1.5rem);
			color: #D46A6A;
			line-height: 1;
			filter: drop-shadow(1px 1px 0 white)
				drop-shadow(-1px 1px 0 white) 
				drop-shadow(1px -1px 0 white) 
				drop-shadow(-1px -1px 0 white);
			text-transform: uppercase;
			z-index: 99;
			width: fit-content;
			height: fit-content;
			display: inline-block;
			background-color: rgba(0, 0, 0, 0);
			font-family: verdana;
		}
.home:hover img {
			 transform: rotate(20deg);
}
.home:hover span {
			opacity: 1;
    }