html {
	background-color: floralwhite;
}

body {
	/* Skeleton layout for page */
	display: grid;
	grid-template-areas:
	"navbar navbar"
	"sidebar main"
	"footer main";

	/* Size of columns and rows */
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto 1fr auto;

	margin-top: 0px;
	min-height: 100vh;
}

nav {
	grid-area: navbar;

	/* Sticky navbar */
	position: sticky;
	top: 0;
	padding-top: 0.25em;

	background-color: floralwhite;
	border-bottom: 1px solid black;

	a, a:visited{
		/* color: inherit; */
		font-weight: 900;
	}

	span{
		font-size: larger;
	}
}

nav img{
	height: 20px;
}

aside {
	grid-area: sidebar;
	border-right: 1px solid black;
}

main {
	grid-area: main;
}


/* view offer details styling */

section.offer_summary{
	display:flex;
	padding: 5em 2em;
	justify-content: center;
	gap: 3em;
}

.offer_1{
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:flex-start;
}

.offer_2{
	width: 70%;
	padding-top: 3em;
}

.view_offer {
	img{
		border: 2px solid black;
		border-radius: 3px;
		width: 350px;
		height: 300px;
	}

	button{
		font-size: large;
		background-color: bisque;
		padding: 0.5em;
	}
	.completed_orders, .pending_orders{
		background-color: blanchedalmond;
		border-radius: 4px;
		border: 5px solid burlywood;
		padding: 1em;
		flex: 1;

		h2{
			color:sienna;
			text-decoration: underline;
		}
	}

	.offer_cards{
		display:flex;
		gap: 1em;

	}
	.order{
		width: auto;
		height: auto;
		display: flex;
		border: 2px solid black;
	}

	.order ul{
		list-style-type: none;
		padding: 1em;
		margin: 0;
	}

	.order li{
		display: inline;
	}

	.order_name{
		font-weight: 750;
	}

	.order_time{
		font-style: italic;
	}
}

section.offer_reviews{
	background-color: whitesmoke;
	margin: 2em;
	padding: 1em;

	width: auto;
	height: auto;
	border: 2px solid black;

}

/* edit offer */

.edit_offer{
	p{
		font-size: large;
	}
	button{
		font-size: large;
		background-color: bisque;
		padding: 0.5em;
	}

	input.large{
		font-size: larger;
	}
}

section.offer_summary{
	display:flex;
	padding: 5em 2em;
	justify-content: center;
	gap: 3em;
}

.offer_1{
	max-width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:flex-start;
}

.offer_2{
	max-width: 70%;
	padding-top: 3em;
}

.edit_offer img{
	border: 2px solid black;
	border-radius: 3px;
	width: 350px;
	height: 300px;
}
/* (aside) order preview styling */

.order_preview .order {
	border: 1px solid black;
    background-color: whitesmoke;
	margin: 5px;
	width: auto;
	height: auto;
	display: flex;
}

.order_preview .order ul {
	list-style-type: none;
	padding: 1em;
	margin: 0;
}

.order_preview .order li{
	display: inline;
}

.order_preview .order_name{
	font-weight: 700;
}

.order_preview .order_time{
	font-style: italic;
}

.order a{
	/* color: inherit; */
}

button.accept{
	background-color: seagreen;
}

button.deny{
	background-color: lightcoral;
}

/* manage orders */

.orders_container{

	.order {
		border: 1px solid black;
		background-color: whitesmoke;
		margin: 5px;
		width: auto;
		height: auto;
		display: flex;
	}

	.order ul {
	list-style-type: none;
	padding: 1em;
	margin: 0;
	}
	.order li{
		display: inline;
	}

	.order_name{
		font-weight: 700;
	}

	.order_time{
		font-style: italic;
	}

	.order button {
    	margin: 0 1em;
	}
}
/* review styling */

aside {
	.reviews_container{
		overflow: scroll;
	}
	.review {
		border: 1px solid black;
		background-color: bisque;
		margin: 5px;
		width: auto;
		height: auto;
		display: flex;
	}
	
	.review img{
		width: 10vw;
		height: 10vw;
	}

	.review ul {
		list-style-type: none;
		padding: 0.5em;
		margin: 0;
	}
}

.reviews_cards{
	.review ul{
			list-style-type: none;
			padding: 0.5em;
			margin: 0;
		}
	.review {
		border: 1px solid black;
		background-color: whitesmoke;
		margin: 5px;
		width: auto;
		height: auto;
		display: flex;
	}
}

.review ul {
	list-style-type: none;
	padding: 0.5em;
	margin: 0;
}

.review_title{
	font-weight: 700;
}

.review_author{
	font-style: italic;
}

.review a{
	/* color: inherit; */
}

.review p {
	font-size: 0.80em;
	display:inline;
}

.review_content {
    white-space: pre-line;
}

.add_review {
    float: right;
}

.review_text_box {
    height: 50px;
    width: 30vw;
    white-space: wrap;
}

/* styling for viewing reviews on view_offer.html */

.offer_reviews{

	.review {
		border: 2px solid black;
		margin: 1em 0em;
		display: flex;
		flex-direction: row;

		.review_image{
			border-radius: 50%;
			width: 100px;
			height: 100px;
		}
		ul {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1em;
			list-style-type: none;
		}
		p{
			font-size: larger;
		}
		button{
			background-color: whitesmoke;
		}
		.response{
			border: 2px solid black;
			border-radius: 3px;
			background-color: white;
			padding: 0.5em 2em;
			display: flex;
			gap: 2em;
		}
	}
}

	
/* seller profile */

.profile{
	display: flex;
	flex-wrap: wrap;

	gap: 2em;
	padding: 3em;
}

.user_info{
	width: 30%;
	min-height: 500px;
	background-color: bisque;
	padding: 2em;
	border-radius: 1em;
	text-align: left;
}

.user_info span{
	font-weight: 750;
}

img.user_photo{
	border-radius: 50%;
	border: 3px solid black;
	width:15em;
}

.profile button{
	font-size: large;
	background-color: burlywood;
}

.edit_profile{
	display: flex;
	flex-wrap: wrap;

	gap: 2em;
	padding: 3em;
}

/* footer styling */

footer {
	grid-area: footer;
	border-top: 1px solid black;
	border-right: 1px solid black;
}

/* dynamic styling */

.hide{
	display: none;
}