h4 {
  color: orange;

    padding: .3em;
      
}

h3 {
  color: navajowhite;

    padding: .33em;
      
}

p {
  text-align: center;
}

a:link {
  color: lightyellow;
}

a:visited {
  color: lightsteelblue;
}

body {
    font-family: monospace;
        max-width: 98%;
    margin: auto;
    font-size: 1.337em;
    background-image: url(bggrass.jpg);
    background-color: dimgray;
    color: antiquewhite;
    line-height: 107%;

}

ol {


    line-height: 147%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

 /* -------------------------------------------------
   Gallery container – use Flexbox to wrap rows
   ------------------------------------------------- */
.gallery {
    display: flex;
    flex-wrap: wrap;               /* allow rows to wrap */
    gap: 0.5rem;                   /* space between thumbnails – adjust as needed */
    justify-content: space-between;/* spread items across the row */
}

/* -------------------------------------------------
   Individual thumbnail wrapper
   ------------------------------------------------- */
.thumb {
    /* Each thumb will take roughly 24% of the row,
       leaving room for the gap and the space‑between
       alignment. Adjust the percentage if you need
       a tighter or looser layout. */
    flex: 0 1 calc(33% - 0.5rem);   /* 4 per row (100% / 4) minus the gap */

    /* Keep the square aspect ratio */
    aspect-ratio: 1 / 1;

    overflow: hidden;              /* hide any overflow from the image */
    display: flex;                 /* centre the image inside */
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5%;           /* optional extra bottom spacing */
}

/* -------------------------------------------------
   Image inside each thumbnail
   ------------------------------------------------- */
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* keep whole image visible, preserve aspect ratio */
    display: block;                /* removes inline‑element whitespace */
}

.thumb a img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* keep whole image visible, preserve aspect ratio */
    display: block;                /* removes inline‑element whitespace */
}

.thumb a {
    display: flex;               /* turn the anchor into a flex container */
    width: 100%;
    height: 100%;
    align-items: center;         /* vertical centering */
    justify-content: center;     /* horizontal centering */
    overflow: hidden;            /* just in case */
}

.galleri {
    display: flex;
    flex-wrap: wrap;               /* allow rows to wrap */
    gap: 0.5rem;                   /* space between thumbnails – adjust as needed */
    justify-content: center;/* spread items across the row */
}



        form {
  max-width: 700px;
  margin: 150px auto;
}

fieldset {
  padding: 30px;
}

input,
textarea,
button {
  width: 100%;
}