/*Tema oscuro o noche:*/
:root{
  --primary-color:rgb(28, 28, 28);
  --secondary-color:rgb(39, 39, 39);
  --special-color:rgb(187, 255, 0);
  --special-hover:rgb(187, 255, 0);
  --special-hover-reverse:rgb(193, 247, 45);
  --title-color:rgb(242, 242, 242);
  --text-color:rgb(177, 177, 177);
  --font-family:Arial, Helvetica, sans-serif;
}
*,*:after,*:before{
  box-sizing: border-box;
}
html{
  font-size:62.5%;
  box-sizing: border-box;
}
body{
  position: relative;
  font-size:16px;
  display:flex;
  flex-flow:column wrap;
  min-height: 100vh;
  font-family:var(--font-family);
  background-color:var(--primary-color);
  color:var(--title-color);
}
/*Globales*/
h1,h2,h3,h4,h5{
  color:var(--title-color);
  margin:1rem 0;
  line-height:1.5;
}
h1{
  font-size:4rem;
}
h2{
  font-size:3.2rem;
}
h3{
  font-size:2.8rem;
}
h4{
  font-size:2rem;
}
a{
  text-decoration:none;
  color:inherit;
}
/*Clases utilitarias*/
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.anchor-complete > *{
  width:100%;
}
.anchor-complete >*> *{
  width:90%;
  display:block;
  margin:auto;
  max-width:1200px;
}
.title{
  font-size:2.5rem;
  color:var(--title-color);
  line-height:1.5;
}
.sub-title{
  font-size:1.9rem;
  color:var(--title-color);
  line-height:1.5;
}
.none{
  display:none;
}
.text{
  font-size:1.5rem;
  line-height:1.5;
  color:var(--text-color)
}
.btn{
  width:100%;
  font-size:1.7rem;
  padding:0.7rem;
  border-radius:0.4rem;
  border:none;
  background:none;
  font-weight: bold;
  cursor:pointer;
  border:1px solid rgba(255, 255, 255, 0);
}
@media screen and (min-width: 400px){
  .btn{
    width:auto;
  }
}
.btn-theme{
  color:var(--title-color)
}
.btn svg{
  height:1em;
}
.btn-normal{
  background-color:var(--special-color);
  transition:all .3s ease-out;
  color:var(--primary-color) !important;
}
.btn-normal:hover{
  background-color:var(--special-hover);
}
.btn-transparent{
  border-color: var(--special-color);
  color: var(--special-color);
}
.btn-transparent:hover{
  background-color: var(--special-color);
  color:var(--primary-color);
}
.btn-light{
  background-color:var(--special-color);
  color:var(--primary-color);
}
.btn-light:hover{
  box-shadow:0px 0px 7px var(--special-color);
}
.form{
  width:100%;
  max-width:40rem;
}
.form .--textarea,
.form__camp{
  width:100%;
  margin-bottom:2rem;
  padding:0.8rem 1rem;
  font-size:1.5rem;
  font-family:sans-serif;
  border:none;
  border-radius:0.4rem;
}
.form__camp:focus{
  outline:none;
}
.form .--textarea{
  resize:none;
  height:20rem;
}
.form div{
  margin-bottom:2rem;
}
input[type="file"] {
  display:none;
}
.--file{
  width:100%;
  margin-bottom:2rem;
  padding:0.8rem 1rem;
  font-size:1.5rem;
  font-family:sans-serif;
  border:none;
  border-radius:0.4rem;
  display:inline-block;
  background-color:#fff;
  color:rgb(88, 88, 88);
  cursor:pointer;
}
.nav{
  background-color:var(--secondary-color);
}
.nav > *{
  display:flex;
  gap:2rem;
  justify-content:space-between;
  height:100%;
  flex-flow:row wrap;
  padding:1.2rem;
  align-items:center;
}
.nav__title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  cursor: pointer;
}
.nav__title h1{
  margin:0;
  font-size:3rem;
}
.nav__title *{
  display:inline-block;
}
.nav__title img{
  height:5rem;
}
.nav__links{
  width:100%;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  gap:1rem;
}
@media screen and (min-width:1200px) {
  .nav__title{
    width:auto;
    gap:1rem;
  }
  .nav__links{
    width:auto;
  }
}
.nav__link{
  text-align:center;
  padding:1rem;
  font-size:1.5rem;
  font-weight: bold;
  border-radius:0.4rem;
  transition:background-color .3s ease-out;
}
.active,.nav__link:hover{
  background-color:var(--special-color);
  color:var(--primary-color);
}
@media screen and (min-width:1200px){
  .nav__links{
    flex-direction:row;
  }
}
.footer{
  width:100%;
  background-color:var(--secondary-color);
  text-align:center;
  font-weight:bold;
  display:flex;
  align-items:center;
  padding:1.5rem;
}
.footer h5{
  margin:0;
}
.post{
  cursor:pointer
}
/*Desarrollo Cuztomizado*/
main{
  flex-grow:1;
}
.post-container{
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(250px, 1fr));
  gap:2rem;
  padding-top:2rem;
  padding-bottom:3rem;
}
@media screen and (min-width:700px) {
  .post-container{
    grid-template-columns:repeat(3,1fr);
  }
}
@media screen and (min-width:1000px) {
  .post-container{
    grid-template-columns:repeat(4,1fr);
  }
}
.post{
  position:relative;
  max-width:100%;
  overflow:hidden;
  border-radius:0.4rem;
}
.post__img-container{
  position: relative;
  width:100%;
  height:30rem;
}
.post img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.post figcaption{
  width:100%;
  background-color:rgb(46, 46, 46);
  font-size:1.6rem;
  font-weight:bold;
  text-align:center;
  padding:1rem;
}
#indexer{
  margin-right:0;
  margin-left: auto;
  margin-top:2rem;
  display:block;
  max-width:30rem;
  padding:1rem;
  background:var(--secondary-color);
  border:none;
  font-size:1.5rem;
  color:var(--text-color);
  border-radius:0.4rem;
}
#indexer:focus{
  outline:none;
  outline:2px solid var(--special-color);
}
@media screen and (max-width:600px) {
  #indexer{
    margin-left:0;
    margin-right:auto;
  }
}
@media screen and (max-width:400px) {
  #indexer{
    width:100%;
  }
}