/** Stylings **/

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

:root {
--Family: 'Manrope', sans-serif;               /**Font Family**/
--Weight--: 800;
--Font-size--: 18px;
--Light-Cyan--: hsl(193, 38%, 86%);                     /**Colors Primary & Neutral **/
--Neon-Green--: hsl(150, 100%, 66%);
--Grayish-Blue--: hsl(217, 19%, 38%);
--Dark-Grayish-Blue--:hsl(217, 19%, 24%);
--Dark-Blue--: hsl(218, 23%, 16%);
}

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

body {
background-color:var(--Dark-Blue--);
font-family: var(--Family);
}

.container {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 2em;
  margin: auto;
  background-color: var(--Dark-Grayish-Blue--);
  border-radius: 3rem;
  width:600px;
}

.card {
  padding: 1em;
  margin: 0.5em;
}

.advice-number{
  color: var(--Neon-Green--);
  padding: 5px;
  margin:5px
}

.advice-text {
  padding: 15px;
  margin: 10px;
  color: var(--Light-Cyan--);
}

img {
  max-width: 100%;
  height: auto;
}

.divider {
  padding: 1em;
  margin: 0.5em;
}

button {
  padding: 1em;
  margin: 3px;
  border-radius: 2em;
  background-color: var(--Neon-Green--);
}

footer {
  display: flex;
  justify-content: center;
  padding: 2rem;
  margin:1rem;
}

/* Mobile: 375px;
 Desktop: 1440px; */