/*
  		light gold: #e7d07d
  		dark blue: #1e2c67
  	*/
    body {
      font-family: Montserrat, Arial, sans-serif;
			margin: 0 auto;         /* top/bottom = 0, left/right = auto */
      background: #1e2c67;
			box-sizing: border-box;
			max-width: 100vw;
			overflow-x: hidden;
			text-align: center;
			box-sizing: border-box;
			color: #e7d07d;
    }
    header {
    	background-image: url("/images/banner-dark.jpg");
    	background-position: bottom;
    	background-size: cover;
			height: 800px;
			position: relative;
    }
    
    h2 {
    	color: #1e2c67;
    	margin-bottom: 7px;
    }

		.libraryEntry {
			display: inline-block;
			width: 30%;
			min-width: 265px;
		}
		
		.centering-container {
			display: flex;
			justify-content: center; /* Centers horizontally */
			align-items: center;     /* Centers vertically */
			/* height: 300px;      */     /* Define a height for the container */
			/* border: 2px solid #ccc; */
		}

		.centered-box {
		/*
			width: 100px;
			height: 100px;
			*/
			/* background-color: #000000b0; #e7dfc111; */
		}
		

    #headerContent {
			font-size: calc(8px + 3.0vw);
    	font-weight: normal;
			height: 100px;
			color: #e7d07d;
			text-align: left;
			width: auto;
    }
    #headerContent p {
    	font-size: 18pt;
    	margin-left: 50px;
    }
    #sample-gif {
    /*
			position: absolute;
			top: 280px;
			right: 400px;
			width: 300px;
			*/
			height: 300px;
			border-radius: 12px;
			margin: 20px;
    }
    main {
      background-color: #e7dfc1;
    }
    .content {
			max-width: 96vw;
			width: 1200px;           /* or any desired width */
      /* padding: 50px; */
      margin: auto;
    }
    h1 {
    	display: inline;
    }

    #nameDisplay {
      font-size: 1.2em;
      margin-bottom: 10px;
    }

    #nameForm {
      display: none;
      margin-bottom: 10px;
    }
    #changeNameBtn {
    	visibility: hidden;
    }
    #doggy {
    	padding-left:50px;padding-right:50px;border-radius: 12px; height: 600px; background-color: #1e2c6768;
    }
    #kitty {
    	direction: rtl;
    	display: flex;
    	align-items: center;
    }

    input[type="text"] {
      padding: 5px;
      font-size: 1em;
    }

    button {
      padding: 5px 10px;
      font-size: 1em;
      cursor: pointer;
    }

		.grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
			gap: 15px;
			width: 100%;
			box-sizing: border-box;
		}
		
		#thumbnailList {
			/* padding-top: 50px; */
			padding-bottom: 50px;
		}

		.thumbnail {
			background: white;
			border: 1px solid #ccc;
			padding: 5px;
			text-align: center;
			box-sizing: border-box;
			overflow: hidden;
		}
    .thumbnail:hover {
      transform: scale(1.05);
    }
    
    .thumbnailRow {
 	    display: flex;
	    justify-content: space-around;
    }

    .thumbnail img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    header img {
    	margin-right: 25px;
    }
    #namingNote {
    	font-size: 10pt;
    	background-color: white;
    	padding: 3px;
    }
    footer {
    	height: 100px;
    	background-color: #1e2c67;
    	color: #e7d07d;
    }





	.image-gallery {
		/* Create 4 columns
		column-count: 4; */
		/* Add a small gap between columns
		column-gap: 10px;  */
		/* Prevents extra space from line height affecting layout
		line-height: 0;  */
	}

	.image-gallery img {
		/* Make images fit the width of their columns
		width: 100%;  */
		/* Maintain the image's natural aspect ratio */
		height: auto; 
		/* Ensure images don't get split across columns */
		break-inside: avoid; 
		/* Add a small margin between images within the columns */
		margin-bottom: 10px;
		max-height: 200px;
	}

/* Optional: Make it responsive */
@media (max-width: 1000px) {
  .image-gallery {
    /* column-count: 3; */
  }
}

@media (max-width: 700px) {
  .image-gallery {
   /* column-count: 2; */
  }
  #headerContent {
  	padding-left: 0;
  	padding-right: 0;
  	padding-top: 20px;
  }
  main .content {
  	padding: 0;
  }
	#kitty {
		direction: rtl;
		display: block;
	}
}
@media (max-width: 500px) {
	#doggy {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (max-width: 400px) {
	#topNavMobile {
		display: block;
		background-color: #1e2c67;
	}
	#topNavDT {
		display: none;
	}
  .image-gallery {
/*    column-count: 1; */
  }
}