mue/src/scss/modules/_modal.scss

.Modal {
  color: map-get($modal, "text");
  background-color: map-get($modal, "background");
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border: none;
  opacity: 1;
  z-index: -2;
  padding: 25px;
  cursor: hand;
  transition: 0.6s;
  transition-timing-function: ease-in;
  border-radius: map-get($modal, "border-radius");
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: #34495e  #bdc3c7;

  &:focus {
    outline: 0;
  }
}


.modalLink {
  color: #5352ed;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.closeModal {
  float: right;
  font-size: 2em;
  cursor: pointer;

  &:hover {
    color: grey;
  }
}

.dark {
  background-color: #2f3542 !important;
  color: white !important;
}

.ReactModal__Html--open,
.ReactModal__Body--open {
  overflow: hidden;
}

@-webkit-keyframes zoom-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.05, 1.05);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes zoom-in {
  0% {
    -webkit-transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1.05, 1.05);
  }

  100% {
    -webkit-transform: scale(1, 1);
  }
}

.Overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 90vh;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 20px;
}

.modal-animation {
  -webkit-animation: zoom-in 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: zoom-in 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.ReactModal__Content {
  min-height: calc(100vh - 30vh);
  max-height: calc(100vh - 10vh);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  position: relative;
}

@media only screen and (max-height: 700px) {
  .ReactModal__Content {
    min-height: 500px;
    max-height: calc(100vh - 30vh);
  }
}

@media only screen and (min-height: 700px){
  .ReactModal__Content {
    min-height: 600px;
  }
}

.content {
  margin-top: -20px;
  width: 900px;

  h1 {
    font-size: 35px;
  }

  p {
    font-size: 16px;
  }

  .columns {
    font-size: 15px;

    li {
      padding-left: 10px;
    }
  }
}

.zoom-out {
  -webkit-animation: zoom-out 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: zoom-out 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes zoom-out {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.05, 1.05);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes zoom-out {
  0% {
    -webkit-transform: scale(1, 1);
  }

  50% {
    -webkit-transform: scale(1.05, 1.05);
  }

  100% {
    -webkit-transform: scale(0);
  }
}

.updateContent {
  width: 400px;
  padding: 5px;
  .closeModal {
    margin-top: 10px;
    font-size: 45px;
  }
  img {
    width: 100%;
    height: auto;
  }
}

::-webkit-scrollbar {
  width: 5px;
  background: #bdc3c7;
  height: auto;
}

::-webkit-scrollbar-thumb {
  background: #34495e;
}