@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}

body {
  background-color: rgb(255, 255, 255);
  justify-content: space-between;
  flex-direction: column;
}

header,
footer {
  background-image: linear-gradient(180deg, #7052ac, #c3b7db);
  color: rgb(0, 0, 0);
  padding: 1em;
  height: 100%;
  font-size: 10px;
  text-align: center;
  width: 12vm;
}

.hola {
  position: absolute;
  background-color: #c3b7db;
  width: 100%;
  height: 10em;
  z-index: -1;
  box-shadow: 0px 0px 5px 5px #808080;
}

.menumobile.active {
  box-shadow: 0px 0px 5px 5px #808080;
}

.contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: right;
}

input {
  padding: 0.2em;
  width: 100%;
}

input[type=submit] {
  display: block;
  padding: 5px 15px;
  background: #7052ac;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 21em;
  margin-top: 2em;
  color: white;
  margin-inline: auto;
}

input[type=file] {
  padding: 5px 15px;
  background: #7052ac;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-top: 2em;
}

table{
  margin: auto;
  width: 100%;
}

img {
  margin: 0 0 0 0;
  align-items: center;
  max-width: 100%;
}

#logoweb {
  width: 15%;
}

nav {
  width: 65%;
  text-transform: uppercase;
}

span {
  color: grey;
}

header {
  position: sticky;
  top: 0;
  margin: 0;
  width: 100%;
}

header {
  justify-content: space-between;
  box-shadow: 0px 0px 5px 5px #808080;
}

header.completo{
  box-shadow: none;
}

.menu a {
  color: rgb(0, 0, 0);
  display: block;
  text-align: left;
  font-size: 15px;
  padding: 10px;
}

header nav ul {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
}

a {
  color: black;
  text-decoration: none;
  display: inline;
}

.titulo {
  margin-top: 1em;
}

h2 {
  margin-top: 1em;
  text-transform: uppercase;
}

h3 {
  margin-top: 1em;
}

p {
  margin-bottom: 2em;
}

ul {
  list-style-type: none;
}

nav {
  text-align: center;
}

#tiemposdorados {
  color: rgb(0, 0, 0);
  margin: 1em;
}

#productos {
  margin: 1em;
}

#coleccionesrecientes {
  margin: 1em;
  margin-bottom: 4em;
}

#coleccionesrecientes h2 {
  padding-bottom: 1em;
}

.poster {
  margin: 1em;
  border-radius: 20px 20px;
}

.poster h4 {
  text-align: center;
}

.poster img {
  border-radius: 5%;
}

#donacion {
  margin: 1em;
}

.post {
  background-color: #c3b7db;
  border-radius: 5%;
  width: 20em;
}

.descripcionpost {
  margin-inline: 1em;
  display: flex;
  align-items: center;
}

#productos {
  margin-bottom: 4em;
}

#productos h2 {
  padding-bottom: 1em;
}

.descripcionpost img {
  width: 3em;
}

.descripcionpost div {
  flex-grow: 1;
}

.post {
  margin-bottom: 2em;
}

.sobremi img {
  border-radius: 50%;
  width: 10em;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: solid 5px white;
}

.editarfoto img {
  border-radius: 50%;
  width: 10em;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: solid 5px white;
  align-self: center;
}

.editarfoto {
  text-align: center;
  margin-left: 1em;
}

.sobremi {
  margin: 1em;
  border-radius: 5%;
  width: 20em;
}

.fotoper {
  margin: 1em;
  width: 70%;
}

.posterweb img {
  width: 200em;
}

.editar {
  width: 45%;
  margin-left: 2em;
}

.compartir {
  margin-right: 2em;
}

.avatar img {
  border-radius: 50%;
  width: 5em;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: solid 2px white;
}

.postavatar img {
  border-radius: 50%;
  width: 5em;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: solid 5px #7052ac;
}

.analitics {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin: 1em;
}

.seguidores {
  border-right: solid 2px black;
  padding-right: 1em;
}

.colecciones {
  border-left: solid 2px black;
  padding-left: 1em;
}

.analitics p {
  color: grey;
}

.bioperfil {
  text-align: center;
  margin: 1em;
}

.bioperfil p {
  color: grey;
}

.bio {
  text-align: center;
  margin: 1em;
}

.bio p {
  color: grey;
  margin-top: 1em;
  border-bottom: solid 2px black;
  padding-bottom: 1em;
}

.bio h2 {
  border-bottom: solid 2px grey;
  padding-bottom: 1em;
}

#nosotros {
  margin: 1em;
}

#nosotros h2 {
  text-align: center;
  margin-bottom: 1em;
}

.sobrenosotros h2 {
  border-bottom: solid 2px black;
  padding-bottom: 1em;
}

.mejoressiam h2 {
  border-bottom: solid 2px black;
  padding-bottom: 1em;
}

.stats1 li {
  display: flex;
}

.stats1 li h4 {
  width: 30%;
}

.stats1 li p {
  width: 70%;
  text-align: right;
  font-style: italic;
}

.auto {
  font-style: italic;
  color: grey;
}

#sdt1967 {
  margin: 1em;
}

.custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px;
  webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

.ingresodedatos{
  background-color: #c3b7db;
  margin: 1em;
  border-radius: 5%;
  border: solid 5px #7052ac;
}

.registrarse {
  padding-top: 1em;
  margin-bottom: 10em;
  width: 25em;
}

.login {
  margin-bottom: 30em;
  margin-top: 10em;
  width: 20em;
}

.editarperfil {
  margin-bottom: 20em;
  margin-top: 2em;
  padding-top: 1em;
  width: 25em;
}

.editarpost {
  border-radius: 1%;
  margin-bottom: 20em;
  margin-top: 2em;
  width: 25em;
}

.tituloreg {
  text-align: center;
  margin: 1em;
}

.formulario {
  margin: 1em;
}

.yatienes {
  text-align: center;
}

.logingoogle {
  text-align: center;
  margin: 1em;
  background-color: white;
  display: flex;
  margin-inline: 5em;
  width: 15em;
  border-radius: 5%;
}

.logogoogle img {
  width: 100%;
}

.logogoogle {
  width: 2em;
}

.loginfacebook {
  text-align: center;
  margin: 1em;
  background-color: #5252a3;
  display: flex;
  margin-inline: 5em;
  width: 15em;
  border-radius: 5%;
}

.loginfacebook a {
  color: white;
}

.postosvaldo img {
  border: solid 5px white;
  border-radius: 5%;
}

.interacciones {
  display: flex;
}

.postlikes {
  width: 10%;
}

.postlikes img {
  width: 90%;
}

.postlikesnumero {
  width: 10%;
}

.postautor {
  width: 80%;
}

.fabricasiam video {
  width: 100%;
}

@media(max-width: 768px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .menumobile {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    background-color: #c3b7db;
  }

  .nav-item {
    margin: 16px;
  }

  .menumobile.active {
    left: 0;
  }

  .logogoogle img {
    width: 60%;
  }

  .registrarse {
    width: 20em;
  }

  .logingoogle {
    width: 10em;
  }

  .loginfacebook {
    width: 10em;
  }

  .loginfacebook img {
    width: 2em;
  }

  .loginfacebook h4 {
    font-size: 90%;
    margin-top: 0.5em;
  }

  .editarpost {
    width: 20em;
  }

  .editarperfil {
    width: 20em;
  }

  .compartir {
    margin-right: 1em;
  }


}

@media (min-width: 700px) {
  .productossemana {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .post {
    width: 30%;
  }

  #colecciones {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  #logoweb {
    width: 15%;
  }

  nav {
    width: 50%;
    text-transform: uppercase;
    margin-left: 3em;
    font-size: 100%;
  }

  .poster {
    margin: 1em;
    border-radius: 20px 20px;
    display: flex;
    width: 100%;
  }

  .fabricasiam video {
    width: 100%;
  }

  footer {
    font-size: 50%;
  }

  #logoweb {
    width: 10%;
  }

  .avatar {
    width: 35%;
  }

  .ditellafoto {
    width: 100%;
  }

  .postosvaldo {
    width: 100%;
  }

  .ditellafoto img {
    width: 70%;
    margin-left: 8em;
  }

  .postosvaldo img {
    width: 70%;
    margin-left: 8em;
  }

  .registrarse {
    margin-inline: 20em;
    margin-bottom: 10em;
  }

  .editarperfil {
    margin-inline: 20em;
    margin-bottom: 10em;
  }

  .editarperfil form {
    margin-left: 1em;
  }

  .editarpost {
    margin-inline: 20em;
    margin-bottom: 10em;
    width: 70em;
  }

  .login {
    margin-inline: 20em;
    margin-bottom: 10em;
  }

  .boton {
    margin-top: 0.5em;
  }

  .logogoogle {
    width: 35%;
  }

  .logogoogle img {
    width: 2em;
  }

  .sobremi {
    margin-inline: 20em;
    margin-left: 23em;
  }

  .fotoper {
    margin-left: 2em;
    width: 120%;
  }

  .custom {
    width: 30em;
    margin-left: -4em;
  }

  .compartir {
    margin-left: -1em;
  }

  .hola {
    height: 37%;
  }

  #nosotros {
    margin-inline: 5em;
  }

  #sdt1967 {
    margin-inline: 10em;
  }

}

@media (min-width: 1440px) {
  .productossemana {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .post {
    width: 25em;
  }

  #colecciones {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  nav {
    width: 50%;
    text-transform: uppercase;
    margin-left: 3em;
    font-size: 100%;
  }

  .poster {
    margin: 1em;
    border-radius: 20px 20px;
    display: flex;
    width: 100%;
  }

  .historia {
    width: 80%;
    font-size: 140%;
    text-align: center;
    margin-inline: 4em;
  }

  footer {
    font-size: 50%;
  }

  #logoweb {
    width: 5%;
  }

  .avatar {
    width: 40%;
  }

  .ditellafoto {
    width: 100%;
  }

  .postosvaldo {
    width: 100%;
  }

  .ditellafoto img {
    width: 70%;
    margin-left: 8em;
  }

  .postosvaldo img {
    width: 70%;
    margin-left: 8em;
  }

  .registrarse {
    margin-inline: 45em;
    margin-bottom: 30em;
  }

  .editarperfil {
    margin-inline: 45em;
    margin-bottom: 18em;
  }

  .editarpost {
    margin-bottom: 18em;
    display: flex;
  }

  .editarpost img {
    border-radius: 5%;
  }

  .editarfoto {
    padding-bottom: 1em;
    padding-top: 1em;
  }

  .login {
    margin-inline: 45em;
    margin-bottom: 30em;
    border-radius: 2%;
    width: 30em;
  }

  .sobremi {
    margin-inline: 40em;
    width: 40em;
  }

  .hola {
    height: 25%;
  }

  #nosotros {
    margin-inline: 30em;
    margin-bottom: 20em;
  }

  #sdt1967 {
    margin-inline: 30em;
  }

  .seguidores {
    padding-right: 3em;
  }

  .colecciones {
    padding-left: 3em;
  }

  .fotopost {
    width: 60%;
    margin-left: 1em;
    margin-block: 1em;
    border-right: solid 2px black;
  }

  .interacciones {
    margin-bottom: 2em;
  }

  .custom{
    margin-left: 6em;
  }

}