/* to the body element */
.noscroll { 
	overflow: hidden; 
}

.overlay { 
   	position: fixed; 
   	overflow-y: scroll;
   	inset: 0;
	place-items: center;

}

[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: grid; }




/* this code is not strictly necessary: just to make this demo a bit pleasant */

.overlay div {
   width: 80%;
   max-width: 650px;
   padding: 30px;
   background: rgba(255,255,255, .95);
}

.overlay {
    background:  rgba(40,40,40, .75);
}




* { box-sizing: border-box; }
button { padding: 1.5em 4em; cursor: pointer;}
pre { background: #fafafa; padding: 15px; border: 1px #ccd dashed; }
pre + p { margin: 5vh 0; }