.wrapper {
		display: grid;
		grid-template-columns: 5% 45% 45% 5%;
		grid-template-areas: 
			"nv nv nv nv"
			"hd	hd hd hd"
			".	mn pb ."
			"ft ft ft ft";
	}
	
.body {font-family: "DynaPuff", system-ui;
  font-size-adjust: auto;
  font-weight: <weight>;
  font-style: normal;
  background: #F5DEB0;
}
.html {
  		font-family: 15px;
		font-family: 'Limelight', sans-serif;
        font-weight: 400;
}

	}
	.nav {
		grid-area: nv;
		background: #E6B26C;
		height: 50px;
	}
	.nav a {
		color: #E6B26C;
		margin-left: 10px;
		line-height: 10px;
		text-align: center;
		text-decoration: none
	}
	.nav a:hover {
		background: #FFFFFF;
	}
	.header {
		grid-area: hd;
		background: #F57E5A;
		margin-bottom: 20px;
	}
	.content {
		grid-area: mn;
	}
	.footer {
		grid-area: ft;
		background: #F57E5A;
		color: white;
		padding-left: 40px;
		padding-top: 20px;
		height: 100px;
	}
	.right {
		grid-area: pb;
		margin-left: 20px;
	}
	.add {
		background: #F5DEB0;
		padding: 20px;
		margin-bottom: 20px;
	}
    .add a:hover {
		background: #FFFFFF;
	}

.wrapper2 {
		display: grid;
		grid-template-columns: 5% 45% 45% 5%;
		grid-template-areas: 
			"nv nv nv nv"
			"hd	hd hd hd"
			".	mn mn ."
			"ft ft ft ft";
	}
	
	.body {font-family: "DynaPuff", system-ui;
  font-size-adjust: auto;
  font-weight: <weight>;
  font-style: normal;
		background: #F5DEB0;
	}
	.html {
  		font-size: 15px;
		font-family: 'Limelight', sans-serif;
        font-weight: 400;
}

	}
	.nav {
		grid-area: nv;
		background: #E6B26C;
		height: 50px;
	}
	.nav a {
		color: #E6B26C;
		margin-left: 40px;
		line-height: 50px;
		text-align: center;
		text-decoration: none
	}
	.nav a:hover {
		background: #FFFFFF;
	}
	.header {
		grid-area: hd;
		background: #F57E5A;
        text-align: center;
		margin-bottom: 20px;
	}
	.content {
		grid-area: mn;
        text-align: center;
	}
	.footer {
		grid-area: ft;
		background: #F57E5A;
		color: white;
		padding-left: 40px;
		padding-top: 20px;
		height: 100px;
	}
	.right {
		grid-area: pb;
		margin-left: 20px;
	}
	.add {
		background: #F5DEB0;
		padding: 20px;
		margin-bottom: 20px;
	}
    .add a:hover {
		background: #FFFFFF;
	}
	
	.wrapper3 {
		display: grid;
		grid-template-columns: 30% 20% 20% 30%;
		grid-template-areas: 
			"nv nv nv nv"
			"hd	hd hd hd"
			".	mn mn ."
			"ft ft ft ft";
	}
	
	.body {
		background: #F5DEB0;
	}
	.html {
  		font-size: 15px;
		font-family: 'Limelight', sans-serif;
        font-weight: 400;
}

	}
	.nav {
		grid-area: nv;
		background: #E6B26C;
		height: 50px;
	}
	.nav a {
		color: #E6B26C;
		margin-left: 40px;
		line-height: 50px;
		text-align: center;
		text-decoration: none
	}
	.nav a:hover {
		background: #FFFFFF;
	}
	.header {
		grid-area: hd;
		background: #F57E5A;
        text-align: center;
		margin-bottom: 20px;
	}
	.content {
		grid-area: mn;
        text-align: center;
	}
	.footer {
		grid-area: ft;
		background: #F57E5A;
		color: white;
		padding-left: 40px;
		padding-top: 20px;
		height: 100px;
	}
	.right {
		grid-area: pb;
		margin-left: 20px;
	}
	.add {
		background: #F57e5a;
		padding: 20px;
		margin-bottom: 20px;
	}
    .add a:hover {
		background: #FFFFFF;
	}