Elektromarket/static/css/style.css

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: 25px;
}

.categoryIcon {
   width: 50px;
   height: 50px;
   background-size: 100%;
   background-position: center;
   margin: 10px auto;
}

.productTile {
   width: 350px;
   height: 350px;
}

.productIcon {
   width: 250px;
   height: 250px;
   background-size: 100%;
   background-position: center;
   margin: auto;
}

.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;
}