@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --clr-black: hsl(0, 0%, 0%);
  --clr-dark: hsl(253, 69%, 8%);
  --clr-light: hsl(0, 0%, 100%);

  --clr-dark-gray: hsl(0, 0%, 42%);
  --clr-gray: hsl(0, 2%, 78%);
  --clr-light-gray: hsl(260, 8%, 92%);

  --clr-pink: hsl(337, 80%, 57%);
  --clr-pink-dark: hsl(337, 80%, 47%);

  --clr-purple: hsl(264, 98%, 45%);
  --clr-blue-dark: hsl(251, 72%, 34%);
  --clr-blue-dark2: hsl(251, 100%, 8%);

  --clr-green: hsl(173, 71%, 50%);
  --clr-dark-green: hsl(173, 71%, 39%);
  
  --ff-sans: "DM sans", sans-serif;
  --ff: "Michroma";
}

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

body{
background-color: var(--clr-blue-dark2);
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  /* ➩ Supprime les marges externes */
  margin: 0;
}

/* Reset liste */
ul,
ol {
  /* ➩ Supprime le padding */
  padding: 0;

  /* ➩ Supprime les puces des éléments de liste */
  list-style: none;
}

/* link */
a,
a:active,
a:visited {
  /* ➩ Supprime le soulignement des liens */
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture,
svg {
  /* ➩ l'image responsive : occupe 100% max de la taille du parent  */
  max-width: 100%;
} 

.Menu{
    margin: auto;
    padding: 10rem 0;
    font-family: var(--ff-sans);
    color: var(--clr-light);
    text-align: center;
    background-color: var(--clr-blue-dark2);
}

.Menu__title{
  font-family: var(--ff);
  max-width: 12ch;
  margin: 0 auto;
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: 2.6px;
  margin-bottom: 3rem;
}

.Menu__name{
    max-width: 35ch;
    margin: 2rem auto;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.5;
}

.Menu__btn{
    margin-top: 5rem;
}

.Menu__desc {
  color: var(--clr-light);
  padding: 0.75rem 1.5rem;
  border-radius: 6.25rem;
  background: var(--clr-purple);
  width: 10rem;
  margin: 1rem;
  
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
  
.Menu__desc:hover {
  background-color: var(--clr-light);
  color: var(--clr-purple);
}

@media (max-width: 48rem) {
    .Menu__btn{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 3rem;
    }

    .Menu__desc {
        font-size: 0.825rem;
      }
}