/* CSS Document pop-up window
https://www.google.com/search?q=html+code+to+popup+window&rlz=1C1RXQR_enUS1100US1100&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjIHCAQQABjvBTIKCAUQABiiBBiJBdIBCTE0NjA3ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8&udm=50&fbs=AIIjpHxU7SXXniUZfeShr2fp4giZud1z6kQpMfoEdCJxnpm_3WBcADgXS0kQ7L92bqYkFCGs4piG0mmPDgZFV1TtUMvZh4b_hOslSO4BbJRk_Rm0e5nkOROTp-nvSsweko3de43Gtt9CMs-9V6V0HY2HqWJFL4M3riFJwQCIBJZhDDvRayRgIHpe0v0RNBYuUU0rLZxxt_NZubttBh4Qq-6PkMs5vG7_FA&ved=2ahUKEwiZxu7r8ueQAxUKC3kGHTQnCV4Q0NsOegQIPxAA&aep=10&ntc=1&mtid=IwwSacLmMb6rw8cP5d-UkAw&mstk=AUtExfBsPiSt4SG59tn2-VyV4cuoHNiPDMc_WVlOlijBZoU-KmLFgJC6EpfRWYl9TuBaFg9VpGwg2sMN_HLB56WnZ_MqMkJ0o46-gLQZYQ3MjNv71fbUtH6BdjO9YF1UlN9_LZF_k1N157PGVLdOZisj-u_Whxpky1WIQ-8&csuir=1
*/ 

/* Styles for the modal background */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 200px; /* Full width */
    height: 200px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: black; /* Black background with opacity */
}

/* Styles for the modal content box */
.modal-content {
    background-color:black;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid black;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Styles for the close button */
.close {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}