.wrapper {
	display: grid;
	grid-template-columns: 15% 50% 30% 5%;
	grid-template-areas: 
		"nv nv nv nv"
		". hd hd hd"
		". mn pb ."
		"ft ft ft ft";
	width: 100%;
}

body {
	background: #4A4236;
	font-family: 'Lora', serif;
	color: #C0C0C0;
	margin: 0;
}

html {
	font-size: 15px;
}

.nav {
	grid-area: nv;
	background: #74716B;
	height: 50px;
	font-family: 'Bright Sunshine Cap', cursive;
	display: flex;
	align-items: center;
}

.nav a {
	color: #C0C0C0;
	margin-left: 20px;
	text-decoration: none;
}

.nav a:hover {
	background: #C0C0C0;
	color: #4A4236;
}

.header {
	grid-area: hd;
	margin-bottom: 20px;
	font-family: 'Old Typewriter', monospace;
	font-size: 17px;
	letter-spacing: 2px;
	padding: 20px;
	text-align: center;
}

.content {
	grid-area: mn;
	line-height: 1.6;
	padding: 20px;
}

.right {
	grid-area: pb;
	padding: 20px;
}

.footer {
	grid-area: ft;
	padding: 20px 40px;
	height: 100px;
}

.add {
	background: #C0C0C0;
	padding: 20px;
	margin-bottom: 20px;
	color: #4A4236;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.add img {
	width: 100%;
	border-radius: 15px;
	display: block;
}

.date {
	color: #74716B;
}

.excerpt {
	color: #4A4236;
}

.button {
	background: #74716B;
	color: #C0C0C0;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 12px;
	display: inline-block;
}

.button:hover {
	background: #C0C0C0;
	color: #4A4236;
}


.page-full .wrapper {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
}

.page-full .content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-area:  30px;
	padding: 40px 20px;
}

.page-full .right {
	max-width: 800px;
	margin: 0 auto 50px;
}

.page-full .header,
.page-full .footer {
	text-align: center;

}
.add h2 {
    font-size: 1.8em;
    margin: 10px 0;
}

.contact-form {
    font-family: 'Bright Sunshine Cap', cursive;
}

.contact-form label {
    color: #74716B;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 75%;
    padding: 12px;
    border: 1px #74716B;
    border-radius: 8px;
    font-family: 'Bright Sunshine Cap', cursive;
    margin-bottom: 15px;
    box-sizing: border-box;
    color: #74716B;
    background-color: #f9f9f9;
}

.contact-form textarea:placeholder {
    color: #74716B;
    opacity: 0.7;
}

.contact-form .button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #74716B;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Bright Sunshine Cap', cursive;
}

.contact-form .button:hover {
    background-color: #4A4236;
}