/*------------------------- Outer container ---------------------*/
body {
    font-family: JuliusSansOne-Regular; /*Arial, sans-serif;*/
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'texgyretermes';
    src: url('texgyretermes-regular.otf') format('texgyretermes')/*,
        url('CHG/fonts/texgyretermes-regular.otf') format('texgyretermes')*/;
    font-weight: normal;
    font-style: normal;
    font-size: 14px; /*// Optional styling*/
    }

Css:root {
  --images-per-row: 3; /* Default value */
}


.paintingsContainer{
    display:grid ;
	grid-template-columns: repeat(var(--images-per-row), 1fr);
  	gap: 10px;
    flex-direction:row;
    padding: 20px;
    /*height: 800px;*;
    max-height: 800px; /* 80% of the viewport height */
    overflow-y: auto;  /* Enable vertical scrolling */
}

header, footer {
  background-color: #f4f4f4; 
  text-align: center;
}

div p {
	text-align: center;    
	top: 15px; 				/* Centers text horizontally */
	line-height: 17px;
}

.container {
  display: flex; /* Enables Flexbox */
  justify-content: space-between; /* Even spacing between elements */
  /*align-items: center; /* Align items vertically */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 10px; /* Adds spacing between items */
  padding: 10px;
  background-color: #f0f0f0;
}

.artCont {
	display: flex; 
	flex-direction: column;
	 align-items: center;     /* Center children horizontally */
  justify-content: flex-start;
	margin: 20px;
	font-family: 'texgyretermes';
	font-size: '14px'; 
}

.artistCont {
	display: flex; 
	flex-direction: column;
	 align-items: center;     /* Center children horizontally */
  justify-content: flex-start;
	margin: 20px;
	font-family: 'texgyretermes';
	font-size: '14px'; 
  cursor: pointer;
}

/*artCont replaces containerColumn*/
.containerColumn {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;   /* Center horizontally */
  gap: 5px;             /* Add spacing between items */
  /*padding: 100px;*/         /* Add padding around the container */
  max-width: 300px;      /* Optional: Limit the width of the column */
  margin: 0 auto;        /* Center the container on the page */
}

/*.artCont {
  display: 'inline-block';    
}*/

.centerBtns{
  flex: 1 1 auto; /* Flexible width with minimum size */
  align-items: center;
  padding: 2px;
  margin-right: 5px;
  /*background-color: #007bff;*/
  color: white;
  border-radius: 5px;

}

/*------------------------ Addins -----------------------*/


.caption {
 display:block;
 align-content: center;
 margin-top: 3px; /* Adds spacing between the image and block*/
 font-size: 14px;
 color:'#4D4B58';
}

.artistCaption {
 display:block;
 align-content: center;
 margin-top: 3px; /* Adds spacing between the image and block*/
 font-size: 14px;
 color:'#4D4B58';
}
.space {
	height: 10px;
}

.mouseov {
	/*color: #007bff;
	background-color:  #837F98;*/
	background-color: '#B2A1D6';
}

.mouseot {
	/*color: #367E73;
	background-color: #E7F7F5;*/
	background-color: '';
	
}

.divButtons {
	display: inline-block;
	justify-content: center;
}

    /*button.style.fontFamily = "'texgyretermes', cursive"; // Apply the font
    button.style.fontSize = '14px'; // Optional styling(/)
    /* Button styling */

    button {
      padding: 5px 8px; /* Button padding */
      font-size: 14px; /* Font size scales with viewport */
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f4f4f4;
      color: #3B3545;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-family: 'texgyretermes-regular';
	 border-width: 1px;
    }

    /* Button hover effect */
    button:hover {
      background-color:  #38324D; 
      color: rgba(243,246,245,1.00);
      border:none;
    }

/*-------------------------- Addins End ----------------------------*/

/* Individual item styling */
.item {
  flex: 1 1 auto; /* Flexible width with minimum size */
  text-align: center;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

.imageContainer {
    padding: '20px'; 
    font-family: 'texgyretermes';
    font-size: '14px';
}

.gallery {
  text-align: center;
  margin-top: 50px;
}

.responsive-image {
  max-width: 100%;
  min-width: 360px;
  max-height: 100%;
  object-fit: fill; /* Ensures proportional resizing */
}

img {
    border-radius: 5px;
    width:'300px';
    height: auto;
  }

  p {
      margin-left: 100px;
  }

    .backButton{
    margin: 50px;
    padding: 20px 
  }

  .backElement{
    padding:10px;
  }

  .backDiv{
    width:100VW;
    margin: 20px;
    padding: 20px 
  }
  
 .footerDiv{
	display: flex;
	flex-direction:column-reverse;
	justify-content: flex-start;
	align-items: flex-end;
}

.footerImg {
	max-width: 100%; /* Ensures the image scales down to fit the container */
  	height: auto;    /* Maintains the aspect ratio */
}
/* ------------------ Overlay -----------------------*/

 .overlay {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
	 	color: rgba(83,79,94,1.00);
        align-items: center;
        z-index: 1000;
      }

      .overlay img {
        max-width: 93%;
        max-height: 93%;
        object-fit: contain;
        /*border: 2px solid white;
        border-radius: 10px;*/
      }

      .overlay-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: rgb(247, 6, 6);
        font-size: 100px;
        cursor: pointer;
      }

      .overlay.active {
        display: flex;    
        font-family: 'texgyretermes';
      }
      
/*-----------------------------------------*/


    /* Responsive adjustments */
    @media (max-width : 1755px ){
      .item {
        flex: 1 1 100%; /* Stack items on smaller screens */
      }
    }

    .lowerImage1{
      width:25vw;
      height:auto;
      margin-top: 2vh;
      margin-left:2vw

    }

    .lowerImage{
      width:25vw;
      height:auto;
      margin: 2vh;
      margin: 2vw
    }
}

@media (max-width: 950px) {
	header, footer {
		background-color: #f4f4f4; 
		/*text-align: center;*/
	}
	
	.footTxt{
	font-family:texgyretermes; 
	height: 70px;
	font-size: 20px; 
	color: #FFFFFF;  
	background-color: #000000; 
	display: flex; 
	align-content: center; 
	justify-content: center;
	padding:10px;
	width: 100%;
}

@media (max-width: 768px) {
	header {
	  background-color: #f4f4f4; 
	}	
}
  /*text-align: center;*/
}
@media (max-width: 414px) {
	header{	  
		background-color: #f4f4f4; 
		margin-botton: 400px;
	}
	.containerColumn {
		top: 700px;
		display: flex;
		flex-direction: column; /* Stack children vertically */
		align-items: center;   /* Center horizontally */
		gap: 5px;             /* Add spacing between items */
		max-width: 350px;      /* Optional: Limit the width of the column */
		margin: 0 auto;        /* Center the container on the page */
	}
}

@media (max-width: 375px) {
	background-color: #f4f4f4; 
}