body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: Arial, sans-serif;
  color: #eee;
  text-align: center;
}

.title {
  font-size: 48px;
  margin-top: 40px;
  font-weight: 600;
}

.search-box {
  margin-top: 30px;
}

#searchInput {
  width: min(720px, 90vw);
  padding: 12px 18px;
  font-size: 20px;
  border-radius: 12px;
  border: 2px solid #666;
  background: #0b0b0b;
  color: #eee;
  outline: none;
}

#searchInput:focus {
  border-color: #fff;
}

/* iframe */
.view {
  width: min(1100px, 92vw);
  height: 0;
  opacity: 0;
  border: none;
  border-radius: 14px;
  background: #111;
  margin: 22px auto 0;
  display: block;
  transition:
    height 0.45s ease,
    opacity 0.35s ease;
}

/* when user searches */
.view.is-open {
  height: min(70vh, 720px);
}

/* when iframe finishes loading */
.view.is-loaded {
  opacity: 1;
}