#popup {
   position: fixed;

   display: grid;
   place-items: center;

   max-height: 90vh;
   max-width: 80vw;

   scale: 0;
   z-index: 200;
   transition: scale .3s ease-in-out;

   background-color: var(--tbl);
   box-shadow: var(--popupShadow);
}

#popup[open] {
   scale: 1;
}

#popup.thought {
   font-size: 1.5rem;
   font-style: italic;
}

#popup[name]::before {
   content: attr(name);
   position: absolute;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 1.5rem;
   top: -1em;

   box-shadow: var(--shd);
   border-radius: 1rem;
   background-color: var(--bl);
}

#popup.ui-confirm,
#popup.error-popup {
   display: block;
   padding: 1.5em;

   border: 2px solid var(--ddr);
   border-radius: 2em;

   background-color: var(--tbl);
   background-image: repeating-linear-gradient(-45deg, transparent 0 3rem, var(--ddr) 3rem 4rem);

   box-shadow: var(--popupShadow), 0 0 3em 2em var(--bl) inset;

   text-shadow: 0 0 .5em var(--bl), 0 0 .4em var(--bl), 0 0 .3em var(--bl), 0 0 .2em var(--bl);

   h2 {
      text-align: center;
      text-transform: uppercase;
   }

   h3 {
      margin-block: .5em;
      border: 0;
   }
}

#error-contents {
   border: var(--brd);
   border-radius: 1em;
   background-color: var(--vdg);
   padding-inline: 1em;
   
   box-shadow: 0 0 1em .5em var(--bl);

   #copy {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 5;

      button {
         border: 0;
         padding: .5em;
      }
   }
}

#popup[name="about"] {
   width: 60vw;
}