body {
  font: 1.2em/1.5 "Fira Sans", sans-serif;
  }

  /* side panels */
  .container {
    display: flex;
  }

  .header {
    font-variant: small-caps;
    padding: 0%;
    margin: 0;
  }
  .subhead {
    padding: 0;
    margin: 0;
  }
  .mainpanel {
    width: 800px;
    /* background-color: rgb(228, 210, 255); */
    padding: .5%;
    white-space: pre-line;
  }

  .sidepanel {
    flex: 1;
    padding: .5%;
    padding-left: 2%;
    /* background-color:rgb(218, 110, 80); */
    white-space: pre-line;
  }

/* Core functionality */
.wrapper {
  max-width: 100%;
  overflow: hidden;
  background-color: yellow;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 25s linear infinite;
}

.marquee p {
  display: inline-block;
}

.scrollText {
  font-variant: small-caps;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.imagecontainer {
  display: grid;
  text-align: center;
}

.diary {
  padding-top: 5px;
  padding-inline: 5px;
  margin: auto;
  width: 70%;
  max-width: 400px;
  max-height: 400px;
  aspect-ratio: 1 / 1;
  object-fit: cover;

}
.socialmedium {
  padding-top: 5px;
  padding-inline: 5px;
  margin: auto;
  width: 70%;
  max-width: 600px;
  max-height: 600px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}