/* Start by styling the outermost element defining a modal. This element
 * should cover the entire screen with a dark but transparent background
 * color. It needs a z-index value to make sure it is placed over
 * everything else. */
.modal {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(33, 37, 41, 0.5);

  /* STEP 0: Initially, occupy only the bottom half of the screen. You'll
   * change this later to cover the whole thing. */
  top: 0;

  /* STEP 1: Add an opacity value of 0 to make the modal initially
   * invisible (completely transparent). */
  opacity: 0;
  z-index: 0;
}

/* Helper class for the modal. When the modal is activated, it "fades in"
 * over the course of .15 seconds, going from fully transparent (can't
 * be seen) to fully opaque (blocks out the background). This is optional,
 * but it makes for a nicer looking transition. */
.fade {
  transition: opacity 0.15s linear;
}

/* STEP 1a: Define a combined selector that applies to any element that has
 * the 'fade' class but doesn't have the 'show' class. HINT: There is a
 * :not pseudoclass where :not(...) means the rule applies when ... is not
 * true. */
.fade:not(.show) {
  pointer-events: none;
}

.show {
  opacity: 1;
}

/* STEP 2: Define a descendant selector to grab any element with the
 * 'modal-dialog' class that is a descendant of a shown modal (has both
 * the 'modal' and 'show' classes). */
TODO {
  /* The transform property is used to define a change to an element. */
  transition: transform 0.3s ease-out;
  transform: translate(0, 10vh);
}

/* STEP 2a: Make the modal dialog a centered flexbox to add spacing to
 * center the modal content horizontally. */
.modal-dialog {
}

/* STEP 2a: As above, use a descendant selector to grab the 'modal-dialog'
 * that is a descendant of 'modal', but only if the 'modal' element doesn't
 * have the 'show' class. */
TODO {
  transition: transform 0.3s ease-out;
  transform: translate(0, -10vh);
}

/* Create the box around the modal content */
.modal-content {
  background: white;
  min-height: 10vh;
  min-width: 30vw;
  border: 1px solid black;
  border-radius: 0.3rem;
}

/* Basic styling - not part of the tutorial */
body {
  background: lightgray;
  font-family: "Trebuchet MS", sans-serif;
}

ul {
  list-style: none;
}

li {
  width: 15vw;
  background: white;
  border: 1px black solid;
  padding: 0.5vh 1vw;
}