@import url('https://fonts.googleapis.com/css?family=Domine:400,700|Montserrat:100,300,400,600,900');

:root {
    color-scheme: light dark;



    --space-0: 4px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;

    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-4xl: 3rem;

    --button-border-radius: 8px;

    --badge-border-radius: 4px;
    --badge-padding-inline: 8px;
    --badge-padding-block: 4px;

    --quantity-badge-size: 40px;

}

/* RESET */

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

*:not(dialog) {
    margin: 0;
}

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

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

p {
    text-wrap: pretty;
    margin-block: var(--space-2);
}

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

/* product name */
h3 {
    margin-bottom: var(--space-1);
}

#root,
#__next {
    isolation: isolate;
}

/* END RESET */


body {
    font-family: 'Domine', serif;
    width: 600px; 
    margin: 0 auto;
    background-color: #F4EFE5;
    color: rgb(76, 38, 10);
    ;
}

@media (max-width: 1000px) {
  body {
    width: 100%;
    padding: 15px;
  }
}