html {font-size: 0.9rem;
	-webkit-text-size-adjust: 100%; 
	/* Prevent font scaling in landscape while allowing user zoom */
	}


	body {
	margin: 0px;
	background-color: #CAC8C9;
	font-family:"Courier New", Courier, monospace;
	font-size: 1rem;
	color: #5b5b5b;
	font-weight: 300;
	font-style: normal;
	line-height: 18px;
	text-transform: none;
	text-align: left;}	



	section { padding: 2rem 20% 2rem 20%;}

	a:link {
	color: #5B5B5B;
	text-decoration: underline;}
	 a:hover, a:active, a:visited {
	color:#000000;} 

	
	.header-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    width: 440px;}

    .pics {
    display: block;
    max-width: 100%;
    height: auto;
    width: 308px;}

   .logo {
    display: inline-block;
    max-width: 100%;
    height: auto;
    width: 317px;
    margin-top: 0.8rem;}



	/* Clear floats after the columns */

	.row:after {
	content: "";
	display: table;
	clear: both;
	}

	/* Create columns that floats next to each other */

   .col-1 {
	float: left;
	width:100%;
	display: table-cell;}
	.col-2 {
	float: left;
	width:50%;
	display: table-cell;}

	
	/* For screens 1100px wide or less */

	@media screen and (max-width: 1100px) {
 .col-1, .col-2 {
	float: left;
	width:100%;
	display: table-cell;}

	section { padding: 2rem 28% 2rem 28%;}

	.row {padding: 0 2rem;}

}

@media screen and (max-width: 768px) {
	section { padding: 2rem 0 2rem 0;}
	.row {
		max-width: 300px;
	}

}

/* photo gallery */

 .photo-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            margin-left: -10px;
        }

        .photo-cell {
            padding: 10px;
        }

        .photo-cell img {
            display: block;
            height: auto;
            cursor: pointer;
            width: 141px;
        }

        .enlarged-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
            z-index: 2;
        }

        .enlarged-layer {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            background:  #CAC8C9;
            padding: 20px;
        }

        .enlarged-image {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }

        .close-button {
            position: absolute;
            display: block;
            top: 10px;
            right: 10px;
            color: black;
            cursor: pointer;
            background-color: #FFF;
            padding: 5px;
        }

        @media (max-width: 736px) {
            .enlarged-layer {
            	min-width: 80vw;
            }

         .photo-cell img {
                height: auto;
                max-width: 100%;
        }
        }