@font-face {
  font-family: "fun-font";
  src: url("/assets/fun-font.d4d008b5.ttf") format("truetype");
}

* {
  font-family: "fun-font", sans-serif;
  font-weight: 500;
  /*font-size: 20px;*/
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

}

body {
  margin: 0;
  /*font-size: 100%;*/
  background-image: url("/assets/background.3742caf7.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin-bottom: 60px;
}

#comment-input-contairner {
  color: red;
}


#img-logo {
  border-radius: 20px;
  width: 170px;
  height: 170px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  max-width: 100%;
  /* height: auto;*/
}


.title-h {
  background-color: #7cb8f2;
  height: 62px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  font-size: 28px;
  margin: 10px;
  padding: 20px 20px;
  backdrop-filter: blur(15px);
  box-shadow: 5px 5px #050834;
  font-weight: bold;
  /* max-width: 300px; 
  width: fit-content;
  font-family: "fun-font", sans-serif;
  justify-content: center;
  flex-shrink: 0;*/
}

.title,
.title-r {
  background-color: #7cb8f2;
  width: 194px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 35px;
  margin: 10px;
  padding: 10px 10px;
  box-shadow: 5px 5px #050834;
  font-weight: bold;
}

#email,
#password {
  background-color: #050834;
  color: white;
  box-shadow: 0px 1px 2px 0px #7cb8f2;
  text-align: center;
  margin: 10px;
  padding: 0px;
  font-size: 20px;
  border: none;
  border-bottom: 1px solid #d5d5d5;
  outline: none;
  width: 150px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 20px;
  font-weight: bold;
}

.div-l,
.div-r,
.div-h {
  flex-direction: column;
  /*font-family: "fun-font", sans-serif;
  font-size: 14px;*/
  align-items: center;
  justify-content: center;
  display: flex;
  height: 100vh;

}

.checking,
.button-login,
.button-google,
.button-send,
.button-h {
  background-color: #d5d5d5;
  margin: 7px;
  border-radius: 20px;
  padding: 0px;
  font-size: 20px;
  width: 150px;
  height: 40px;
  font-weight: bold;
  /*font-family: "fun-font", sans-serif;
  flex-shrink: 0;
  justify-content: center;*/

}

.button-google img {
  width: 20px;
  /* Ajusta el ancho del logotipo según tus preferencias */
  margin-right: 5px;
  /* Espacio entre el logotipo y el texto */
}

.text-r {
  color: #050834;
  width: fit-content;
  height: 50px;
  flex-shrink: 0;
  border-radius: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 30px;
  margin: 10px;
  padding: 0px;

}

/*#email-r,
#password-r {
  background-color: #050834;
  color: white;
  box-shadow: 0px 1px 2px 0px #7cb8f2;
  text-align: center;
  margin: 10px;
  padding: 0px;
  font-family: "fun-font", sans-serif;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #d5d5d5;
  outline: none;
  width: 150px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 20px;
}*/
.header-w {
  height: 100px;
  background-color: #050834;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#logo-header-w {
  max-width: 100%;
  /* Limita el ancho de la imagen al ancho del encabezado */
  max-height: 70px;
  /* Limita la altura de la imagen a 100 píxeles */
  justify-items: center;

}

.title-w {
  margin-left: 20px;
  font-weight: bold;
  font-size: 40px;
  color: #7cb8f2;
}

.logOut {
  margin: 20px;
  background-color: #7cb8f2;
  /* Color de fondo */
  color: #050834;
  /* Color del texto */
  padding: 10px 20px;
  /* Relleno (ajústalo según sea necesario) */
  border: none;
  /* Sin borde */
  border-radius: 9px;
  /* Esquinas redondeadas */
  cursor: pointer;
  /* Cambia el cursor al pasar el ratón */
  font-family: "fun-font", sans-serif;
}

.logOut:hover {
  background-color: #7cb8f2;
  transform: scale(1.1);
  /* Cambia el color de fondo al pasar el ratón */
}

.footer-w {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #050834;
  color: white;
  padding: 10px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  /* Alinea los elementos en el espacio entre ellos */
  align-items: center;
  /* Centra verticalmente los elementos en el encabezado */


}

.comments {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Centra el contenido horizontalmente */
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #e0e5eb;
  /* Un tono azul claro */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  max-width: 100%;
  /* Hace que el comentario se adapte al ancho de la pantalla */
  min-height: 100%;
  font-size: 25px;
  /*margin-bottom: 20px;*/
}

.comments:hover {
  background-color: #c9d1d9;
  /* Cambia el color de fondo al pasar el ratón por encima */
  transition: background-color 0.3s ease;
  /* Agrega una transición suave */
}

.error-message {
  width: fit-content;
  flex-shrink: 0;
  border-radius: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  font-family: "fun-font", sans-serif;
  font-size: 20px;
  margin: 10px;
  padding: 20px 20px;
  backdrop-filter: blur(15px);
  box-shadow: 5px 5px #050834;
  font-weight: bold;
}

.return-button {
  margin: 20px;
  background-color: #7cb8f2;
  /* Color de fondo */
  color: #050834;
  /* Color del texto */
  padding: 10px 20px;
  /* Relleno (ajústalo según sea necesario) */
  border: none;
  /* Sin borde */
  border-radius: 9px;
  /* Esquinas redondeadas */
  cursor: pointer;
  /* Cambia el cursor al pasar el ratón */
  font-family: "fun-font", sans-serif;
  margin-top: 5px;
  font-size: 32px;
}

.go-home-message {
  width: fit-content;
  flex-shrink: 0;
  justify-content: center;
  display: flex;
  align-items: center;
  font-family: "fun-font", sans-serif;
  font-size: 20px;
  margin: 10px;
  padding: 20px 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

#comment-input {
  background: linear-gradient(45deg, #669bcfbf, #cbd7eed4);
  text-align: center;
  margin: 10px 0px;
  padding: 5px;
  border: solid #050834 3px;
  outline: none;
  width: 90%;
  max-width: 300px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  font-size: 25px;
}

#comment-input::placeholder {
  color: #050834;
  /* Cambia el color del texto del placeholder aquí */
 /* font-size: 25px;*/
  font-weight: bold;
}

#comment-input:hover {
  background: linear-gradient(45deg, #fdfdfd47, #257767c4);
  /* Cambio de color de fondo al pasar el mouse */
  transform: scale(1.1);
}

.container-icons {
  justify-content: flex-end;
  flex-direction: row;
  display: flex;
  backdrop-filter: blur(20px);
}

.like-button,
.edit-button,
.delete {
  flex-direction: inherit;
  padding: 5px;
  bottom: 0px;
  margin: 10px;
  justify-content: inherit;
  border-radius: 20px;
  background: none;
  border: solid #050834 3px;
  color: #050834;
}

.like-count {
  padding: 5px 5px 5px 0px;
  margin: 10px 10px 10px 0px;
  font-weight: bold;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

#publish-button {
  color: #1d405c;
  padding: 7px 15px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 18px;
  background-color: #cbd7ee7d;
  border: 2px solid #1d405c;
  box-shadow: 3px 3px #1d405c;
  font-weight: bold;
}

#publish-button:hover {
  transform: scale(1.1);

}

.div-w {
  text-align: center;
}

.hidden {
  display: none;
}

.alert-message {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #dc3545;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.alert-message.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}
.fa-google {
  font-size: 20px;
  color: transparent;
  background: linear-gradient(to right, #2E5E9B, #1E8E3E, #D3A100, #D93025);
  -webkit-background-clip: text; 

}