/* TIPOGRAFÍAS */

@font-face {
  font-family: "MiFuente";
  src: url("../assets/fonts/TuFuente-Regular.ttf");
}

:root {
  --cream: #f8f4ec;
  --pink: #f7c6d9;
  --orange: #f4a261;
  --yellow: #f6d365;
  --green: #9cc9b8;
  --blue: #8ecae6;
  --text: #4b3f3f;
}

/* RESET */

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

/* BODY */

body {
  font-family: "MiFuente", sans-serif;
  background: var(--cream);
  color: var(--text);
}

.story-navigation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 5% 8%;

}

.nav-story {

  text-decoration: none;

  background: white;

  padding: 1rem 2rem;

  border-radius: 50px;

  color: var(--text);

  transition: 0.3s ease;

}

.nav-story:hover {

  transform: translateY(-5px);

  background: var(--orange);

  color: white;

}

body {

  animation: fadeIn 0.6s ease;

}

@keyframes fadeIn {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}