body {
    background-image: url("./img/leafs floral design.jpg");
    background-size: contain;
    background-attachment: fixed;
    max-width: 1200px;
    margin: 0 auto;
}

header,main {
    background-color: white;
    padding: 1px;
    padding-left: 5px;
    margin: 5px;
    border-radius: 10px;
}

header h1{
    display: inline; 
    color: purple;
}

.fireText {
    background-image: url(./img/fire-fire-emote.webp);
    background-size: contain;
    background-position: center;
}

.colorPurple {
    color: white;
    background-color: purple;
    padding: 2px;
}

.secretLink {
    color: black;
    text-decoration: none;
    cursor: text;
}

.theImages {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.theImages img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  rotate: 90deg;
}

/* for the hover text option*/
.hoverMedia {
  position: relative;
  display: inline-block;
  border-bottom: 0.8mm dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

.hoverContent {
    display: none;
}

/* Show the tooltip text on hover */
.hoverMedia:hover .hoverContent {
    display: inline;
}