div.modal {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  z-index: 10;

  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  & > div.backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: black;
  }

  & > div.content {
    z-index: 20;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    padding: 15px;

    max-height: 700px;
    max-width: 900px;

    display: flex;
    flex-direction: column;

    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    background-color: var(--light-strong);

    & > div.header {
      flex-grow: 0;

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

      margin-bottom: 15px;

      & > h2 {
        margin: 10px 0 10px 0;
      }

      & > button {
        display: inline-block;

        height: 30px;
        width: 30px;
        cursor: pointer;
        background-color: var(--light-strong);
        border: 1px solid var(--dark-strong);
        border-radius: 5px;
        color: var(--dark-strong);

        &:hover {
          border-width: 2px;
          font-weight: bold;
        }
      }
    }

    & > div.body {
      flex-grow: 1;
      overflow-y: scroll;
    }
  }
}
