/* General styles */

@font-face {
  font-family: "AppleGaramond";
  src: url("AppleGaramond.ttf") format("truetype");
}

body,
html {
  background-color: blue !important;
  margin: 0;
  padding: 0;
  font-family: "AppleGaramond", serif;
  font-size: clamp(0.5rem, 1.5vw, 1.25rem);
}

.moidivide {
  display: flex;
  flex-direction: column; /* Stack the image container above the text */
  height: 100vh;
}

/* Image/snippet column - Fixed at the top */
#moiimgs {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 50vh; /* Adjust as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  overflow: hidden;
  padding: 20px;
}

#moiimgs img {
  max-height: 100%;
  max-width: auto;
  display: none;
}

#moiimgs.show img {
  display: block;
}

/* Left text column */
#moitexte {
  padding: 20px;
  margin-top: 55vh; /* Create space for the fixed image container */
  color: yellow;
  overflow-y: auto;
  font-weight: 400;
}

/* Hoverable text styling */
.hover-text {
  color: yellow;
  cursor: pointer;
  text-decoration: underline !important;
}