homework/js/js_19_redux_modul/style.css

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    padding: 10px;

}


main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}



aside {
  margin-top: 22px;
  padding-right: 10px;
}

aside a {
  text-decoration: none;
  color: white;
  background-color: rgb(170, 170, 170);
  margin-bottom: 5px;
  padding: 5px;
  transition: .2s;
  cursor: pointer;
}

aside a:hover {
  background-color: rgb(133, 133, 133);
}

h1 {
 width: 100%;
 margin: 10px;
 margin-left: 10px;
}

.card {
  display: block;
  width: calc(25% - 20px);
  margin: 10px;
  border: 1px solid grey;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: dimgray; 
  transition: .2s;
  position: relative;
}

.card:hover{  
box-shadow: 0px 0px 5px rgba(9, 110, 24, 0.5)
}


.cardImgWrapper{
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.cardImg {
  display: block;
    max-width: 100%;
    max-height: 100%;
    object-position: 50% 50%;
    object-fit: contain;

}

.cardName {
  max-width: 100%;
  font-size: 1em;
  text-decoration: none; 
}

.cardPrice {
  min-width: 80px;
  padding: 5px;
  color: white;
  background-color: rgba(0, 133, 0, 0.85);
  position: absolute;
  right: -10px;
  top: 40px;  
}

.imgSlider {
  width: calc(50% - 20px);
  padding: 10px
}

.sliderImg {
  display: block;
  max-width: 100%;
}

.asideDesriptionPriceCard {
  width: calc(50% - 20px);
  padding: 10px
}

.goodPrice {
  color:rgb(38,151,38);
  font-weight: bolder;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.goodCountInput{
  padding: 5px;
  color: rgb(38,151,38);
  width: 150px;
  font-weight: bolder;
  margin: 10px 20px 20px 0;
  border-radius: 0;

}

.goodButtonAddToCart {
  display: inline-block;
  padding: 6px 10px;
  color: white;
  background-color: rgb(38,151,38);
  width: 150px;
  font-weight: bolder;
  margin: 10px 20px 20px 0;
  transition: .2s;
  cursor: pointer;
  text-align: center;
  
}

.goodButtonAddToCart:hover {
  background-color: rgb(215, 155, 14);
}



.description {
 margin-bottom: 20px;
 margin-top: 20px;
 font-size: 1.2em;
}

.iconwrapper {
  display: block;
  width: 50px;
  padding: 5px;
  position: relative;
  color: white;
  cursor: pointer;
}

.iconwrapper img {
   max-width: 100%;
}

#cartIcon {
  position: absolute;
  bottom: 13px;
  right: -10px;
  background-color:  rgb(38,151,38);
  border-radius: 3px;
  padding: 2px;
}
/* .table_price{} */

.table_price {
  border-collapse: collapse;
  width: 100%;
}

.tdSumm{
  color: rgb(38,151,38);
  font-size: 1.5rem;
}

.table_price td, .table_price th {
  padding: 10px;
}
.table_price th {
  text-align: left;
  font-size: 18px;
}
.table_price tr:nth-child(2n) {
  background: #E5E5E5;
}
.table_price td:last-of-type {
  text-align: center;
}
.table_price a {
  display: inline-block;
  padding: 5px 10px;
  background: #F79361;
  box-shadow: 2px 2px 0 0 #a22800;
  position: relative;
}
.table_price a:hover {
  box-shadow: none;
  top: 2px;
  left: 2px;
}

.addOrder {
  padding: 5px 10px;
  background-color: #F79361;
  color: white;
  cursor: pointer;
  display: block;
  margin-top: 20px;
}

.containerSubcategoryLink {
  width: 100%;
}

.subcategoryLink {
  display: inline-block;
  text-decoration: none;
  background-color: rgb(170, 170, 170);
  color: white;
  padding: 2px 5px;
  margin: 10px 3px;
  transition: .3s;
}
.subcategoryLink:hover{
  background-color: rgb(133, 133, 133);
}

.subcategoryLink:first-child {
  margin-left: 10px;
}

.breadcrumbsContainer {
width: 100%;
}

.breadcrumbsContainer >* {
  display: inline-block;
  margin: 10px 3px;
  color: black;
}

.breadcrumbsContainer > div {
  color: rgb(189, 189, 189);
  font-weight: bolder;
}

.breadcrumbsContainer >a:hover {
  color: rgb(38,151,38);
}

#user {
  color: white;
  font-weight: bold;
}

#user > button {
  margin: 5px;
  background-color: rgb(247,147,97);
  color: white;
  transition: .3s;
  border: 0;
  padding: 3px 5px;
}

#user > button:hover {
  background-color: rgb(246, 120, 57);
}