

 
 
 
 p, label, input, select, button { 
   font-size: 1.5rem; 
 } 
 
 
 
 aside { 
   flex: 3; 
 } 

 
 main { 
   flex: 7; 
 } 
 
 
 /* Form styling */ 

 
 aside { 
   display: flex; 
   flex-flow: column; 
   align-items: stretch; 
} 
 
 
 aside div { 
   margin-bottom: 20px; 
 } 
 
 
 label, select, input { 
   display: block; 
 } 
 
 
 label { 
   margin-bottom: 5px; 
 } 
 
 
 select, input, button { 
   width: 50%; 
 } 
 


label, select, input { 
   display: block; 
} 
 
 
 label { 
  margin-bottom: 5px; 
 } 
 
 
 select, input, button { 
   width: 100%; 
 } 
 
 
 input { 
   background: black; 
   box-shadow: inset 1px 1px 1px white; 
   color: yellow; 
   border: none; 
  padding: 5px; 
   width: 201.5px; 
 } 
 
 
 button { 
  background: black; 
  color: yellow; 
  padding: 5px 0; 
   border: none; 
   border-radius: 10px; 
   box-shadow: inset 1px 1px 2px white, inset -1px -1px 2px #ccc; 
 } 
 
 
 /* Styling the products */ 

 
 main { 
  display: flex; 
  flex-flow: row wrap; 
   justify-content: space-around; 
 } 
 
 
 section { 
   width: 45%; 
   margin: 5px; 
   background-color: black; 
   position: relative; 
   height: 215px; 
} 
 
 
 section img { 
  width: 100%; 
  display: block; 
  position: absolute; 
   bottom: 0px; 
 } 
 
 
 section p { 
  color: yellow; 
  background: black; 
   width: 50px; 
   height: 50px; 
   line-height: 50px; 
   text-align: center; 
   border-radius: 50%; 
   box-shadow: 2px 2px 1px yellow; 
   position: absolute; 
   right: 10px; 
   bottom: -6px; 
   z-index: 2000; 
 } 
@media screen and (max-width: 800px){ 
 
 
   aside { 
    grid-row: 1; 
     border-right: none;     
     border-bottom: 5px solid black;     
   } 
   input{ 
     width: calc(100% - 5px); 
     padding: 5px 0 5px 5px; 
   } 
   main { 
    grid-row: 2; 
   } 
 
