/* 
  --spacex-blue: #005288;
  --spacex-silver: #a7a9ac;
  --spacex-black: #0b0b0b;
  --spacex-white: white;
  --spacex-silver-light: #fbfbfb;
  --spacex-border-color: #666;

  --max-width: 80rem;
  --line-height: 1.4rem;

  --banner-background: transparent;
  */

.list-view {
  background-color: var(--spacex-white);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3em 1em;
  min-width: 18em;
  box-sizing: border-box;
}

.list-title {
  color: var(--spacex-blue);
  max-width: var(--max-width);
}

.launches-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max-width);
  justify-content: space-between;
}

.launches-list-item {
  width: 24%;
  margin-bottom: 1em;
  min-width: 18em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.launch-link {
  text-decoration: none;
  color: var(--spacex-black);
  border: 1px dashed var(--spacex-silver);
  padding: 1em 1em 1.5em 1em;
  height: 100%;
  box-sizing: border-box;
}

.launch-link:hover {
  background-color: var(--spacex-silver-light);
}

.launches-list-item-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.launches-list-item-details-list-item {
  margin-bottom: 0.5em;
}

.details-list-title {
  font-weight: bold;
  color: var(--spacex-blue);
}

.icon {
  align-self: center;
  width: 3em;
  position: relative;
  top: -1.5em;
}

.selected a {
  background-color: var(--spacex-silver);
  cursor: default;
}

.selected a:hover {
  background-color: var(--spacex-silver);
}