style.css

:root {
    --blue: rgb(0, 113, 133);
    --bluewhite: rgb(84, 179, 196);
    --green: rgb(0, 118, 0);
    --yellow: rgb(255, 216, 20);
    --yellowhite: rgb(253, 227, 96);
    --orange: rgb(255, 164, 28);
    --orangewhite: rgb(247, 173, 62);
   }
   
   .back {
     color: var(--blue);
     font-size: 23px;
     cursor: pointer;
     transition: opacity 150ms;
   }
   
   .back:hover {
    opacity: 0.8 ;
   }

   .back:active {
    opacity: 0.7;
   }

   #stock {
     font-size: 22px;
     font-weight: bold;
     color: var(--green);
     margin-top: 40px;
   }
   
   h1 {
     margin-top: 40px;
   }
   
   #delivery {
     font-size: 20px;
   }
   
   #cart {
     height: 40px;
     width: 150px;
     border-radius: 20px;
     border: none;
     background-color: var(--yellow);
     font-size: 16px;
     font-weight: 550;
     cursor: pointer;
     transition: background-color 200ms, font-size 100ms, opacity 300ms, box-shadow 300ms;
     
     
   }
   

   #buy:hover {
    background-color: var(--orangewhite) ;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(196, 173, 173, 0.507);
   }
   #cart:hover {
    background-color: var(--yellowhite) ;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(196, 173, 173, 0.507);
   }

   #buy:active {
    opacity: 0.7;
   }
   #cart:active { 
    opacity: 0.7;
   }

   #buy {
     margin-left: 8px;
     height: 40px;
     width: 150px;
     border-radius: 20px;
     border: none;
     background-color: var(--orange);
     font-size: 16px;
     font-weight: 550;
     cursor: pointer;
     transition: background-color 200ms, font-size 100ms, opacity 300ms, box-shadow 300ms;
   }