body:has(dialog[open]) {
   overflow: hidden;
}

dialog {
   margin: auto;
   padding: 2rem;
   border: none;
   border-radius: 5px;
   background-color: #f7f7f7fd;
   background-image: url(../assets/lined-paper-2.png);
   background-attachment: fixed;
   animation: zoom 0.4s;
}

dialog::backdrop {
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.5);
}


.close-btn {
   position: absolute;
   top: 0;
   right: 1rem;
   background-color: #00000000;
   color: rgb(24, 18, 19);
   border: 0px;
   border-radius: 15%;
   padding: 5px 15px;
   font-family: "Donika Hand";
   font-size: 2.5em;
   text-align: center;
   cursor: pointer;
}

.close-btn:before {
   content: "x";
}

.close-btn:focus-visible {
   outline: 0px;
}

.close-btn:hover {
   color: #c0006d;
}