body{
	background-color: white;
	color: black; 
	font-family: sans-serif;
}

.container{
	display:flex;
	flex-direction:column;
	justify-content: center; 
	padding:0;
	margin: 0;
	min-height: 100vh;
}

.row{
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #007bff;
	color: white;
}

.leftcol{
	width: 20vw;
	padding: 10px 5px;
	max-height: 500px;
	overflow-y: auto;
}
	
.rightcol{
	overflow-x: hidden;
	width: 60vw; 
	background-color: white;
	color: black;
	border: 5px solid #007bff;
	position: relative;
}
	
.nav{
	position: absolute;
	background-color: #007bff;
	padding: 5px;
	transition: 0.2s;
}

.nav a{
	display: block;
	margin: 5px auto;
	width: 100px;
}
	
.topright{
	top: 0;
	right: -65px;
	border-radius: 0 0 0 20px;
}

.topright:hover{
	right: 0px;
}
	
.bottomleft{
	bottom: 0;
	left: -65px;
	text-align: right;
	border-radius: 0 20px 0 0;
}

.bottomleft:hover{
	left: 0px;
}
	
.shopbox{
	max-height: 500px;
	overflow-y: auto;
	padding: 5px 40px;
}

.products{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
}

.products>*{
	width: 33%;
}
	
h1, h2{
	margin: 0;
}



img{max-width: 80%;}
	
@media (max-width: 1200px) {
	.leftcol{width: 30vw;}
	.rightcol{width: 70vw;}
}
	
@media (max-width:768px) {
	.row{flex-direction: column;}
	.leftcol, .rightcol{width: auto;}
}