main.css

/* 
Jake Toomay 
October 20, 2021 
*/

* {
	/* Default styles */
	margin: 0;
	box-sizing: border-box;
	font-family: roboto;
	/* Change the font */
}

body {
	display: flex;
	/* Flex container */
	flex-direction: column;
	/* Column Flex Direction */
}

h1 {
	text-align: center;
	/* Center the header text */
	margin: 0 auto;
	/* Center the header text */
}

h1>a {
	color: black;
	/* Black Title */
	text-decoration: none;
	/* No Text Decoration on the header */
}

header {
	display: flex;
	/* Flexbox on menu bar */
	background-color: lightgrey;
	/* background color */
	padding: 1em;
	/* Make the header more "fat" Give it more space */
	border-bottom: 1px solid grey;
	/* Light grey border on the bottom */
	position: fixed;
	/* Fixed position so the bar scrolls with the page */
	width: 100vw;
	/* As wide as the viewport */
}

.product-group {
	display: block;
	/* Block element so margins can be added */
	margin: 5.5em auto;
	/* 5.5em top and bottom margin on each item in the store */
	text-align: center;
	/* Align text to the center */
	width: 300px; 
	/* Set a width for the container element holding the product */ 
}

img {
	display: block;
	/* Block element so margins can be added */
	margin: 0 auto;
	/* Auto left and right margins */
	max-width: 100%;
	/* Flexible images */
}

button {
	display: block;
	/* Block element so margins can be added */
	margin: 0 auto;
	/* Auto left and right margins */
	cursor: pointer;
	/* Pointer cursor when hovering over the element */
}

.title {
	font-weight: bold;
	/* Bold font for the title */
	font-size: 1.2em;
	/* Slightly bigger font for the title of the products */
}

#cart {
	height: 100vh;
	/* Configure the cart container to fill up 100% of the viewport height */
	text-align: center;
	/* Align text to the center */
}

p {
	margin: 10px 0;
	/* create space between the paragraph elements */
}

#sAndH {
	/* Container that holds the shipping and total */
	margin: 0 auto;
	/* Align to the center */
}

#total-price-on-page {
	font-weight: bold;
	/* Bold font for the price */
	text-align: center;
	/* Center aligned text */
}

select {
	margin-top: 7em;
	/* Top margin so when the cart is clicked, the header will not cover the selection */
	margin-bottom: 1em;
	/* Separate the total price and the selection list */
	text-align: center;
	/* Align text to the center */
	padding: .5em;
	/* make the select element look "fatter" */
}

.cart-container {
	display: flex;
	/* Flexbox on the container that holds the item */
	flex-direction: column;
	/* Column flex-direction */
	justify-content: space-between;
	/* Space between so the items are as lined up as they can be */
	height: 400px;
	/* 400px height value */
	margin: 3em auto;
	/* Margins for the container holding cart items */ 
	width: 300px; 
}

@media(min-width: 768px) and (max-width: 899px) {
	#container {
		display: flex; 
		/* Display flex container */ 
		flex-direction: row;
		 /* Change flex direction to row */ 
		flex-wrap: wrap;
		 /* Wrap the elements in the flex container */ 
		margin: 0 auto;
		 /* No margin on top or bottom and auto margins to center the container */ 
		justify-content: space-around;
		/* Space around the content */ 
	}
	.product-group {
		width: 300px;
		/* Specific width fot the product container */
		margin: 5.5em 0 0 0;
		/* Margin for the product containers */
		display: flex;
		/* Flex container */
		justify-content: space-between;
		/* Space between elements in the flex container */
		flex-direction: column;
		/* Column Flex Direction */
	}
	#cart {
		display: flex;
		/* Cart Flex Container */
		flex-direction: row;
		/* Switch the flex direction */
		flex-wrap:wrap; 
		/* Wrap the elements if there are too many added */ 
		justify-content: center;
		/* Center the elements in the container */ 
	}
	#sAndH {
		display: flex; 
		/* Flex container for the shipping options and total */ 
		flex-direction: column;
		/* Flex direction column so they will stack */ 
	}
	select {
		margin: 6em auto 1em;
		/* Margins for the shipping options */ 
	}
	.cart-container {
		height: 375px;
		/* Specify a height for the container so the elements will be equally spaced since all images could not be perfectly converted without looking pixelated */ 
		margin: 1em 20px; 
		/* margin around the cart elements */ 
	}
}

@media(min-width: 900px) { /* Desktop Computer */ 
	#container { 
		display: flex; 
		/* Display flex container */ 
		flex-direction: row;
		 /* Change flex direction to row */ 
		flex-wrap: wrap;
		 /* Wrap the elements in the flex container */ 
		margin: 0 auto;
		 /* No margin on top or bottom and auto margins to center the container */ 
		justify-content: center;
		/* Space in the center of the container */ 
	}
	.product-group {
		width: 300px;
		/* Specific width fot the product container */
		margin: 5.5em 1.5em 0 0;
		/* Margin for the product containers */
		display: flex;
		/* Flex container */
		justify-content: space-between;
		/* Space between elements in the flex container */
		flex-direction: column;
		/* Column Flex Direction */
	}
	#cart { 
		display: flex; 
		/* Flex Container */ 
		flex-wrap: wrap; 
		/* Wrap the flex elements */ 
		flex-direction: row; 
		/* Flow the items into a row format */ 
		justify-content: center; 
		/* Center the flex content */ 
	}
	.cart-container { 
		margin: 2em 10px; 
		/* Margins around the container */ 
	}
}