.modalContainer {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba(56, 56, 56, 0.6);
   display: flex;
   visibility: hidden;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(20px);
   opacity: 0;
   transition: opacity 0.3s ease-in;
}

.modalContainer.modalContainer_show {
   visibility: visible;
   opacity: 1;
}

.modalContainer:not(.modalContainer_show)
{
   transition: opacity 0.3s ease-out, visibility 0s 0.3s;
}

.modalWindow {
   width: 90%;
   max-width: 600px;
   max-height: 600px;
   background-color: rgba(0, 0, 0, 0.5);
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 100px;
   grid-template-areas:
      "content"
      "footer";
   color: white;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}

.modalWindow-content {
   grid-area: content;
   font-size: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 50px 20px;
}

.modalWindow-footer {
   grid-area: footer;
   border-top: 1px solid rgb(36, 36, 36);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
}

.modalWindow-footer-button {
   width: 240px;
   background-color: rgb(70, 70, 70);
}

.modalWindow-footer-button-text {
   font-size: 32px;
}