html, body {
    display: flex; 
    flex-direction: column;
    justify-content: flex-start;    /* aligns items to the top */
    align-items: center;        /* centers horizontally */
    align-content: center;      /* centers content if it wraps */
    margin: 0rem;
    gap: 1.4rem;
    padding: 0rem;
    background-image: url("images/CatPaws2707flat.jpg");
    text-decoration: none;
    font-family: "Times New Roman";
    font-size: 1.0rem;
    font-weight: bold;
    font-style: italic;
    color: #0000FF;
    width: 80%;
}

a {
  white-space: normal;
}

text {
  display: flex;
  width: 80%;
  margin: 1.4rem;
}

nav {
  width: 80%;
}

nav a {
    display: block;
    margin-bottom: 1rem;
}

.centre
{
    text-align: center;
}

.leftalign
{
    text-align: left;
}

.doubleheight
{
    margin: 2rem;
}

.blacktext
{
    color: black !important;
}

.galleryoneacross {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 1 equal column */
  gap: 0.5rem; /* space between images */
  max-width: 80%;
  margin-bottom: 1.4rem;
}

.gallerytwoacross {
  display: grid;
    max-width: 80%;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
  gap: 0.5rem; /* space between images */
  margin-bottom: 1.4rem;
}

.gallerytwodown {
  display: grid;
  max-width: 80%;
  grid-template-columns: repeat(1, 2fr); 
  gap: 0.5rem; /* space between images */
  margin-bottom: 1.4rem;
  align-items: end;
}

.gallerytwoacrosssubtitle {
  display: grid;
    max-width: 80%;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
  gap: 0.5rem; /* space between images */
  margin-top: -1.4rem;
  margin-bottom: 1.4rem;
}

.gallerythreeacross {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 0.5rem; /* space between images */
  max-width: 80%;
  margin-bottom: 1.4rem;
}

.galleryfouracross {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 0.5rem; /* space between images */
  max-width: 80%;
  margin-bottom: 1.4rem;
}


/* each grid cell becomes a flex box so we can push the img up/down */
.galleryoneacross > .midsizeimage{
  display:flex;
}
.galleryoneacross > .midsizeimage{
  align-items:center;
  justify-content: center;
}

.gallerytwoacross > .midsizeimage{
  display:flex;
}

/* first row (items 1 and 2): push image to the bottom */
.gallerytwoacross > .midsizeimage:nth-child(1){
  align-items:flex-end;
  justify-content: flex-end;
}

/* second row (items 3 and 4): push image to the top */
.gallerytwoacross > .midsizeimage:nth-child(2){
  align-items:flex-end;
  justify-content: flex-start;
}

/* first row (items 1 and 2): push image to the bottom */
.gallerytwoacross > .midsizeimage:nth-child(3){
  align-items:flex-start;
  justify-content: flex-end;
}

/* second row (items 3 and 4): push image to the top */
.gallerytwoacross > .midsizeimage:nth-child(4){
  align-items:flex-start;
  justify-content: flex-start;
}

/* each grid cell becomes a flex box so we can push the img up/down */
.gallerythreeacross > .midsizeimage{
  display:flex;
}

.gallerythreeacross > .midsizeimage:nth-child(1) {
  align-items:flex-end;
  justify-content: flex-end;
}

.gallerythreeacross > .midsizeimage:nth-child(2){
  align-items:flex-end;
  justify-content: center;
}

.gallerythreeacross > .midsizeimage:nth-child(3) {
  align-items:flex-end;
  justify-content: flex-start;
}


.midsizeimage img {
    min-width: 425px;        /* fixed width (adjust as needed) */
    width: auto;        /* fixed width (adjust as needed) */
    max-width: 425px;        /* fixed width (adjust as needed) */
    height: auto;       /* fixed height (adjust as needed) */
    max-height: 925px;
    object-fit: cover;   /* crops and scales images to fit */
    display: block;
}

.gallerytitle {
    grid-column: 1 /-1;
}

.twentyfourpoint {
    font-size: 2.4rem;
}

.twentypoint {
    font-size: 2rem;
    margin-bottom: 1.6rem;
}

.eighteenpoint {
    font-weight: bold;
    font-size: 1.8rem;
}

.sixteenpoint {
    font-size: 1.6rem;
}

.fourteenpoint {
    font-size: 1.4rem;
}

.twelvepoint {
    font-size: 1.2rem;
}

/* mobile concerns */

@media (max-width: 900px) {

  nav > a > img {
    max-width: 100%;
    height: auto;
  }

  .galleryoneacross, .gallerytwoacross, .gallerythreeacross, .galleryfouracross {
    width: 100%;
    max-width: 100% !important;
  }
  .gallerythreeacross {
    grid-template-columns: repeat(2, 1fr);
  }
  .galleryfouracross {
    grid-template-columns: 2fr;
  }
}

@media (max-width: 600px) {
  .galleryoneacross, .gallerytwoacross, .gallerythreeacross, .galleryfouracross {
    width: auto;
    max-width: auto !important;
  }
  .gallerytwoacross {
    grid-template-columns: 1fr;
  }
    .gallerythreeacross {
    grid-template-columns: 1fr;
  }
  .galleryfouracross {
    grid-template-columns: 1fr;
  }
  .galleryoneacross > .midsizeimage{
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    align-content: center !important;
  }
  .gallerytwoacross > .midsizeimage{
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    align-content: center !important;
  }
  .gallerythreeacross > .midsizeimage{
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    align-content: center !important;
  }
  .galleryfouracross > .midsizeimage{
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    align-content: center !important;
  }
  img {
    max-height: 560px !important;
  }
}


/* footer concerns */

.copyright {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    font-variant: normal;
    text-transform: none;
}

.black {
    color: black;
}

.bold {
    font-weight: bold;
}

.paragraph {
    font-size: 1.4rem;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    color: black;
    margin-bottom: 0rem;
}

.bevel-frame {
  display: inline-block;
  padding: 12px;              /* thickness of the bevel */
  background: #cfd8e6;        /* frame color */
  border-radius: 2px;

  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.8),   /* highlight top/left */
    inset -2px -2px 4px rgba(0, 0, 0, 0.35),      /* shadow bottom/right */
    3px 3px 8px rgba(0, 0, 0, 0.4);               /* drop shadow */
}

.bevel-frame img {
  display: block;
  border: 2px solid #444;     /* dark border like your example */
}