/* Reset some default styles for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

/* Apply a base font and background */
body {
  font-family: "DM Sans", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Utility Flexbox classes */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


.space-between {
  display: flex;
  justify-content: space-between;
}

.space-around {
  display: flex;
  justify-content: space-around;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.row-gap {
	display: flex;
	gap: 24px;
	}

/* Main container to use Flexbox */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.testbox {
	display: flex;
	min-height: 300px;
	width: 300px;
	background-color: black;
	flex-grow: 1;
	order: 2;
}

.big-green {
	background-color: green;
	flex-grow: 3;
}

.big-green:hover {
	height: 80vh;
	width: 100vw;
	flex-grow: 10;
	order: 1;
	
}