@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

* {
 box-sizing: border-box;
}

:root {
  --color-fondo: hsl(35, 100%, 93%);
  --color-principal: hsl(321, 76%, 82%);
  --color-secundario: hsl(42,86%, 68%);
  --color-contraste: hsl(5, 93%, 58%);
  --color-textos:hsl(0, 2%, 10%);
  --sombra:hsl(0, 2%, 10%); 
  --espacio-chico: 1rem;
  --espacio-medio: 1.5rem;
  --fuente-textos: "Bricolage Grotesque", sans-serif;
  --fuente-titulos: "Bricolage Grotesque", sans-serif;
}

header{
  background: var(--color-fondo);
}

body {
  background: var(--color-fondo);
  padding: 2rem;
  font-family: var(--fuente-titulos);
  color: black;}

  ul {
    list-style: none;
  }

.menu{
  display: flex;
  background-color: var(--color-contraste);
  border-radius: 8px;
}

  .navegacion{
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 5, 10%;
}

.navegacion li{
  display: inline-block;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px 5%;
}

.navegacion a{
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-weight: 400px;
  color: var(--color-textos);
}

.btn button{
font-family: var(--fuente-textos);
font-weight: 600px;
color: var(--color-textos);
padding: 9px 20px;
background: var(--color-principal);
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease 0s;
}

figure img{
  max-width: 100%;
}

.container div { 
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;}

.card{
  background: var(--color-principal);
  width: 300px;
  margin: auto;
  margin-top: 50px;
  padding: 20px 10px;
  box-shadow: 4px 4px 8px 0 rgb(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 8px;}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.container {
  padding: 2px 16px;}

article{
width: 100%;
padding: 1rem;
margin-bottom: 1.5rem;}


footer{
background: pink;
width: 100%;
padding: 1rem;
border-radius: 8px;
margin: bottom 0;}