body { font-family: 'Roboto', sans-serif; margin: 0 auto; } #container { margin: 20px; } header { box-shadow: 0 0 5px rgba(0,0,0,.4); padding: 20px; display: flex; } .logoIcon { width: 200px; height: 50px; background-size: 100%; background-position: center; background-repeat: no-repeat; background-image: url(http://127.0.0.1:8000/static/icons/logo.png); float: left; } .headerColumn { margin: auto; width: 33%; text-align: center; } .headerColumn a { text-decoration: underline; } .cartIcon { width: 30px; height: 30px; background-size: 100%; background-position: center; background-repeat: no-repeat; background-image: url(http://127.0.0.1:8000/static/icons/shopping-cart.png); float: right; } .cartItems { background-color: #d6dae2; position: absolute; padding: 3px; top: 19px; padding-left: 7px; border-radius: 3px; padding-right: 7px; font-size: small; right: 9px; color: white; } a { text-decoration: none; color: black; } .categoryTile, .productTile { width: 200px; height: 200px; display: inline-flex; box-shadow: 0 0 5px rgba(0,0,0,.4); margin-right: 20px; margin-bottom: 20px; border-radius: 5px; text-align: center; } .categoryTileContent { margin: auto; font-size: 24px; } .categoryIcon { width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; background-position: center; margin: 10px auto; background-repeat: no-repeat; } .productTile { width: 350px; height: 350px; } .productIcon { width: 250px; height: 250px; background-size: 100%; background-position: center; margin: auto; background-repeat: no-repeat; } .productPrice { font-size: 20px; color: gray; } .productDescription { margin: 0 auto; width: 770px; height: 500px; text-align: center; display: flex; } .productDescriptionColumn { width: 50%; height: 100%; display: inline-flex; } .productDescriptionContent { margin: auto; } .productDescriptionIcon { width: 350px; height: 350px; background-size: 100%; background-position: center; margin: auto; background-repeat: no-repeat; } .productDescriptionText { margin: auto; } input[type="number"] { text-align: center; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.4); border: none; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; } input[type="button"] { background-color: #1d9d00; border: none; padding: 20px; padding-bottom: 5px; padding-top: 5px; border-radius: 10px; color: white; } .cartItem, .checkoutSummary { width: 90%; display: flex; text-align: center; margin: 20px auto; border-bottom: 1px solid rgba(0,0,0,.4); } .checkoutSummary { width: 50%; } .checkoutPayment { margin: 0 auto; text-align: center; } .cartItemColumn { width: 20%; margin: auto; } input[type="text"] { padding: 3px; margin-bottom: 3px; } .checkoutSummaryColumn { width: 50%; margin: auto; } .cartItemIcon { width: 90%; width: 50px; height: 50px; background-size: 100%; background-position: center; background-repeat: no-repeat; margin: auto; } .productUnavailable { color: red; font-size: 20px; }