body {
	background-color : #fff;
	font-family : "Helvetica Neue", Arial, sans-serif;
	margin : 0;
}
#grid {
	display : grid;
	grid-template-columns : repeat(auto-fit,minmax(400px,1fr));
	grid-auto-rows : 300px;
	gap : 5px;
	height : 100vh;
	overflow-y : scroll;
	padding-right : 10px;
	grid-auto-flow : dense;
}
.grid-item {
	overflow : hidden;
	cursor : pointer;
	transition : all 0.2s ease;
}
.grid-img {
	width : 100%;
	height : 100%;
	object-fit : cover;
	display : block;
	transition : transform 0.2s, ease;
}
.grid-item:hover {
	transform : scale(1.05);
	box-shadow : 0 0 10px rgb(0, 0, 0, 0.6);
	z-index : 2;
}
.grid-img:hover {
	transform : scale(1.2);
}
.container {
	display : none;
	position : absolute;
	top : 0;
	left : 0;
	z-index : 3;
	width : 100vw;
	height : 100vh;
	background-color : rgb(0, 0, 0, 0.8);
	cursor : pointer;}
#expandedDiv {
	position : relative;
	top : 50%;
	transform : translateY(-50%);
	max-width : max-content;
	margin : auto;
	box-shadow : 0 0 13px 4px rgb(0, 0, 0, 0.5);
}
#expandedImg {
	display : block;
	max-width : 100%;
}
.closebtn {
	position : absolute;
	right : 8px;
	top : -10px;
	color : white;
	font-size : 40px;
	cursor : pointer;
}

#imgtext{display:block;
	position:absolute;
	bottom: 5px;
	left: 10px;
	color: white;
	font-size: 20px;
} 

.wrapper1 {
	background-color : #fff;
	font-family : "Helvetica Neue", Arial, sans-serif;
	margin : 0;
	height : 100vh;
	width : 100vw;
}
.wrapper {
	display : grid;
	grid-template-columns : 1fr 3fr;
	gap : 0;
	grid-template-areas : "header nav" "article article" "footer footer";
	height : auto;
	max-width : 100%;
}
header {
	background-color : #fff;
	grid-area : header;
	display : grid;
	grid-template-columns : 100px 270px 100px;
	gap : 15px;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-size : 70%;
	margin-left : 15px;
}
nav {
	grid-area : nav;
}
#hamnav label, #hamburger {
	display : none;
}

@media (min-width: 1000px) {
	.navbar {
	display : grid;
	grid-auto-flow : column;
	gap : 5px;
	background-color : #fff;
	height : 100px;
	width : auto;
	align-items : center;
	justify-content : center;
	margin : 15px;
}
.navbar a {
	color : #333;
	text-decoration : none;
	padding : 14px 16px;
	text-align : center;
}
.dropdown-content {
	display : none;
	position : absolute;
	background-color : #f9f9f9;
	min-width : 160px;
	box-shadow : 0 8px 16px 0 rgb(0, 0, 0, 0.2);
	margin-top : 14px;
}
.dropdown-content a {
	float : none;
	color : black;
	padding : 12px 16px;
	text-decoration : none;
	display : block;
	text-align : left;
}
.dropdown-content a:hover {
	background-color : #ddd;
}
.dropdown:hover .dropdown-content {
	display : block;
}
.dropdown-content a:hover {
	background-color : #ddd;
}
}

.content {
	margin-left : 15px;
}
article {
	background-color : #fff;
	grid-area : article;
	padding : 15px;
}
.btn {
	text-align : center;
	padding : 30px;
}
.btn a {
	box-shadow : 0 8px 16px 0 rgb(0, 0, 0, 0.2);
	padding : 16px;
	text-decoration : none;
	color : #333;
	background-color : #ddd;
}
.box {
	display : flex;
	align-items : center;
	justify-content : center;
}
.box img {
	width : 100%;
	height : auto;
}
img {
	max-width : 100%;
	height : auto;
}
form {
	width : 50vw;
	margin-left : 25vw;
	margin-top : 50px;
}
footer img {
	height : 70px;
	width : auto;
}
footer {
	background-color : #f9f9f9;
	color : #333;
	grid-area : footer;
	font-size : 14px;
	text-align : center;
	padding-top : 15px;
}
.content1 {
	display : grid;
	gap : 25px;
	grid-template-columns : repeat(2,1fr);
}

@media (max-width: 800px) {
nav {
	display : block;
	text-align : center;
}
nav h1 {
	color : #333;
	font-family : 'Archivo black', sans-serif;
	font-size : 40px;
}
nav .menu {
	margin : 10px 10px;
}
nav .menu a {
	font-size : 20px;
	text-decoration : none;
	color : #333;
	margin-right : 15px;
	padding-bottom : 10px;
	border-bottom : none;
}
.column {
	flex : 50%;
	max-width : 50%;
}
}
@media screen and (max-width: 600px) {
	.column {
	flex : 100%;
	max-width : 100%;
}
}
@media (max-width: 1000px) {
.wrapper {
	display : grid;
	grid-template-columns : 1fr;
	gap : 5px;
	grid-template-areas : "header" "nav" "article" "footer";
}
header {
	background-color : #fff;
	grid-area : header;
	display : grid;
	grid-template-columns : 100px 200px 100px;
	height : 100px;
	gap : 5px;
	text-align : center;
	align-items : center;
	justify-content : center;
	font-size : 60%;
	margin : 5px;
}
.content {
	margin : 0;
	padding : 0;
}
.content1 {
	display : grid;
	gap : 0;
	grid-template-columns : 1fr;
}
img {
	max-width : 100%;
	height : auto;
}
#hamnav label {
	display : block;
	color : #333;
	background-color : #f9f9f9;
	font-style : normal;
	font-size : 2em;
	padding : 12px;
	text-align : center;
}
#hamitems {
	display : none;
	text-align : center;
	margin : 0;
}
#hamnav input:checked ~ #hamitems {
	display : block;
}
.navbar a {
	color : grey;
	text-decoration : none;
	padding : 16px;
	border-bottom : 1px solid #f9f9f9;
	display : block;
}
.navbar {
	display : grid;
	grid-template-columns : 1fr;
	gap : 5px;
	background-color : #fff;
	height : auto;
	width : 100%;
	align-items : center;
	margin : 0;
}
.dropdown-content {
	display : none;
}
footer img {
	height : 40px;
	width : auto;
}
footer {
	background-color : #f9f9f9;
	color : #333;
	grid-area : footer;
	font-size : 11px;
	text-align : center;
	padding-top : 15px;
}
}