* {
	box-sizing: border-box;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #e9edc9; /* beige-green */
}

/* Style the header */
.header {
	grid-area: header;
	background-color: #CCD5AE; /* tea green */
	padding: 30px;
	text-align: center;
	font-size: 35px;
}

/* The grid container */
.grid-container {
	display: grid;
	grid-template-areas: 
		'header header header header header header' 
		'navbar middle middle middle middle right' 
		'footer footer footer footer footer footer';
	grid-column-gap: 10px; /*if you want gap between the columns*/
	align-items: start;
	color: #472E16; /* cafe noir */
} 

/* Style the middle column */
.middle {
	grid-area: middle;
	background-color: #FAEDCD;
	color: #472E16; /* cafe noir */	
	gap: 20px;
	padding: 20px;
}


.middletrans {
	grid-area: middle;
	background-color: #FAEDCD;
    color: #472E16;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjusts the number of columns */
    gap: 20px;
    justify-items: center;
    align-items: start; /* Aligns items to the top */
	padding: 20px;
	perspective: 500px;
}

.middletrans h1, .middletrans p {
    grid-column: 1 / -1; /* Make them span the full width */
    text-align: center; /* Center text */
    margin-bottom: 20px; /* Add space below */
}

.left,
.middle,
.right {
	padding: 10px;
	min-height: 100vh;
}

/* Style the left column */
.left {
	grid-area: navbar;
	background-color: #FEFAE0; /*cornsilk */
	/*order: -1;*/
	text-align: center;
}

.left ul {
	margin: 10px 10px;
    padding: 10px;
}

.left ul li {
	list-style-type: none;
	background: #CCD5AE; /*tea green */
	color: #D4A373; /* buff */
	padding: 5px 15px;
	border-radius: 5px;
	margin: 10px 0;
}

.left ul li a{
	color: #A16931; /* golden brown */
	font-family: "Gotham", "Open Sans",sans-serif;
	text-decoration: none;
}

a:link {
	color: #A16931; /* golden brown */
}

a:visited {
	color: #D4A373; /* buff */
}

a:hover {
	background-color: #f1e1d1; /* almond */
	color: #616E38;	/* dark moss green */
}

a:active {
	color: #A16931; /* golden brown */
}


/* Style the right column */
.right {
	grid-area: right;
	background-color: #FEFAE0; /* papaya whip */
	color: #472E16; /* cafe noir */
}

.right a:link {
	color: #616E38;	/* dark moss green */
}

/* Style the footer */
.footer {
	grid-area: footer;
	background-color: #D4A373; /* buff */
	padding: 10px;
	text-align: center;
  }
  
 .footer a:link {
	 color: #616E38;	/* dark moss green */
 }

 /* Styles for transitions*/
 .width {
	width: 100px;
	height: 100px;
	background: #993333;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 2s, background-color 2s, border-radius 2s;
 }

 .width:hover {
	width: 250px;
	height: 100px;
	background:  #bf4040;
	border-radius: 10px;
	transition-delay: 1s;
 }

 .height {
	width: 100px;
	height: 100px;
	background: orange;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: height 2s;
 }

 .height:hover {
	background: #cc7a00;
	height: 250px;
}

 .both {
	width: 100px;
	height: 100px;
	background: #006600;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 3s, height 4s, transform 2s, border-radius 2s;	
 }

 .both:hover {
	width: 150px;
	height:150px;
	background: #00e600;
	border-radius: 125px;
	transform: rotate(100deg);
 }

 .ease {
	width: 100px;
	height: 100px;
	background: #003d99;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 3s;
}

.ease:hover {
	width:250px;
	transition-timing-function: ease;
}

 .linear {
	width: 100px;
	height: 100px;
	background: #bf00ff;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 3s;
}

.linear:hover {
	width:250px;
	transition-timing-function: linear;
}

 .easein {
	width: 100px;
	height: 100px;
	background: #ff3366;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition-property: width;
	transition-duration: 3s;
}

.easein:hover {
	width:250px;
	transition-timing-function: ease-in;
}

 .easeout {
	width: 100px;
	height: 100px;
	background: #ffff66;
	color:rgb(231, 156, 58);
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 3s;
}

.easeout:hover {
	width:250px;
	transition-timing-function: ease-out;
}

 .easeinout {
	width: 100px;
	height: 100px;
	background: #ff8c66;
	color:antiquewhite;
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 3s;
}

.easeinout:hover {
	width:250px;
	transition-timing-function: ease-in-out;
}


 .cubic {
	width: 100px;
	height: 100px;
	background: #66ffff;
	color:rgb(70, 58, 231);
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 1.5s ease-in-out, border-radius 1.5s ease-in-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

 .cubic:hover {
	width:250px;
	height: 100px;
	background: #d5f5f5;
	border-radius: 15px;
	transform: rotate(-15deg);
}

 /* Styles for transforms*/

 .box1 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
} 

.box1:hover {
	transform: translate(50px, 50px);

}

.box2 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
} 

.box2:hover {
	transform: skew(-15deg, -30deg);
}

.box3 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
} 

.box3:hover {
	transform: scale(0.25);
}

.box4 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
} 

.box4:hover {
	transform: rotate(35deg);
}

.box5 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
} 

.box5:hover {
	transform: matrix(0, 1, 1, 0, 0, 0);
}

/*Rotate3D*/
.box6 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: transform 1s;
} 

.box6:hover {
	transform: rotate3D(1, 1, 0, 45deg);
}

/*Translate3D*/
.box7 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: transform 1s;
}

.box7:hover {
	transform: translate3d(50px, 10px, 100px);
}

/*Scale3D*/
.box8 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: transform 1s ease;
}

.box8:hover {
	transform: scale3d(1.5, 1.5, 2.5);
}

/*Matrix3D*/
.box9 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: transform 1s;
}

.box9:hover {
	transform: matrix3d(
		0.5, 0.2, 0.5, 0,
		-0.5, 0.7, 0.2, 0,
		-0.5, -0.7, 0.5, 0,
		10, 10, 0, 1);
	}

/*Perspective*/
.box10 {
    height: 150px;
    width: 150px;
    background-color: rgb(166, 187, 50);
	color: #472E16; /* cafe noir */
	display: flex; /* Enables flexbox */
	text-align: center;
	justify-content: center;/* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	transition: transform 1s;
	}

.box10:hover{
	transform: rotateY(45deg);}
	
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/*Mobile*/
@media (max-width: 600px) {
	.grid-container  {
		  grid-template-areas: 
			'header header header header header header' 
			'navbar navbar navbar navbar navbar navbar'
			'middle middle middle middle middle middle '		  
			'right right right right right right' 
			'footer footer footer footer footer footer';
	}
  }

  /*Tablets*/
@media (min-width: 768px) and (max-width: 1024px) {
    .grid-container {
        grid-template-areas: 
            'header header header header'
            'navbar middle middle right'
            'footer footer footer footer';
        grid-column-gap: 15px;
    }

    .middle {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
    }

    .width, .height, .both, .ease, .linear, .easein, .easeout, .easeinout, .cubic {
        width: 120px;
        height: 120px;
    }
}

/*Desktops*/
@media (min-width: 1025px) {
    .grid-container {
        grid-template-areas: 
            'header header header header header header' 
            'navbar middle middle middle middle right' 
            'footer footer footer footer footer footer';
        grid-column-gap: 20px;
    }

    .middle {
        grid-template-columns: repeat(3, 1fr); /* Three columns */
    }

    .width, .height, .both, .ease, .linear, .easein, .easeout, .easeinout, .cubic {
        width: 150px;
        height: 150px;
    }
}