html {
     scrollbar-width: thin;
     box-sizing: border-box;
 }

 html::-webkit-scrollbar {
     width: 10px;
 }

 body {
     font-family: monospace;
     margin: 10em auto;
     width: 60vw;
     height: 60vh;
     background-image: url(/img/subtle.png);
 }

 @media screen and (max-width:768px) {
     body {
         margin: 0 auto;
         width: 92vw;
         height: auto;
     }
 }

 .intro {
     display: flex;
     flex-direction: row;
     justify-content: center;
     gap: 1em;
 }

 @media screen and (max-width:768px) {
     .intro {
         flex-direction: column-reverse;
     }

 }

 #illustration>img {
     max-width: 400px;
 }

 #text {
     height: 70vh;
     display: flex;
     flex-direction: column;
     justify-content: end;
 }

 @media screen and (max-width: 768px) {
     #text {
         height: auto;
     }
 }

 .pop {
     margin: 4em auto;
     padding: 1em;
     width: 50vw;
     height: 75vh;
     background-image: url(/img/subtle.png);
     color: black;
     overflow-y: auto;
     scrollbar-width: thin;
     border: 1px solid black;
     box-shadow: 5px 5px 0 grey;
 }

 @media screen and (max-width: 768px) {
     .pop {
         width: 70vw;
         height: 80vh;
     }
 }

 button {
     appearance: none;
     border: none;
     background: none;
     font-family: monospace;
     display: block;
 }

 button:hover {
     cursor: pointer;
 }

 li {
    margin-bottom: .5em;
 }