body {

}
.modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.modal[open] {
  display: flex;
}
.model-inner {
  background-color: white;
  border-radius: 0.5em;
  width: 40%;


}
@media only screen and (max-width:600px) {
    .model-inner {
        width: 90%;
        margin-right: 5%;
    }
}

@media only screen and (max-width:450px) {
    .model-inner {
        width: 90%;
        margin-right: 5%;
    }
}

@media only screen and (max-width:360px) {
    .model-inner {
        width: 90%;
        margin-right: 5%;
    }
}

@media only screen and (max-width:320px) {
    .model-inner {
        width: 90%;
        margin-right:5%;
    }
}



.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid black;
}
#modal-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: black;
  opacity: 0.5;  
}