.body {
  font-family: sans-serif;
  font-size: 1rem;
}

.container {
  margin: 100px auto 0;

  max-width: 1200px;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: column;
}

.btn-modal-open {
  width: 400px;
  height: 150px;

  border-radius: 15px;

  background-color: #46d636;
  color: #dedede;

  font-size: 20px;

  transition: all 0.6s;
}

.btn-modal-open:hover {
  background-color: #adeea6;
  color: #0c0c0c;
}

.modal {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: rgba(66, 66, 66, 0.9);

  visibility: hidden;
}

.modal__window {
  position: absolute;

  top: 25%;

  width: 50vw;
  min-height: 40vh;

  background-color: #ffffff;
  border-radius: 15px;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modal__text {
  padding-top: 12vh;
  width: 36vw;
  text-align: center;
  line-height: 150%;
}

.modal__close-window {
  position: absolute;

  top: 0;
  right: 0;

  min-width: 50px;
  min-height: 50px;

  background-color: #ffffff;
  border-radius: 2px;
}

/* ==================== */

.modal--open {
  visibility: visible;
}

.body--fixed{
    overflow-y: hidden;
}

.modal--close {
  opacity: 1;
  visibility: hidden;
  overflow-y: visible;
}