@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');


/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
  --clr-primary-100: hsl(193, 38%, 86%);
  --clr-primary-300: hsl(150, 100%, 66%);
  --clr-primary-700: hsl(217, 19%, 38%);
  --clr-primary-800: hsl(217, 19%, 24%);
  --clr-primary-900: hsl(218, 23%, 16%);

  --fs-body: 28px;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --ff-body: 'Manrope', sans-serif;
}

body {
  max-width: 1440px;
  width: 90%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-primary-900);
  font-family: var(--ff-body);
  margin-inline: auto;
}



.advice {
  background-color: var(--clr-primary-800);
  text-align: center;
  position: relative;
  border-radius: 7px;
  padding: 1em;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.advice__number {
  color: var(--clr-primary-300);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: var(--fw-700);
  margin: 1.2em 0 1.4em 0;
  font-size: 0.8rem;
}

.advice__text {
  font-size: 1.7rem;
  color: var(--clr-primary-100);
  font-weight: var(--fw-700);
  margin: 1em 0;
  line-height: 1.3;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

.advice__pattern-divider {
  margin: 1.2em 0;
}

.advice__icon-dice {
  position: absolute;
  background-color: var(--clr-primary-300);
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0;
  border: none;
  cursor: pointer;
  top: 100%;
  right: 50%;
  transform: translate(50%, -50%);
}

.advice__icon-dice:hover {
  box-shadow: 0px 7px 35px -1px var(--clr-primary-300);
}

.pattern-divider-desktop {
  display: none;
}

.pattern-divider-mobile {
  width: 100%;
}

.attribution {
  margin-top: 5em;
  color: var(--clr-primary-700);
  text-align: center;
}

.attribution a {
  text-decoration: none;
  color: var(--clr-primary-100);
}

@media (min-width: 768px) {
  .advice {
    width: 50%;
    padding: 2.5em;
  }

  .pattern-divider-desktop {
    display: block;
    width: 100%;
  }

  .pattern-divider-mobile {
    display: none;
  }

  .advice__icon-dice {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}