@charset "UTF-8";

    *{
      padding: 0;
      margin: 0;
    }

    .modal-open{
      display: inline-block;
      background-color: #666;
      color: #fff;
      margin: 10px;
    }

    .modal-open a{
      display: inline-block;
      padding: 5px;
      text-decoration: none;
      color: #fff;
    }
    .modal{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
    .modal:not(:target) {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s, visibility 0.5s;
    }
    .modal:target{
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s, visibility 0.5s;
    }
    .modal .overlay{
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #000;
      opacity: 0.7;
      top: 0;
      left: 0;
    }
    .modal-wrapper{
    width: 100%;
    max-width: 370px;
    min-width: 300px;
    height: auto;
    max-height: 580px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    .modal-contents{
    overflow: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 0px;
    }
    .modal-content{
      margin: 25px;
    }
    .modal-close{
      position: absolute;
      top: 5px;
      right: 10px;
      text-decoration: none;
    }