:root {
/*Color variables */
--Grey-900: hsl(217, 19%, 35%);
--Grey-500: hsl(214, 17%, 51%);
--Grey-400: hsl(212, 23%, 69%);
--Grey-200: hsl(210, 46%, 95%);
--White: hsl(0, 100%, 100%);

/*Font Variables */
--fw-regular: 500;
--fw-bold: 700;

}

/*styling settings */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "manrope", serif;
}

html, body {
    height: 100%;
    background-color: var(--Grey-200)
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: 100%;
    width: auto;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  /*General content styling */

 /*font styling */

  h1 {
    color: var(--Grey-900);
    font-weight: var(--fw-bold);
    line-height: 130%;
    letter-spacing: .016rem;
    font-size: 1.25rem;
  }

  h2 {
    color: var(--Grey-900);
    line-height: 140%;
    letter-spacing: 0.12%;
    font-size: .813rem;
    font-weight: var(--fw-bold)
  }

  .furniture__content p {
    color: var(--Grey-500);
    line-height: 140%;
    letter-spacing: 0.12%;
    font-size: .813rem;
    font-weight: var(--fw-regular);
    padding: 1.5em 0em;
    padding-bottom: 2.5em;

  }

  .creator__details p {
    color: var(--Grey-400);
    line-height: 140%;
    letter-spacing: 0.12%;
    font-size: .813rem;
    font-weight: var(--fw-regular);
  }

  /*body styling */

  body {
    display: grid;
    place-content: center;
    padding: 1.5em;
  }

  .furniture {
    background-color: var(--White);
    border-radius: 10px;
    overflow: hidden;
    /* adding display:grid for media query */
    display: grid;
    max-width: 725px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
  }



  .furniture__container {
    padding: 2em;
    padding-bottom: 0em;
   
  

  }
  

  .creator {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    padding: 1.5em 0em;
    padding-bottom: 1em;
  }

  .creator__headshot {
    align-self: flex-end;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
  }

    .creator__arrow {
        align-self: center;
        background-color: var(--Grey-200);
        padding: .6em;
        border-radius: 50%;
    }

    .cheat__arrow {
      align-self: center;
        background-color: var(--Grey-500);
        padding: .6em;
        border-radius: 50%;
    }
    
    /* makes makes the arrow icon white when clicked */
    .cheat__arrow img {
      filter: brightness(0) invert(1);
    

    }
    
    .creator__details {
        padding-right: 2.5em;
        align-self: center;
    }

    button {
      border: none;
      cursor: pointer;
  
    }

    .creator__2 {
      display: none;
      background-color: var(--Grey-900);
      padding: 1em;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .share {
      display: flex;
      place-content: center;
      align-items: center;
      gap: 1em;

    }

    .share__text {
      color: var(--Grey-400);
      text-transform: uppercase;
      letter-spacing: .2em;
      font-size: .813rem;
      margin-right: .7em;
    }

    .fbook {
      height: 20px;
      width: 20px;
    }

    .twitter {
      width: 20px;
      height: 16px;
    }

    .pin {
      width: 20px;
      height: 20px;
      margin-right: 3em;
    }

    .arrowContain {
      display: none;
    }


        


    /*adding media query */
    @media (min-width: 670px) {
      .furniture {
        grid-template-columns: repeat(5, 1fr);
        overflow: visible;
      }

      
      .furniture__img {
        grid-column-start: 1;
        grid-column: span 2;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
      }

      .furniture__container {
        grid-column-start: 3;
        grid-column: span 3;
      }





      /*
        .furniture {
            grid-template-columns: repeat(3, 1fr);
    
        }
        
        .furniture__container {
            grid-column: span 2;
        } 

        */

        .creator__details {
          padding-right: 8em;
          align-self: center;

      }

      .creator {
        padding-bottom: 2em;
        padding-top: 0em;
      }

      .arrowContain {
        position: relative;
        display: none;

    
      }

      .creator__2 {
        display: none;
      }
  
      /* position abosulte allows us to put pop up where its needed - also need to set it's parent container's position to relative*/
      .creator__3 {
        display: flex;
        background-color: var(--Grey-900);
        padding: 1em;
        border-radius: 10px;
        margin: 0em 5em;
        position: absolute;
        left: 150px;
        bottom: 25px;
      
        
      
      
      }
  
      .share2 {
        display: flex;
        place-content: center;
        align-items: center;
        gap: 1em;
        padding-left: 3em;
      }
  
      /* creates down pointing arrow on share box */
      .arrowL {
        width: 0;
        height: 0;
        border-top: 10px solid var(--Grey-900);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        margin-left: 320px;
        position: absolute;
        left: 0px;
        bottom: 15px;
      }
  
    }