@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Roboto:wght@300;400;700&display=swap");

:root {
  --black: #000;
  --white: #fff;
  --grey: #9e9e9e;
  --grey-light: #bbbbbb;
  --grey-dark: #444444;
  --green: #73ad21;
  --orange: #ff9800;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}
body {
  background: var(--black);
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
header {
  background: var(--white);
  flex-direction: column;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
}
main {
  background: var(--white);
}
.title {
  display: flex;
  flex-direction: column;
  color: var(--black);
  font-size: 3.5rem;
  font-weight: 400;
  padding-top: 50px;
  margin: 0px;
  text-transform: uppercase;
  text-align: center;
}
p {
  color: var(--white);
}
.hero {
  position: relative;
  padding: 5px 4px 0px;
  background: var(--black) none repeat scroll 0% 0%;
  transform: skew(-2deg) translateY(-6px) translateY(-10px);
}
h2.primary {
  font-size: 1.875rem;
  background: var(--black);
  color: var(--orange);
  margin: 0%;
}
h2.hidden {
  background: transparent;
  font-size: 1.875rem;
  color: transparent;
  top: 4px;
  margin: 0px;
  position: absolute;
}
.title a,
.title span {
  color: var(--black);
  text-decoration: none;
}

.menu {
  text-align: center;
  padding-left: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
}
.menu li {
  padding: 15px;
  display: inline-block;
}
li#nav.active {
  border-bottom: 4px solid var(--orange);
  margin-bottom: 15px;
}
.active a {
  color: var(--orange);
  font-weight: bold;
}
.navLink {
  color: var(--black);
  text-decoration: none;
}
.navLink:active:focus {
  color: var(--orange);
}
.navLink:hover {
  list-style: none;
  color: var(--orange);
  text-decoration: none;
}
.footer {
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: var(--grey);
  min-height: calc(160px);
}
.link {
  color: var(--white);
  text-decoration: none;
  font-style: normal;
  transition: color 0.2s ease 0s;
  border-bottom: 1px solid var(--orange);
}
/* Cards Style */
.character {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 5%;
}
.character-card {
  background: #73ad21;
  max-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.625rem;
  overflow: hidden;
  margin: 15px 15px 60px;
}
.card-header {
  position: relative;
  height: 300px;
  width: 300px;
}
.card-image {
  height: 300px;
  background: url(https://rickandmortyapi.com/api/character/avatar/56.jpeg);
}
.card-image img {
  margin: 0px;
  opacity: 1;
  transition: opacity 0.5s ease 0s;
}
.character-card-title {
  width: 100%;
  opacity: 0.8;
  position: absolute;
  bottom: 0px;
  background: var(--grey-dark);
  padding: 0.625rem;
}
.character-card-name {
  color: var(--orange);
  font-size: 1.625rem;
  font-family: "Dosis", sans-serif;
  font-weight: 400;
  font-stretch: expanded;
  text-align: left;
  margin: 0px;
}
.character-card-description {
  color: var(--grey-light);
  font-family: "Dosis", sans-serif;
  font-size: 0.875rem;
  text-align: left;
  margin: 0px;
}
.card-info {
  padding: 0.25rem;
  font-size: 13px;
  padding: 1.25rem;
  padding-top: 0px;
}
.character-card-text-wrapper {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.75rem 0px 0.375rem;
  border-bottom: 1px solid var(--grey-dark);
}
/* Estilos para los botones de paginación de Characteres */
.botons {
  display: flex;
  justify-content: center;
  margin: 1.5rem;
}
.boton {
  background: var(--orange);
  color: var(--black);
  border-radius: 12px;
  padding: 14px 40px;
  border: none;
  cursor: pointer;
  margin: 5px;
}
.pages {
  padding: 10px;
}
.pagination {
  display: ruby;
  padding-left: 0px;
}
.page-item {
  text-transform: uppercase;
  list-style: none;
}
.pageLink {
  text-decoration: none;
}
.page-link {
  text-decoration: none;
}
.boton:disabled {
  background: var(--grey-dark);
  color: var(--grey-light);
  cursor: unset;
}