@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@keyframes gradienDiv {
  0% {
    background-color: #b9b9b9;
  }
  25% {
    background-color: #dfdbdb;
  }
  50% {
    background-color: #dfdbdb;
  }
  75% {
    background-color: #e4e0e0;
  }
  100% {
    background-color: white;
  }
}
@keyframes textOpacity {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
/* formato menú nav */
nav {
  background-color: #1d1d1f;
}

/* para la url en el Buscar y cualquiera con fondo oscuro */
.urlfondooscuro {
  color: lightblue;
  font-size: 1.2em;
  margin-top: 10px;
}

/* selector universal */
* {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.colorLike {
  color: red;
  margin-left: 10px;
}

.colorLike:hover {
  transform: scale(1.8);
  transition: all 1s;
}

.colorShare {
  color: green;
  margin-left: 10px;
}

.colorShare:hover {
  transform: scale(1.8);
  transition: all 1s;
}

.colorEdit {
  color: black;
  margin-left: 10px;
}

.colorEdit:hover {
  transform: scale(1.8);
  transition: all 1s;
}

.colorDelete {
  color: black;
  margin-left: 10px;
}

.colorDelete:hover {
  transform: scale(1.8);
  transition: all 1s;
}

.colorView {
  color: black;
  margin-left: 10px;
}

.colorView:hover {
  transform: scale(1.8);
  transition: all 1s;
}

.colorComment {
  color: black;
  margin-left: 10px;
}

.colorComment:hover {
  transform: scale(1.8);
  transition: all 1s;
}

/* formato imágenes acciones */
.smallimagebox {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 5px;
  padding: 5px;
  object-fit: cover;
  align-items: center;
}

/* formato login Facebook y Google */
.imageico {
  width: 150px;
  height: 150px;
  border-radius: 0%;
  margin: 10px;
  padding: 10px;
  object-fit: contain;
  align-items: center;
}

/* efecto en las acciones de las publicaciones */
svg:hover {
  color: #b9b9b9;
}

/* formato botones en Publicar y Registrar usuarios */
.button {
  background-color: #dfdbdb;
  color: #1d1d1f;
  border-radius: 8px;
  margin: 8% 2% 8%;
  padding: 3%;
  font-size: 1em;
  font-family: "Open Sans", sans-serif;
}

/* Formato títulos */
h1 {
  background-color: #b9b9b9;
  line-height: 2.2em;
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
}

h2 {
  background-color: #dfdbdb;
  line-height: 2.2em;
  text-align: center;
  font-size: 2em;
  font-weight: normal;
  animation-name: gradienDiv;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-delay: 1s;
  animation-timing-function: linear;
}

h3 {
  background-color: #dfdbdb;
  line-height: 2em;
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
  animation-name: textOpacity;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: linear;
}

h4 {
  background-color: #dfdbdb;
  line-height: 1.5em;
  text-align: center;
  font-size: 1.2em;
  font-weight: normal;
}

/* configuración de tema de fondo */
body {
  background-image: url(../img/backgrounds/restaurant_icons.png);
  background-repeat: repeat;
  background-attachment: scroll;
  margin: 10px 0;
}

/* formato a los likes de las publicaciones */
.textLike {
  margin-top: 0px;
  font-size: 1.2em;
  font-weight: bold;
}

/* márgenes de los trextos */
p {
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: normal;
}

/* formato fuente hipervínculos */
a {
  margin-top: 0px;
  font-size: 1em;
  font-weight: normal;
}

/* formato de las imágenes en las publicaciones  */
.imagenReceta {
  width: 100%;
  height: 270px;
  border-radius: 5%;
  margin: 10px;
  padding: 10px;
  object-fit: cover;
  align-items: center;
}

/* formato imágen de perfil rediondeado */
.circle {
  background-color: #b9b9b9;
  border-radius: 50%;
  width: 20%;
  border-width: 10px;
}

/* formato para que tabla pueda hacer scroll en responsive */
.scrollbar {
  position: relative;
  overflow: auto;
}

.wrapper-scroll-y {
  display: block;
}

/* Formato de controles de carousel para que contraste con el fondo*/
.carousel-control-icon {
  filter: invert(1);
}

/* Contenedor de publicaciones flex*/
.contenedor {
  height: auto;
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  border: solid 1px #dfdbdb;
  border-radius: 10px;
  background-image: linear-gradient(to top, white, #dfdbdb);
  display: flex;
  flex-direction: column;
}

.contenedor:hover {
  transform: translate(-5px, -5px);
  transition: all 1s;
}

.gradiente {
  background-image: linear-gradient(to top, white, #dfdbdb);
}

.gradiente:hover {
  transform: translate(-5px, -5px);
  transition: all 1s;
}

.rotate:hover {
  transform: rotateZ(5deg);
  transition: all 1s;
}

/* Contenedor de acciones flex div anidado dentro de contenedor de publicación */
.accion {
  display: flex;
  flex-direction: row;
}

/*Definimos que nuestro contenedor se muestre como GRID */
/*Solo se utiliza en el Visitarperfil hecho con grid */
.grid {
  width: 99%;
  display: grid;
}

#contenedor-grid {
  justify-content: center;
  align-content: center;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas: "receta1" "receta2" "receta3" "receta4" "receta5" "receta6" "receta7" "receta8";
}

/* 1er breakpoint */
@media (min-width: 768px) {
  #contenedor-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "receta1 receta2" "receta3 receta4" "receta5 receta6" "receta7 receta8";
  }
}
/* 2do breakpoint */
@media (min-width: 991px) {
  #contenedor-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "receta1 receta2 receta3 receta4" "receta5 receta6 receta7 receta8";
  }
}
/* definicion de grid áreas */
.receta1 {
  grid-area: receta1;
}

.receta2 {
  grid-area: receta2;
}

.receta3 {
  grid-area: receta3;
}

.receta4 {
  grid-area: receta4;
}

.receta5 {
  grid-area: receta5;
}

.receta6 {
  grid-area: receta6;
}

.receta7 {
  grid-area: receta7;
}

.receta8 {
  grid-area: receta8;
}

/* formato accesos footer */
ul li a {
  font-size: 2em;
  color: white;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  left: 150px;
}
ul li a:hover {
  font-size: 2.2em;
  color: white;
  background-color: #1d1d1f;
  transition: all 1s;
}

/* diferentes footers para mobile y desktop */
/* Footer Desktop */
/* Footer Mobile  ToDO ver tema de como hacerlo sticky*/
.footTwo, .footOne {
  width: 100%;
  text-align: center;
  background-color: #b9b9b9;
}

.footOne {
  background-color: #1d1d1f;
  padding: 10px 10px;
  height: auto;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* da formatro a imágenes ejemplo redes sociales*/
.miniatura {
  width: 64px;
  height: 64px;
}

.miniatura:hover {
  transform: skew(-10deg);
  transition: all 1s;
}

/*# sourceMappingURL=boost.css.map */