body {
  margin: 0;
  font-family: Georgia, serif;
}

.container {
  display: flex;       /* rinnakkain */
  min-height: 100vh;
}

.hakemisto {
  width: 25%;          /* kapeampi vasen */
  background: #2f3b4d;
  color: #fff;
  padding: 20px;
}

.tarina {
  width: 75%;          /* leveämpi oikea */
  background: #0b1a33;
  color: #e0e0e0;
  padding: 20px;
}

.tarina iframe {
  width: 100%;
  height: calc(100vh - 100px);
  border: none;
  background: #0b1a33;
}

/* mobiilissa päällekkäin */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .hakemisto, .tarina {
    width: 100%;
  }
}