@import url(https://fonts.googleapis.com/css?family=Ingrid+Darling:regular);
@import url(https://fonts.googleapis.com/css?family=Kite+One:regular);


html,
body {
  padding: 0;
  margin: 0;
}

/*
  Login  
*/

.root {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

}

.background {
  background-image: url('./assets/background.png');
  height: 100vh;
  width: 100%;
  background-size: cover;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: 0% 10%;
}


.background-green {
  background-color: #01474ddc;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  margin-top: 0;
  margin-left: 3rem;
  margin-bottom: 0;
  margin-right: 3rem;
  width: 10rem;
  /* height: 30rem; */
}

.background-white {
  background-image: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)),
    url('./assets/background.png');
  /* backdrop-filter: opacity(0.3); */
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0;
  margin: 0;

}

.login {
  display: flex;
  align-content: center;
  text-align: center;
  justify-content: center; 
}
.login > div{
  max-width: 600px;
}

.login p {
  color: #BCE4D7;
  font-family: 'Kite One', regular;
  margin: 0;
}

.login input {
  background: #F8F9F9;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  height: 43px;
  width: 70%;
  margin-bottom: 10px;
  text-align: center;
  border: 0px;

}

.login button {
  border: 0px;
  width: 70%;
  height: 45px;
  margin-top: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login .logInUser {
  background-color: #E48A7B;

}

/* REGISTER */

.register {
  display: flex;
  text-align: center;
}

h1 {
  opacity: 1;
  display: flex;
  font-size: 64px;
  text-align: center;
  color: #F8F9F9;
  font-family: 'Ingrid Darling', cursive;
  margin-bottom: 25px;
  margin-top: 10px;
  padding: 10px;
  text-shadow: 5px 5px 10px black;
}

h2 {
  opacity: 1;
  display: flex;
  text-align: center;
  color: #F8F9F9;
  font-size: 12px;
  font-family: 'Kite One', regular;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.register p {
  display: flex;
  color: #BCE4D7;
  font-family: 'Kite One', regular;
}

.register input {
  background: #F8F9F9;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  height: 43px;
  width: 0.5rem;
  margin-bottom: 16px;
  text-align: center;
  font-family: 'Kite One', regular;
}

.message{
  font-size: 12px;
}
.createAccountButton {
  background-color: #E48A7B;
} 

.backButton, .btn-register { 
  box-shadow: none;
  font-family: 'Kite One', regular;
  color: #BCE4D7;
  text-decoration: none;
}
 

/* FLOWER MENU */
#navMenu{
  margin: 0px;
  padding-top: 0px;
  padding-left: 10px;
  position: fixed;
  font-family: 'Kite One', regular;
  width:10%;
  height:9%;
  transition: 1s all;
  z-index:1;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#navMenu ul{
  padding:0px;
  text-align:center;
}

#navMenu li{
    transition: 1s all;
}

#navMenu a{
  text-decoration: none;
  list-style: none;
  transition: 1s all;
  font-size:0px;
  padding: 0px;
  
}
#navMenu h4{
  font-family: 'Ingrid Darling', cursive;
  text-align: center;
  color: #01474D;
  padding: 7px;
  padding-bottom: 7px;
  font-size: 0px;
}
#navMenu img{
  padding-top: 15px;
  padding-left: 10px;
  height: 50px;
  width: 50px;
}

#navMenu:hover {
  width: 70%;
  height: 100%;
  background-color: #BCE4D7;
}

#navMenu:hover h4{
  padding: 15px;
  font-size: 35px;
}

#navMenu:hover a{
  padding: 20px;
  font-size: 20px;
  color: #5F6C65;
  display: block;
}

#navMenu:hover img{
  height: 0px;
  display: none;
}

#navMenu:hover li{
  border-top: 1px solid black;
  width: 100%;
}

#navMenu:hover ul:last-of-type{
  border-bottom: 1px solid black;
}

#navMenu:hover a:hover{
  font-size: 25px;
  padding: 30px 0px;
  background-color: #E48A7B;
}
#navMenu .logOutList{
  border: none;
}
#navMenu .logOutList a:hover{
  background-color: #01474D;
  color: white;
}

/* ACTIVE MENU */
.bar {
  background-color: #01474D;
  color: #5F6C65;
  display: inline-block;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  position: fixed;
}

h5 {
  opacity: 1;
  font-size: 48px;
  text-align: center;
  color: #F8F9F9;
  font-family: 'Ingrid Darling', cursive;
  margin-bottom: 25px;
  margin-top: 10px;
  padding: 10px;
  text-shadow: 5px 5px 10px black;
  
}

.postAction{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.postLikes{
  display: flex;
  align-items: center;
  justify-content: center;
}
.postLikes span{
  color: #E48A7B;
  margin-right: 5px;
  display: block;
  font-size: 15px;
}
.post-header{
  display: flex;
  justify-content: space-between;
  background-color: #BCE4D7;
  width: 100%;
}
.post-header h3{
  font-size: 15px;
}
.dashboard{
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
}

.publicationsButton {
  align-self: center;
  justify-content: center;
}

ul li {
  list-style: none;
}

/* PROFILE */
.image-perfil {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 130px;
}

#profile-img {
  width: 100%;
  max-width: 100px;
  border-radius: 100%; 
}

.profileName {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.profileData {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 50px;
  font-family: 'Kite One', regular;
}

#nameProfile {
  text-transform: uppercase;
  font-size: 18px;
  font-family: 'Kite One', regular;
  margin: 0;
  margin-top: 35px;
}

#emailProfile {
  color: gray;
  font-size: 15px;
  font-family: 'Kite One', regular;
  margin: 0;
}

hr {
  height: 0.5px;
  width: 100%;
  background-color: #5F6C65;
}

/* PUBLICATIONS*/
.image-public {
  display: flex;
  text-align:left;
  justify-content: left;
  align-items: left;
  margin: 30px 5px 2px 45px;
}

#img-public {
  width: 20%;
  border-radius: 100%; 
}

#namePublic {
  font-size: 15px;
  display: flex;
  justify-content: right;
  margin-right: 55px;
}
#imgPublications {
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
}

.public {
  background-color: #BCE4D7;
  display: grid;
  grid-row: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12px;
  font-family: 'Kite One', regular;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.public-header {
  display: inline-block;
  justify-content: center;
  text-align: center;
  align-items: center;
}


.copyright{
  position: absolute;
  bottom: 9px;
  width: 100%;
  text-align: center;
  font-size: 8px;
}

.createPost{
  display: grid;
  grid-row: auto;
  justify-content: center;
}

.postList > img{
  width: 100%;
  max-width: 590px;
}

.postList{
  marker: none;
  margin: 15px;
  padding: 15px;
  background-color: #BCE4D7;
  width: 13rem;
  /* height: 18rem; */
  /* display: grid;
  grid-row: auto; */
  justify-content: center;
  /* font-size: 12px; */
  font-family: 'Kite One', regular;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
  
.postTitle {
  /* display: flex;
  justify-content: space-between; */
  /* display: grid;
  grid-row: auto; */
  margin: 0;
  padding: 0;
  background-color: #BCE4D7;
  font-family: 'Kite One', regular;
  font-size: 20px;
}
  
.postBody {
  background-color: #BCE4D7; 
  margin: 0;
  padding: 10px; 
  color: black;
  font-family: 'Kite One', regular;
  font-size: 12px;
  align-items: center;

}

#btnCreatePost{
  background-color: #E48A7B;
  font-family: 'Kite One', regular;
  justify-content: center;
  align-self: center;
  display: block;
}

#addNewPost{
  background-color: #E48A7B;
  font-family: 'Kite One', regular;
  justify-content: center;
  align-items: center;
}

.newPostList{
  /* display: grid; */
  grid-row: auto;
  justify-content: center;
  background-color: #BCE4D7;
  font-family: 'Kite One', regular;
  font-size: 12px;
  padding: 15px;
}

#newPostTitle{
  justify-content:center;
  /* width: 200px; */
  /* height: 20px; */
  /* margin: 10px; */
  font-family: 'Kite One', regular;
  font-size: 12px;
}

#newPostDescription{
  justify-content:center;
  /* width: 200px;
  height: 200px;
  margin: 10px; */
  font-family: 'Kite One', regular;
  font-size: 12px;
}

.deleteButton{
  /* width: 15px;
  height: 15px; */
}

.editButton{
  /* width: 15px;
  height: 15px; */
}

.toggleLike{
  align-content: end;
  justify-content: end;
}

@media only screen and (min-width: 320px) {
  .background-green{
   width: 13rem;
   /* height: 80vh; */
   padding-left:  2rem;
  }
  .postList{
    width: 13rem;
  }
}

@media only screen and (min-width: 350px){
  .background-green{
  width: 13rem;
  }
  .postList{
    width: 16rem;
  }
}

@media only screen and (min-width: 420px){
  .background-green{
    width: 15rem;
  }
  .postList{
    width: 18rem;
  }
}

@media only screen and (min-width: 540px){
  .background-green{
    width: 20rem;
  }
  .postList{
    width: 25rem;
  }
}

@media only screen and (min-width: 640px){
  .background-green{
    width: 30rem;
  }
  .postList{
    width: 35rem;
  }
}

@media only screen and (min-width: 720px){
  .background-green{
    width: 40rem;
  }
  .postList{
    width: 38rem;
  }
}

@media only screen and (min-width: 820px){
  .background-green{
    width: 60rem;
  }
  .postList{
    width: 45rem;
  }
}

@media only screen and (min-width: 920px){
  .background-green{
    width: 70rem;
  }
  .postList{
    width: 48rem;
  }
}

@media only screen and (min-width: 1080px){
  .background-green{
    width: 80rem;
  }
  .postList{
    width: 65rem;
  }
}

@media only screen and (min-width: 1290px){
  .background-green{
    width: 80rem;
  }
  .postList{
    width: 70rem;
  }
}

/* @media (orientation:landscape){
  .background-green{
    width: 15rem;
    height: 20rem;
  }
 } */


 #btnCreatePost{
  border: 0px;
  border-radius: 20px;
  padding: 15px;
  min-width: 150px;
  cursor: pointer;
  margin: 0 auto; 
  margin-top: 15px;
 }
 .dashboard{
  text-align: center;
 }
 .postList{
  max-width: 590px;
 }
 
 .postList .postTitle,
 .postList .postBody{
  text-align: left;
  /* padding: 1rem; */
 }
 .postList .postBody{
  margin-bottom: 15px;
 }
 .postLikes{
  display: flex;
  gap: 10px
 }
 .postLikes .btnDeletePost,
 .postLikes .btnUpdatePost,
 .postLikes .like{
  width: 70px;
  height: 40px;
  background: transparent;
  border: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
 }
 .updatePost{
  padding: 1rem;
  border-radius: 5px;
 }
.updatePost .editPost{

}
.updatePost .editPost input,
.newPost  input{
  width: 100%;
  height: 45px;
  border-radius: 5px;
  border: none;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-bottom: 15px;
  background-color: #fff;
}
.updatePost .editPost textarea.postBody,
.newPost textarea{
  width: 100%;
  height: 250px;
  border-radius: 5px;
  padding: 1rem;
  box-sizing: border-box;
  border: none;
  resize: none;
  background-color: #fff; 
}
 
#addUpdatePost, #addNewPost{
  width: 100%;
  height: 45px;
  border-radius: 5px;
  /* margin-top: 15px; */
  background-color: #01474D ;
  border: 0px;
  color: white;
}
.newPost label,
.updatePost label{
  text-align: left;
  display: block;
  margin-bottom: 10px;
}

.action-buttons{
  display: grid;
  grid-template-columns:  1fr 1fr;
  margin-top: 15px;
  gap: 10px;

}

.cancelButton{
  background-color: #E48A7B;
  border-radius: 8px;
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.modal { 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #5f6c6545;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
}

.modal-dialog {
  position: relative;
  max-width: 800px;
  max-height: 80vh;
  border-radius: 5px;
  background: #E48A7B;
  overflow: auto;
  cursor: default;
  box-shadow: #5f6c6545 5px 5px 5px 5px;
}

.modal-dialog > * {
  padding: 1rem;
}

/* .modal-header,
.modal-footer {
  background: var(--lightgray);
} */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-header {
  font-size: 1.5rem;
}

.modal p + p {
  margin-top: 1rem;
}

.modal {
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
}

.modal.is-visible {
  visibility: visible;
  opacity: 1;
}

.modal-footer{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.btnDeletePost{
  height: 30px;
  width: 80px;
  border-radius: 5px;
}

.close-modal{
  height: 30px;
  width: 80px;
  border-radius: 5px;
}

#alertLogin, #alertRegister{
  background-color:rgba(248, 245, 245, 0.517);
  color: rgb(146, 5, 5);
  font-weight: 600;
  margin: 8px;
  border-radius: 5px;
}