/*ALWAYS, IN EVERY ¨PROEJCT USE A CSS RESET*/
/*wHAT IS A RESET?*/
/*Every browser by default has some browser stylesheet, that's why your h1 big and bold is without writing any line of css
it has also padding and margins arround it, for more control over this things, you will need a reset*/
/*LOOK ON ANDY BELL HIS WEBSITE FOR A GOOD AND CLEAR ONE WITH EXPLANATION*/
/*https://andy-bell.co.uk/a-modern-css-reset/*/




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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
VARIABLES
Used for easy maintance and makes writing your code easy
*/

:root{
  --Dark-cyan: hsl(158, 36%, 37%);
  --Cream: hsl(30, 38%, 92%);
  --Very-dark-blue: hsl(212, 21%, 14%);
  --Dark-grayish-blue: hsl(228, 12%, 48%);
  --White: hsl(0, 0%, 100%);
  --hover: #1A4032;
}

body {
  background-color: var(--Cream);
  /*Align my box in the middle of the viewport with flex*/
  
  /* display: flex;
  justify-content: center;
  align-items: center; */
 
  /*Align my box in the middle of the viewport with grid*/
  display: grid;
  place-content: center;
  /*place content = short hand for: 
  -justify-content:center 
  -align-content:center 
  */
}

/*I start always mobile-first, that makes it easy to create the tablet and desktop designs!!*/

.wrapper {
  margin: 1rem;
  max-width: 21.4375rem;
  font-family: 'Montserrat', sans-serif;
  color:var(--Dark-grayish-blue);
  border-radius: 10px;
  background-color: var(--White);
}

.product__image{
  border-radius: 10px 10px 0 0;
}

.product__info{
padding:1rem;
}

.ribbon__text {
  text-transform: uppercase;
  letter-spacing: 0.3125em;
  /*always calcuate px to rem for font-sizes (22/16)*/
  /* https://fedmentor.dev/posts/font-size-px/ here is a clear explanation why this is a good idea!*/
  font-size: 0.75rem;
  font-weight: 500;
}

.title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--Very-dark-blue);
  line-height: 2rem;
  margin-block-start: 0.75rem;
  margin-block-end: 1rem;

}

.description {
  color: var(--Dark-grayish-blue);
  font-weight: 500;
  font-size: 0.875rem;
}

.flex__container{
  display: flex;
  align-items: center;
  gap: 1.1875rem;
}

.product__info__new__price {
  color:var(--Dark-cyan);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 2rem;
  margin-block-start: 1.5rem;
  margin-block-end: 1.25rem;
}

.product__info__old__price {
  font-weight: 500;
  font-size: 0.8125rem;
}

.flex__container__btn {
  display: flex;
  gap: 11.61px;
  background-color: var(--Dark-cyan);
  max-width: 18.4375rem;
  padding: 0.9375rem  5.75rem;
  color:var(--White);
  font-size: 0.875rem;
  border: none;
  border-radius: 8px;
}

.flex__container__btn:hover{
  background-color: var(--hover);
}

@media screen and (min-width:64rem) { /* only add media query's for tablet and desktop*/

  .wrapper {
    max-width: 37.5rem;
    display: flex;
  }

  .product__image {
    min-height: 100%;
    border-radius: 10px 0px 0px 10px;
  }

  .product__info {
    padding: 2rem;
    max-width: 50%;
  }

  .title {
    margin-block-start: 1.25rem;
    margin-block-end: 1.5rem ;
  }

  .description {
    line-height: 1.4375rem;
  }

  .product__info__new__price{
    margin-block-start: 1.8125rem ;
    margin-block-end: 1.875rem ;
  }

  .flex__container__btn {
    max-width: 14.75rem;
    padding: 0.9375rem 3.875rem;
  }


}