html {
  overflow-y: scroll;
 }

 /* Thanks, Zach! https://www.zachleat.com/web/stable-scrollbar-gutters/ 
 @supports (scrollbar-gutter: stable) {
   html {
      overflow-y: auto;
      scrollbar-gutter: stable;
   }
 }
*/
 body {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
 }

 header {
  padding: 2em 2em 0;
 }

 body>div {
  padding: 0 2em;
 }

 main {
  margin: 0 auto;
  display: grid;
  max-width: 900px;
  align-items: left;
  justify-items: self;
  grid-template-columns: repeat(auto-fit, minmax(250px, 3fr));
  gap: 1rem;
 }

 main article {
  border: 1px solid green;
 }

 button {
  border: none;
  background: none;
  width: 100%;
  cursor: help;
 }

 img {
  max-width: 100%;
  magin: 0 auto;
 }

 [popover] {
  margin: 0;
  padding: 2em;
 }

 [popover]:popover-open {
  overflow-y: scroll;
  max-height: 70vh;
 }

 [popover] img {
  display: none;
 }

 h3 {
  color: #00bed6;
  text-align: center;
  font-size: 1.5em;
 }

 @media (min-width: 800px) {
  [popover] {
    max-width: 60vw;
    margin: 3em auto;
  }

  [popover] img {
    display: block;
    margin: 0 auto;
  }

  h3 {
    font-size: 1.5em;
  }
 }

 ::backdrop {
  backdrop-filter: blur(3px);
 }

 h2 {
  color: #00bed6;
  text-align: center;
  font-size: 2.5em;
 }

 p {
  font-size: 1.5em;
 }

 [popover] p {
  font-size: 1.25em;
 }

 footer {
  text-align: center;
  margin-top: 2em;
  padding: 2em;
  background: #00bed6;
 }

 footer a {
  color: black;
 }