/*

Photoshoot 1.0.0
Copyright (C) 2010 JF Nutbroek <jfnutbroek@gmail.com>

*/


/* LOGO HEADER */

body {
//   display: grid;
/*  justify-content			: top ; */
    align-items				: top ;  
    min-height: 100vh		; /* Full viewport height */
    background-color		: lightgray	;  /* other otion  | #FAFAFA;  */\
    background-image		: url("http://portfolio.kanaslens.com/picts/background2.jpg");  
/*    margin          		: 5px;  */
    grid-template-columns	: 25% 75%;
    gap						: 10px;
  	text alignment			:center ;    
}


.header    {
    width: 100%;
    background-color  : #FFFFFF;
    background-image  : url("http://portfolio.kanaslens.com/picts/background_header.jpg");
    border-bottom     : #D3D3D3 1px solid;
    }

.header-image  { margin: 0px 10px 0px 0px; }



html { 
    height            : 100%; 
}

//.contenttable {
//    margin: 0;
//    width: 90%; /* Default width for desktop */
//    min-width: 600px; /* Prevents excessive shrinking */
//    max-width table: 600px;
//    layout: fixed; /* Prevents resizing issues */
//    background: white;
/*    text-align: center;  */
//    position: fixed;
//   display: grid:    /* Enables flexible resizing */
/*   flex-wrap: wrap; /* Ensures images adjust neatly on mobile  ; */
/*    justify-content    : center; /* Keeps images aligned  */
/*	align-content      : top ;  ;' */
//    font-family        : Verdana, Helvetica, Arial, sans-serif;
//    font-size          : 12px;
//    color              : #555555;  
/*  border-collapse    : collapse;  */
//    background-color   : white;     /* other options | #FAFAFA   */
//    border-radius      : 8px; /* Removes rounded corners */ 
//	border			   : 2px solid blue; 
//   grid-template-rows : 130px; /* Ensures uniform row height */
//
//}
///*
.image-container {
    display: grid;  /*  other option| inline-block;  */
/*    justify-content: center;
    align-items: center;
    width: 100%; /* Ensures it fills parent */
/*    height: 100%;
    border: 1px solid black ;
    padding: 10px;
    border-radius: 10px; /* Smooth rounded edges */
/*    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* Soft shadow for depth */
/*    background-color: lightgreen; /* 2nd Table around the img */
/*     
}  */

// .image-wrapper {
//    box-sizing			: border-box;
//    padding				: 0;
//    margin				: 0;
//    display				: flex ; /* Enables flexbox */
//    justify-content		: center; /* Centers image horizontally */
//    align-items			: center; /* Centers image vertically */
//    width				: 150px	; /* Set container size */
//    height				: 150px	; 
//  	max-width			: 150px ;
//    min-width			: 150px ;
//    background-color	: beige; /* Light grey background */
//    border-radius		: 8px; /* Smooth corners */
//    overflow			: hidden;
/*  	margin				: 0px; /* Provides spacing between images */

//    padding: 5px;
//    border: 1px solid gray ;
//  	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* Soft shadow for depth */
// }

/* Ensure images maintain proportions */
//.image-wrapper img {
// 	 text-align		: center;
//   max-width		: 90%;
//   max-height		: 90%;
//   width			: auto;
//   height:			: 90%;
//   object-fit		: contain; /* Keeps image aspect ratio intact */
//   border-radius	: 0px; /* Removes rounded corners */
//   padding			: 20px;
// }

.image-wrapper {
    display: flex;
    justify-content: center; /* Centers image horizontally */
    align-items: center; /* Centers image vertically */
    width: 150px; /* Ensures square shape */
    height: 150px;
    background-color: beige; /* Background color */
    border: 2px solid black; /* Black border */
    border-radius: 8px; /* Rounded edges */
    padding: 10px; /* Space between image and wrapper */
    overflow: hidden;
    box-sizing: border-box; /* Ensures padding does not increase size */
}

.image-wrapper img {
    max-width: 90%; /* Ensures image does not exceed wrapper */
    height: auto; /* Maintains aspect ratio */
    object-fit: contain; /* Keeps image properly positioned */
}

.contenttable {
    width: 100%;
    display: flex;
    justify-content: center; /* Centers image wrappers */
    align-items: flex-start; /* Aligns at top */
    flex-wrap: wrap; /* Ensures responsiveness */
    gap: 30px; /* Spacing between image wrappers */
    background-color: white; /* Background color */
}

/*  I added this to style the menu-table  */
.menu-table {
   	width: 250px ;    
    min-width:100%; /* Prevents shrinking */
    max-width: 60%; /* Prevents growing */
    padding: 10px;
    text-align: left;
    vertical-align: top;
    display: table;
    table-layout: fixed; /* Forces the table width to NEVER change */
    float: left; /* keep menu on left. */
 	color: white;
	border-radius: 1px; /* Removes rounded corners */
  	background-color: lightgreen; /* Light grey background */
  	border-radius: 8px; /* Removes rounded corners */
}

/* Ensure table cells don’t stretch */
.menu-table td {
 /*  	width: 250px ;    */
    min-width:100%; /* Prevents shrinking */
/*    max-width: 60%; /* Prevents growing */  
    overflow: hidden; /* Prevents content overflow */
    white-space: nowrap; /* Stops album names from wrapping */
    text-align: left;
    width: 100%; /* Forces cells to respect the fixed width */
border-radius: 0px; /* Removes rounded corners */
}



/* End of what I added  */

a:link,a:visited {
    color              : none ;  // other option | #555555
    text-decoration    : none;
}

a:hover {
    text-decoration    : none;
    scale			   : 1.1x;
}

.footer {
    font-family        : Verdana, Helvetica, Arial, sans-serif;
    font-size          : 9px;
    text-align         : center; 
    color              : #555555;    
}

.button {
  font-family          : Verdana, Helvetica, Arial, sans-serif;
  font-size            : 12px;  
  color                : #000000;
  background-color     : #A4C0E3;
  border               : 1px solid #000000;
  padding              : 3px;
}

.input {
  font-family          : Verdana, Helvetica, Arial, sans-serif;
  font-size            : 12px;  
  color                : #000000;
  background-color     : #FFFFFF;
  border               : 1px solid #000000;
  padding              : 3px;
  text-align           : center; 
}

.portfolio {
  font-family          : Verdana, Helvetica, Arial, sans-serif;
  font-size            : 10px;  
  color                : #000000;
  background-color     : #FFFFFF;
  border               : 1px solid #000000;
  padding              : 3px;
  text-align           : left; 
}

@media screen and (max-width: 768px) {
    .contenttable {
        width: 80%; /* Expand to full width */
        flex-direction: column; /* Stack images vertically */
    }

    .image-wrapper {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height dynamically */
    }

    .image-wrapper img {
        max-width: 100%; /* Prevents images from being too large */
        height: auto;
    }
}