:root{
    --green-500 : hsl(158, 36%, 37%);
    --green-700 : hsl(158, 42%, 18%);
    --black: hsl(212, 21%, 14%);
    --grey: hsl(228, 12%, 48%);
    --cream: hsl(30, 38%, 92%);
   }

   *{
    margin:0;
    padding:0;
    box-sizing: border-box;
   }

   body{
      display:flex;
      align-items: center;
      justify-content: center;
      background: var(--cream);
      height:100vh;
   }

   picture{
      width:50%;
      height:auto;
   }

   img{
      width:100%;
      height:100%;
      border-radius: 15px 0 0 15px;
   }

   .card{
      background: white;
      display:flex;
      width:600px;
      height:auto;
      border-radius:15px;
   }
   
   .main-container{
      padding:30px;
      width:50%;
      display: flex;
      flex-direction: column;
   }


   h2, .price p:nth-of-type(1){
      line-height: 1;
      font-size: 2em;
      font-family: "Fraunces", serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-variation-settings:
         "SOFT" 0,
         "WONK" 0;
   }

   .price{
      display:flex;
      align-items: center;
      margin-bottom:30px;
   }

   .price p:nth-of-type(1){
      color:var(--green-500);
      font-size: 1.5em;
   }

   .price p:nth-of-type(2){
      margin-left: 30px;
   }

   .title{
      align-self: flex-start;
      margin-bottom: 20px;
      letter-spacing: 5px;
      font-weight: 700;
   }

   h2{
      margin-bottom: 25px;
   }

   .content-text{
      line-height: 1.6;
      margin-bottom:30px;
   }

   p, h1, button{
      font-size: 14px;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      color:var(--grey);
   }

   button{
      width:100%;
      padding:15px;
      border:none;
      background-color:var(--green-500);
      color:white;
      font-weight:700;
      display:flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;
      border-radius:10px;
   }

   a{
      text-decoration: none;
   }

   button:hover{
      background-color: var(--green-700);
      cursor: pointer;
   }
   
   .cart{
      width:1.3em;
      margin-right:10px;
   }

   @media (max-width: 536px){
      .card{
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }   
      .main-content{
         height:50%;
         width:100%;
      }

      .main-container{
         width:100%;
      }

      picture{
         height:50%;
         width:auto;
      }
      img{
         border-radius: 15px 15px 0 0;
      }
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   .attribution {bottom:5px; position:absolute;font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }