/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: rgb(240,244,230);
  color: rgb(10,20,10);
  font-family: Verdana;
  width:60%
}

@media screen and (max-width: 768px) {
  body {
    width: 100%; /* Set the width to full for small screens */
  }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}   


h1 {
  color: darkgreen;
}
h2 {
  color: darkgreen; 
}

ul {
    list-style-position: inside;
}


a:link {
  color: green;
}
a:visited {
  color: purple;
}
a:hover {
  font-weight: bold;
}



sup {
  font-size: 0.75em; /* Makes it smaller so it doesn’t push lines apart */
  line-height: 0; /* Prevents extra space */
  position: relative;
  top: -0.3em; /* Adjusts placement to avoid excessive height changes */
}





/* para la galería: */

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}


.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.poema {
  text-align: left;
  margin: 0 auto;
  width: 50%;
}

.galeria {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 4px 0;
  scrollbar-width: thin; /* Firefox */
}

.galeria img {
  width: 180px;
  height: auto;
  flex-shrink: 0;
  border-radius: 1px;
  transition: transform 0.15s;
}

.galeria img:hover {
  transform: scale(1.03);
}