body{
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}

#site_wrap{
	background-color:#F5EFE4;
	min-height:100vh;
	display:grid;
	grid-template-columns:
		1fr
		repeat(4,minmax(0,272px))
		1fr
		;
		grid-gap:0px;
		grid-template-rows:
			min-content
			min-content
			min-content
			1fr;
		;
		grid-template-areas:
			". logo logo header header ."
			". featured_header featured_header featured_header featured_profile ."
			". content content content content ."
			"footer footer footer footer footer footer"
}

.logo{
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
	background-color:#F5EFE4;
}
.logo-img{
    width: 40%;
    margin-top:8px;
}

.header{
	background-color:#F5EFE4;
	grid-area:header;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	padding-top:2em;
}


.header .nav{
	list-style:none;
	display:flex;
	flex-wrap:nowrap;
	gap:0.5em;
	justify-content:flex-start;
	align-items:center;
}
.header .nav a{
	text-decoration:none;
	border-radius:50em;
	color:#F7F2EB;
	background-color:#F5EFE4;
	padding:0.75em 2em;
	font-weight:bold;
	font-size:clamp(1rem, 2vw, 1.25rem);
	display:block;
	white-space:nowrap;
}
.header .nav li:nth-child(1) a {
    background-color: #5C322B;
    color: #F5EFE4;
}
.header .nav li:nth-child(1) a:hover{
	background-color:#9C5C51;
	color:#F5EFE4;
}
.header .nav li:nth-child(1) a.active{
	background-color:#9C5C51;
	color:#5C322B;
}

.header .nav li:nth-child(2) a {
    background-color: #B88D48;
    color: #F5EFE4;
}
.header .nav li:nth-child(2) a:hover{
	background-color:#F5D689;
	color:#F5EFE4;
}
.header .nav li:nth-child(2) a.active{
	background-color:#F5D689;
	color:#B88D48;
}

.header .nav li:nth-child(3) a {
    background-color: #544F42;
    color: #F5EFE4;
}
.header .nav li:nth-child(3) a:hover{
	background-color:#8D9186;
	color:#F5EFE4;
}
.header .nav li:nth-child(3) a.active{
	background-color:#8D9186;
	color:#544F42;
}

.nav_wrap{
	margin-right:139px;
}


.featured_header{
	background-color:#F5EFE4;
	grid-area:featured_header;
	margin-bottom:1em;
}
.featured_header h1{
	color:#9C5C51;
	margin-top:1em;
	margin-left:1.3em;
	font-family:opake;
	font-size:300%;
	line-height:1em;
}
.featured_header p{
	color:#5C322B;
	margin-top:0.5em;
	margin-left:2.5em;
	margin-bottom:1.5em;
	font-family:garamond;
	font-size:160%;
	line-height:1.1em;
}
.btn{
	text-decoration:none;
	border-radius:50em;
	color:#9C5C51;
	background-color:#EBBBB7;
	padding:12px 32px;
	margin:0 8.5px;
	margin-left:2.5em;
	font-weight:bold;
	font-size:18pt;
}
.btn:hover{
	background-color:#FFA799;
	color:#9C5C51;
}
.btn:active{
	background-color:#FFA799;
	color:#F5EFE4;
}


.featured_profile{
	padding:0em 1em;
	padding-left:1em;
	grid-area:featured_profile;
	justify-content:flex-end;
}
.featured_profile img{
	width: 100%;
	max-width: 480px;
	border-radius: 10px;
}


.content{
	grid-area:content;
	background-color:#F5EFE4;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto auto auto auto;
	gap:20px;
	padding:2em;
}
.content img{
	width:100%;
	object-fit:cover;
}
.img-collage{
	width:auto;
	grid-column:1;
	grid-row:1;
}
.img-uofu{
	width:auto;
	grid-column:2;
	grid-row:1;
}
.img-frontandback{
	width:auto;
	grid-column:1;
	grid-row:2;
}
.img-daisy{
	width:auto;
	grid-column:1;
	grid-row:3;
}
.img-lost{
	width:auto;
	grid-column:2;
	grid-row:span 2;
}


.footer{
	background-color:#5C322B;
	color:#F5EFE4;
	grid-area:footer;
	text-align:center;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
}

.menu-toggle{
	background-color:F5EFE4;
	color:#9C5C51;
	cursor:pointer;
	font-size:28px;
	margin-right:1em;
	display:none;
}

/*Mobile Site*/
@media screen and (max-width:480px){
	#site_wrap{
		grid-template-rows:
			min-content
			min-content
			min-content
			min-content
			1fr;
		grid-template-areas:
			"logo logo logo logo logo header"
			"header header header header header header"
			"featured_header featured_header featured_header featured_header featured_header featured_header"
			"featured_main featured_main featured_main featured_main featured_main featured_main"
			"content content content content content content"
			"footer footer footer footer footer footer"
	}
	.logo-img {
        width: 100px;
        margin-top: 0;
    }

    .featured_profile {
        display: none;
    }

    .featured_header h1 {
        font-size: 20pt;
		text-align:center;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
    }
    .featured_header p {
        font-size: 14pt;
		text-align:center;
    }

    .img-collage,
    .img-uofu,
    .img-frontandback,
    .img-daisy,
    .img-lost {
        grid-column: auto;
        grid-row: auto;
    }

    .content {
        display: grid;
        grid-template-columns: 1fr;
        flex-direction: column;
        background-color: #F5EFE4;
    }
    .content img {
        width: 100%;
        grid-column: auto;
    }

    .menu-toggle {
        display: block;
		position: absolute;
		top: 1em;
		right: 1em;
		background: none;
		border: none;
		font-size: 28px;
		color: #9C5C51;
		cursor: pointer;
		z-index: 1001;
    }

    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1em;
        position: relative;
    }

    .header .nav {
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: #EBBBB7;
        padding: 2em;
        justify-content: flex-start;
        align-items: center;
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%);
        box-shadow: none;
        border: none;
    }

    .header .nav.show {
        transform: translateX(0);
    }

    .header .nav a {
        text-decoration: none;
        border-radius: 50em;
        padding: 14px 40px;
        margin: 1em 0;
        font-weight: bold;
        font-size: 16pt;
        width: fit-content;
        text-align: center;
        box-shadow: none;
        border: none;
    }

    .header .nav li:nth-child(1) a {
        background-color:#5C322B;
        color:#F5EFE4;
    }
    .header .nav li:nth-child(2) a {
        background-color:#B88D48;
        color:#F5EFE4;
    }
    .header .nav li:nth-child(3) a {
        background-color:#544F42;
        color:#F5EFE4;
    }
}





/*Projects Page Styles*/
.featured_header_projects{
	background-color:#F5EFE4;
	grid-area:featured_header;
	margin-bottom:1em;
}
.featured_header_projects h1{
	color:#B88D48;
	margin-top:1em;
	margin-left:1.3em;
	font-family:opake;
	font-size:300%;
	line-height:1em;
}
.featured_header_projects p{
	color:#9C763D;
	margin-top:0.5em;
	margin-left:2.5em;
	margin-bottom: 1em;
	font-family:garamond;
	font-size: 160%;
	line-height: 1.5em;
}
.projectscontent{
	grid-area:content;
	background-color:#F5EFE4;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"menu menu menuback menuback"
		"form form type type"
		"minor phosphene littlewomen littlewomen"
		"minor fashion littlewomen littlewomen"
		"zine fashion littlewomen littlewomen"
		"zine peterrabbit littlewomen littlewomen"
		"counseling counseling kamari movieposter"
		"counseling counseling japan deco";
	gap:20px;
	padding:2em;
}
.projectscontent img{
	width:100%;
	object-fit:cover;
}
.img-menu{
	width:auto;
	grid-area: menu;
}
.img-menuback{
	width:auto;
	grid-area: menuback;
	margin-top: -6.5%;
}
.img-form{
	width:auto;
	grid-area: form;
}
.img-type{
	width:auto;
	grid-area: type;
}
.img-minor{
	width:auto;
	grid-area:minor;
	margin-top: -65%;
}
.img-phosphene{
	width:auto;
	grid-area: phosphene;
	margin-top: -60%;
}
.img-fashion{
	width:auto;
	grid-area: fashion;
}
.img-zine{
	width:auto;
	grid-area: zine;
	margin-top: -15%;
}
.img-peterrabbit{
	width:auto;
	grid-area: peterrabbit;
	margin-top: -35%;
}
.img-littlewomen{
	width:auto;
	grid-area: littlewomen;
}
.img-counseling{
	width:auto;
	grid-area: counseling;
}
.img-kamari{
	width:auto;
	grid-area: kamari;
	margin-top: -20%;
}
.img-movieposter{
	width:auto;
	grid-area: movieposter;
	margin-top: -20%;
}
.img-japan{
	width:auto;
	grid-area: japan;
	margin-top: -40%;
}
.img-deco{
	width:auto;
	grid-area: deco;
}




/*About Page Styles*/
.featured_header_about{
	background-color:#F5EFE4;
	grid-area:featured_header;
	margin-bottom:1em;
}
.featured_header_about h1{
	color:#706D64;
	margin-top:1em;
	margin-left:1.3em;
	font-family:opake;
	font-size:300%;
	line-height:1em;
}
.featured_header_about p{
	color:#544F42;
	margin-top:0.5em;
	margin-left:2.5em;
	margin-bottom:1.5em;
	font-family:garamond;
	font-size:160%;
	line-height:1.1em;
}



/*Fav Projects List*/
	.favs{
		text-decoration:none;
		border-radius:50em;
		color: #EBBBB7;
		background-color: #9C5C51;
		padding:0.75em 2em;
		font-weight:bold;
		font-size:clamp(1rem, 2vw, 1.25rem);
		display:block;
		white-space:nowrap;
	}
	.favs:hover{
		background-color: #9C5C51;
		color: #5C322B;
	}
	.favs:active{
		background-color: #9C5C51;
		color: #5C322B;
	}
	
	
	
/*Book Page*/
	.bookcontent{
	grid-area:content;
	background-color:#F5EFE4;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:20px;
	padding:2em;
	}
	.img-book{
		width: 100%;
		grid-column: 1 / span 2;
		margin-top: -2em
	}


/*Menu Page*/
	.menucontent{
	grid-area:content;
	background-color:#F5EFE4;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto auto;
	gap:20px;
	padding:2em;
	}
	.img-menu{
		width: 100%;
		grid-column: 1 / span 2;
		margin-top: -2em;
		grid-row:auto;
	}
	.img-menu2{
		width: 100%;
		grid-column: 1 / span 2;
		margin-top: -1em;
	}