/* modal dialogs */

/* TODO may be target body instead (but an element can only have 1 id!)
   so we can hide scrollbars etc same for .navbar:target

   body:target {
    overflow: hidden
  }

  body:target .search {
        
  }

  close button must have an non-existing id so it won't scroll the page

  TODO .hide & show (for programmatically access

  TODO use <dialog></dialog>

*/

@keyframes slidein {
  from {
    opacity: 0;
    top: -10px
  }
  to {
    opacity: 1;
    top: 0
  }
}

.modal {
  display: none;
  animation: slidein .5s;
  z-index: 1
}

.modal:target {
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, .75);
  display: block;
  height: 100%;
  left: 0;
  padding: 10em;
  position: fixed;
  overflow: auto;
  top: 0;
  width: 100%;

  .close {
    color: white
  }
}