@font-face {
  font-family: logo;
  src: url(Blacksword.otf);
}
* {
  margin: 0px;
  padding: 0px;
  font-family: 'Rajdhani', sans-serif;
}
body {
  background-image: url(lima.jpg);

  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
/* ------------- H E A D E R ------------ */
header {
  background-color: #4c5273;
  display: block;
  position: fixed;
  width: 100%;
}
header > div {
  flex: 1;
  display: flex;
}
header span {
  font-family: logo;
  font-size: 2rem;
  margin: 1rem;
  color: white;
}
header nav {
  display: flex;
}
header ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}
header ul li a {
  font-size: 1.75rem;
  padding: 0.5rem 1rem;
  display: block;
  margin: auto 1rem;
}
header a {
  text-decoration: none;
  color: white;
}
ul li a:hover {
  background-color: white;
  color: #4c5273;
}
.relleno {
  flex: 1;
}

.regulador {
  height: 6.4rem;
}

#boton_menu {
  display: none;
  border-style: none;
  /* width: 6.1rem; */
  background-color: #4c5273;
  font-size: 1.75rem;
  align-items: center;
  padding: 0px 1rem;
}
header svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: 1;
}
#boton_cuenta {
  display: flex;
  background-color: #d94b2b;
  border-style: none;
  /* width: 6.1rem; */
  font-size: 1.75rem;
  align-items: center;
  padding: 0px 1rem;
}
#menu_oculto {
  display: none;
}
#menu_oculto ul {
  display: block;
}
#cuenta_oculto {
  display: none;
  background-color: #d94b2b;
  justify-content: flex-end;
}
#cuenta_oculto ul{
  display: block;

  text-align: right;
}

/* ------------- M A I N ------------ */
main {
  /* background-color: #555555; */
  height: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
}
main > div {
  padding: 0rem 1rem;
  flex: 1;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
}
section {
  /* background-color: #555555; */
}
article {
  padding: 1rem;
  padding-bottom: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
section article {
  background-color: white;
}
aside article {
  background-color: #7394BF;
  color: white;
}

/* ------------- F O O T E R ------------ */
footer {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: black;
}
footer > div {
  max-width: 1024px;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
footer a {
  text-decoration: none;
  color: white;
}
footer ul {
  list-style-type: none;
}
footer {
  color: white;
}
footer section {
  background-color: black;
}
.final {
  grid-column: 1/4;
  text-align: center;
}





/* ------------- M E D I A S - Q U E R Y S ------------ */

@media (max-width: 1440px) {
  header ul li a {
    margin: 0px;
  }
  .micuenta ul {
    display: block;
  }
  /* .micuenta ul li a {
    font-size: 1rem;
    padding: 0.25rem 2rem;
  } */
}
@media (max-width: 960px) {
  header ul li a {
    font-size: 1.25rem;
  }
  .micuenta ul li a {
    font-size: 1.25rem;
    padding: 0.25rem 2rem;
  }
}
@media (max-width: 768px) {

  #boton_menu {
    display: flex;
  }
  .relleno {
    display: none;
  }

  header nav span {
    width: 100%;
    text-align: center;
  }
  header nav {
    width: 100%;
  }
  header nav ul {
    display: none;
  }

  main > div {
    grid-template-columns: 1fr;
    grid-gap: 0px;
  }
  footer div {
    grid-template-columns: 1fr 1fr;
  }
  footer .final {
    grid-column: 1/3;
  }
}
@media (max-width: 425px) {
  footer div {
    grid-template-columns: 1fr;
  }
  footer .final {
    grid-column: 1/2;
  }
  .micuenta ul li a {
    padding: 0.25rem 1rem;
  }
  header button {
    padding: 0.25rem 1rem;
  }
}
@media (max-width: 360px) {
  header span {
    font-size: 1.75rem;
  }
  .regulador {
    height: 5.9rem;
  }
}
@media (max-width: 320px) {
  .regulador {
    height: 8.5rem;
  }
}