.modal{display:none;position:fixed;z-index:1;padding-top:50px;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.8)}.modal-content{position:relative;background-color:var(--page-bg-color);margin:auto;padding:0;border:3px solid var(--header-color);width:80%;max-height:100%;box-shadow:0 4px 8px 0 var(--header-color),0 6px 20px 0 var(--header-color);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@-webkit-keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:var(--font-color);float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.modal-header{padding:2px 16px;background-color:var(--header-color);color:var(--font-color)}.modal-body{padding:2px 16px}.modal-footer{padding:2px 16px;background-color:var(--header-color);color:var(--font-color)}