.modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
     background-color: #000000;
     text-align: left;
     margin: 15% auto;
     /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
     /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close,
.close2 {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
}
.settings{
     display: flex;
     justify-content: space-evenly;
}
.settings button{
     background: none;
     color:  white;
     font-size: x-large;
}
.settings button:hover{
     border-bottom: 1px solid white;
}