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

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