.modal {
 display: none; 
 position: fixed; 
 z-index: 2; 
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%; 
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4); 
}
.modal-content {
 background-color: #fff;
 color: #333; 
 margin: 15% auto; 
 padding: 20px;
 border: 1px solid #888;
 width: 80%; 
 border-radius: 5px; 
}
.modal-content h2 {
 color: #4A4A4A;
 font-size: 24px; 
 margin-bottom: 20px; 
 border-bottom: 1px solid #EAEAEA; 
 padding-bottom: 10px; 
}
.modal-content p {
 color: #4A4A4A;
 font-size: 16px; 
 line-height: 1.6; 
 margin-bottom: 20px; 
}
.close-button {
 position: absolute; 
 top: 10px; 
 right: 15px; 
 font-size: 30px; 
 color: #AAAAAA; 
}
.close-button:hover {
 color: #000; 
 cursor: pointer; 
}
.close-button:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}