/* 
Main modal Code. The important properties have been marked
*/

*:focus{
  outline:4px solid black;
  border:4px solid white;
}  

.modal-close:focus{
 outline:4px solid #FF3D3D;
}

/*Styles the modal close button*/
.modal-close{
  position:absolute;
  top:-24px;
  right:-24px;
  border-radius:25px;
  height:48px;
  width:48px;
  border:solid 2px black;
  font-size:2rem;
}

/*Styles the modal*/
.modal-main{
    position: relative;
    border: 2px solid grey;
    padding:0px;
    color:black;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:black;
    z-index: 14;
    max-width:95vw;
}

.modal-main > h2{
margin:6px;
font-size:10pt;
color:#aaa;
}

.modal-main > a{
margin:0px;
font-size:10pt;
color:#FF3D3D;
padding:6px;
}

/*Styles the background element that contains the modal*/
.modal-background{
display:flex;
align-items:center;
justify-content:center;
position: fixed; /*important*/
z-index: 14; /*important*/
color:white;
background-color: rgba(0, 0, 0, 1);
width: 100vw; /*important*/
height:100vh; /*important*/
left: 0px; /*important*/
top: 0px; /*important*/
}