* {
  font-family: 'Montserrat', sans-serif;
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #FAF6F1;
}

.content-modal {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  text-align: justify;
  position: absolute;
  left: 25%;
  top: 5%;
  width: 188px;
  height: 144px;
  background: blanchedalmond;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 50%);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.header-title {
  font-size: 13px;
  font-weight: 600;
}

.close-modal {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #A64C38;
  color: white;
  font-weight: bold;
  font-size: 12px;
  border: none;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 50%);
  cursor: pointer;
}
.modal-text {
  margin-bottom: 10px;
}

.modal-name {
  margin-bottom: 5px;
}

.navMenu {
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 50%;
  top: 0;
  right: 0;
  background: #Fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.navMenuHide {
  display: none;
}

.navMenuItem {
  height: 30px;
  list-style: none;
  width: 100%;
  align-items: center;
  display: flex;
}
.navMenuItem:hover{
  background-color: #F0F2F5;
}

.navMenuLink {
  text-decoration: none;
  color: #34332F;
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

.logo {
  width: 199px;
  height: 64px;
  margin-bottom: 25px;
  background: transparent;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form>.input {
  width: 176px;
  height: 30px;
  margin-bottom: 5.5px;
  margin-top: 5.5px;
  border-radius: 8px;
  border: solid 1px #C0BEBE;
  font-size: 11px;
  padding-left: 14px;
  color: #575353;
  outline-color: #575353;
  background-color: white;
}

.button {
  width: 190px;
  height: 36px;
  background-color: #34332F;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  margin-top: 5.5px;
  cursor: pointer;
}

.title-register-login {
  margin-top: 0px;
  margin-bottom: 11px;
  font-size: 20px;
  font-weight: 400;
}

#wrong-email {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 7px;
  color: red;
}

#verified-email {
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 11px;
  color: red;
}

#wrong-password,
.error-default,
#invalid-email,
#invalid-password,
#message-name {
  font-size: 7px;
  color: red;
}

form>div>p {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 7px;
}
.div-little-messages{
  width: 85%;
}

.text-bottom {
  margin-top: 11px;
  font-size: 11px;
}

.img-networks {
  width: 26px;
  height: 26px;
  margin-top: 11px;
}

.links {
  color: #2029FE;
}

#min-password {
  color: #AF8462;
  font-size: 7px;
}

#register-section,
#login-section {
  margin-top: 75px;
  display: flex;
  justify-content: center;
}

.div-contain>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-register-modal{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.register-close-modal{
  text-align: center;
  border-radius: 7px;
  background-color: #A64C38;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border: none;
  width: 100px;
  height: 30px;
}
.modal-text-register {
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.div-register-modal{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 30%;
  width: 200px;
  border-radius: 20px;
  height: 162px;
  background: white;
  padding: 15px 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 50%);
}
.image-register-modal{
  width: 40px;
  height: 40px;
}


/* Vista Welcome */

#welcome-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('./img/fondo-welcome.jpeg');
  background-size: cover;
  height: 100vh;
}

.div-contain {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div-logo {
  background: transparent;
}

.div-logo>img {
  margin-bottom: 0px;
}

#div-text-welcome {
  top: 250px;
  background: transparent;
  width: 80%;
  color: white;
  font-weight: 500;
  text-align: center;
  line-height: 23px;
  margin-bottom: 30px;
}

.div-btn {
  display: flex;
  flex-direction: column;
  background: transparent;
  bottom: 115px;
}

.div-btn>.button {
  margin-bottom: 11px;
}


/*Estos estilos son para la vista Publications*/

.div-nav {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  width: 85%;
  max-width: 400px;
  margin: 22px auto 10px auto;
  align-items: center;
}

#form-publication {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#input-title {
  height: 30px;
  border-radius: 8px;
  border: solid 1px #C0BEBE;
  font-size: 11px;
  padding-left: 14px;
  color: #575353;
  outline-color: #575353;
  background-color: white;
  width: 206px;
  margin-bottom: 11px;
}

#div-inputs-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: -7px;
}

#btn-submit {
  background-color: #A64C38;
  width: 147px;
  color: white;
  font-size: 16px;
  padding-left: 0px;
  cursor: pointer;
}

#input-description {
  height: 50px;
  border-radius: 8px;
  border: solid 1px #C0BEBE;
  font-size: 11px;
  padding-top: 8px;
  padding-left: 14px;
  color: #575353;
  outline-color: #575353;
  background-color: white;
  width: 206px;
  margin-bottom: 11px;
}

.category-state {
  display: flex;
  flex-direction: row;
  width: 220px;
  padding: 0px;
}

#input-category {
  width: 100px;
  height: 30px;
  border-radius: 8px;
  margin-bottom: 11px;
  margin-left: 0px;
  margin-right: 20px;
  border: solid 1px #C0BEBE;
  font-size: 11px;
  padding-left: 14px;
  color: #575353;
  outline-color: #575353;
  background-color: white;
}

#input-state {
  width: 100px;
  height: 30px;
  border-radius: 8px;
  margin-bottom: 11px;
  margin-right: 0px;
  border: solid 1px #C0BEBE;
  font-size: 11px;
  padding-left: 14px;
  color: #575353;
  outline-color: #575353;
  background-color: white;
}

#div-considerations {
  font-size: 10px;
  margin-bottom: 11px;
  width: 208px;
  padding-left: 16px;
}
.div-photo-perfil>p {
  margin-right: 36%;
}
.title-and-icons>p {
  background-color: white;
}

.div-title>p {
  background: white;
  font-size: 12px;
  font-weight: 600;
}

.description-post>p {
  font-size: 11px;
  background: white;
  text-align: justify;
}
.state-like-post>p {
  font-weight: 600;
  font-size: 11px;
  background: white;
}
#div-considerations>p {
  font-size: 10px;
  margin-bottom: 6px;
}

#upload-image {
  width: 220px;
  height: 220px;
  border: 1px solid #C0BEBE;
  margin-bottom: 11px;
  border-radius: 8px;
}

.input-image {
  display: none;
}

.img-menu {
  width: 25px;
  height: 25px;
}

.btnBars {
  border: transparent;
  background: transparent;
  cursor: pointer;
}


/*Vista Home */

#section-home {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-home {
  display: none;
  width: 120px;
}

.div-central-home {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.div-publications-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 20px;
  width: 90%;
}

.div-filters {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#first-filter-line {
  display: none;
  background: #c6b92c;
  height: 3px;
  border-radius: 2.5px;
}

#second-filter-line {
  display: none;
  background: #A83438;
  height: 3px;
  border-radius: 2.5px;
}

#third-filter-line {
  display: none;
  background: #1E9B98;
  height: 3px;
  border-radius: 2.5px;
}

.btn-filters {
  font-size: 13px;
  font-weight: 600;
  background: white;
  border: none;
  padding: 5px 10px;
  border-radius: 13px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 50%);
}

.btn-filters:hover {
  background: #e0dcdb;
  cursor: pointer;
}

.div-photo-perfil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: #34332F;
  width: 100%;
}

.img-profile {
  width: 45px;
  height: 45px;
  border-radius: 23px;
  margin-right: 10px;
}

.div-create-publication {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 44px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 20%);
  margin-bottom: 26px;
}

.create-publication-text {
  font-size: 11px;
  padding: 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-weight: 600;
}

.create-publication-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: none;
  cursor: pointer;
}

.img-btn {
  width: 26px;
  height: 26px;
}



/* Estilos para los posts */

.div-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.section-post {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin-bottom: 50px;
  position: relative;
}

.div-category-post {
  display: flex;
  justify-content: flex-end;
}

.category-post {
  width: 90px;
  text-align: center;
  border-radius: 8px 8px 0px 0px;
  background: #34332F;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding-top: 2px;
}


.Donar {
  background: #1E9B98;
}

.Vender {
  background: #c6b92c;
}

.Intercambiar {
  background: #A83438;
}

.container-post {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 20px 0px 20px 20px;
  box-shadow: 0px 20px 25px -10px rgb(0 0 0 / 40%);
}

.img-profile-post {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 20px;
  margin-right: 11px;
}

.title-and-icons {
  width: 90%;
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.div-icons {
  background: white;
  display: flex;
  align-items: center;
}

.icon-contact-post {
  width: 28px;
  height: 26px;
  background: white;
  margin-right: 0px;
  cursor: pointer;
}

.div-img-post {
  background: white;
  width: 100%;
  max-width: 400px;
  height: 341px;
  overflow: hidden;
  position: relative;
  border-radius: 0px 0px 20px 20px;
}

.img-post {
  object-fit: cover;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  width: 100%;
  height: 100%;
  border-radius: 0px 0px 20px 20px;
}

.description-like-post {
  display: flex;
  background: white;
  width: 95%;
  max-width: 380px;
  border-radius: 21px;
  margin-top: 323px;
  position: absolute;
  padding: 11px;
}

.description-post {
  background: white;
  padding-right: 11px;
  padding-left: 11px;
}

.div-title {
  display: flex;
  background: white;
  align-items: center;
}

.state-like-post {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}
.div-likes{
  margin-top: 11px;
  display: flex;
  align-items: center;
}

.counter-likes{
  font-size: 12px;
  font-weight: 600;
}
.btn-like-post{
  border: none;
  cursor: pointer;
  width: 25px;
  height: 25px;
  background: url("./img/heart.png");
  background-size: cover;
}

.icon-like-red{
  background: url("./img/heart-pastel.png");
  background-size: cover;
}

/* Estilos vista perfil */
#profile-section{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#profile-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}

#profile-title{
  font-size: 15px;
}
#photo-profile{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
}

#name-profile, #email-profile{
  width: 100%;
}

#div-left-profile{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 280px;
}
#container-data-profile{
  width: 90%;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 20%);
  font-size: 12px;
  padding: 15px 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#div-right-profile{
  width: 100%;
  max-width: 330px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.div-img-profile{
  width: 100%;
  height: 360px;
}
#file-photo-profile{
  display: none;
}
.perfilPost{
  position: relative;
  margin-bottom: 30px;
}
.publication-title{
  margin-bottom: 20px;
}
.btn-delete{
  background: url("./img/delete.png");
  background-size: cover;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}
.btn-edit-post{
  background: url("./img/editar.png");
  background-size: cover;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}
.delete-icon, .edit-icon{
  width: 28px;
  height: 26px;
  background-color: white;
}

.div-delete-post{
  font-size: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 158px;
  bottom: 55%;
  left: 15%;
  border-radius: 20px;
  height: 82px;
  background: white;
  padding: 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 50%);
}
.div-buttons-delete{
  margin-top: 20px;
  display: flex;
  width: 50%;
  justify-content: space-around;
}
.btn-yes{
    border-radius: 8px;
    width: 25px;
    height: 25px;
    border: none;
    background-color: #A83438;
    color:white;
    cursor: pointer;
}

.btn-no{
  border-radius: 8px;
  width: 25px;
  height: 25px;
  border: none;
  background-color: #C0BEBE;
  cursor: pointer;
}

@media (min-width: 700px) {
  #welcome-section {
    background: #FAF6F1;
  }
  /* Menu de navegación desktop*/
  .navMenu {
    max-width: 300px;
  }
  .div-nav {
    font-size: 14px;
    justify-content: space-between;
    margin: 22px auto 30px auto;
    max-width: 920px;
  }
  .logo-home {
    display: block;
  }
  .div-publications-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 42px;
    width: 90%;
    max-width: 900px;
  }
  .div-filters {
    justify-content: space-evenly;
  }
  .btn-filters {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 24px;
  }
  .section-post {
    max-width: 250px;
  }
  .div-posts {
    display: grid;
    align-items: center;
    width: 100%;
    grid-template-columns: repeat(auto-fill, 250px);
    grid-gap: 35px;
    justify-content: center;
  }
  .description-like-post {
    max-width: 230px;
    margin-top: 373px;
  }
  .div-photo-perfil {
    justify-content: space-evenly;
    width: 300px;
  }
  
  form>div>p {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 9px;
  }
  .div-photo-perfil>p {
    margin-right: 0%;
  }
  .div-photo {
    background: url('./img/welcomePhoto.jpg');
    width: 40%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .div-contain {
    width: 60%;
  }
  .div-create-publication {
    border-radius: 22px;
    margin-bottom: 0px;
  }
  .create-publication-text {
    font-size: 14px;
    margin-left: 0px;
    padding: 7px 19px;
    width: 70%;
  }
  #div-text-welcome {
    width: 60%;
    max-width: 252px;
    color: #34332F;
    font-size: 17px;
  }
  .div-logo {
    width: 240px;
    height: 80px;
    margin-bottom: 30px;
    background: url("./img/LETRAS1.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .logo {
    width: 0px;
    height: 0px;
  }
  .button {
    width: 240px;
    height: 40px;
    font-size: 18px;
  }
  .div-register-modal{
    width: 300px;
    height: 165;
  }
  .modal-text-register{
    font-size: 16px;
  }
  #register-section {
    margin-top: 0px;
  }
  #div-photo-register {
    background: url("./img/register-photo.jpg");
    width: 40%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #logo-register {
    margin-top: 111px;
    margin-bottom: 20px;
  }
  .title-register-login {
    font-size: 22px;
  }
  .form>.input {
    width: 226px;
    height: 32px;
    font-size: 13px;
  }
  .section-publications {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #form-publication {
    width: 80%;
    max-width: 800px;
    height: 85%;
    max-height: 400px;
    display: flex;
    flex-direction: row;
    margin-top: 32px;
    align-items: center;
    justify-content: space-evenly;
  }
  #upload-image {
    width: 320px;
    max-width: 400px;
    height: auto;
    border: 1px solid #C0BEBE;
    margin-bottom: 11px;
    border-radius: 8px;
  }
  .div-img-post {
    height: 390px;
  }
  .div-title>p {
    font-size: 14px;
  }
  .description-post>p {
    font-size: 13px;
  }
  .state-like-post>p {
    font-size: 13px;
  }
  .category-post {
    width: 105px;
    font-size: 14px;
  }
  .text-bottom {
    font-size: 13px;
  }
  .img-networks {
    width: 30px;
    height: 30px;
  }
  #div-photo-login {
    background: url("./img/login-photo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  #login-section {
    margin-top: 0px;
  }
  #login-section>.div-contain {
    margin-top: 35px;
  }
  #min-password {
    color: #AF8462;
    font-size: 9px;
  }
  #wrong-email,
  #wrong-password,
  .error-default,
  #invalid-email,
  #invalid-password,
  #message-name {
    font-size: 9px;
  }
  #input-title {
    width: 277px;
    height: 32px;
    font-size: 13px;
    margin-top: -26px;
  }
  #input-category {
    width: 277px;
    height: 32px;
    font-size: 13px;
  }
  #input-state {
    width: 277px;
    height: 32px;
    font-size: 13px;
  }
  #input-description {
    width: 277px;
    height: 70px;
    font-size: 13px;
  }
  .category-state {
    justify-content: flex-end;
    width: 294px;
  }
  #div-considerations {
    font-size: 12px;
    margin-bottom: 11px;
    width: 271px;
    padding-left: 16px;
  }
  #div-considerations>p {
    font-size: 12px;
    margin-bottom: 6px;
  }
  /* Vista perfil-desktop*/
  #profile-container{
    display: flex;
    flex-direction: row;
    width: 90%;
    max-width: 1000px;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
  }
  #photo-profile{
    width: 100px;
    height: 100px;
  }
  #name-profile, #email-profile{
    font-size: 14px;
  }
  .icon-edit{
    width: 18px;
    height: 18px;
  }
  #div-left-profile{
    width: 40%;
  }
  #div-right-profile{
    width: 60%;
    max-width: 900px;
  }
  #post-profile{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 250px);
    justify-content: center;
    gap: 35px; 
  }
  #profile-title{
    margin-bottom: 40px;
  }
  #container-data-profile{
    margin-top: 0px;
  }
  .div-img-profile{
    width: 250px;
    height: 260px;
  }
  .div-delete-post{
    left:10%;
  }
  .content-modal{
    left: 0;
  }
}