html,
body {
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  color: black;
}

html {

  min-height: 100vh;
}

body {

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  background-image: url(Media/Página_principal/Biblioteca_background.jpeg);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
  background-size: 100% 100vh;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
}

@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}


/* NUESTRO CSS EMPIEZA A PARTIR DE AQUI */

/* Este código sirve para hacer y trabajar el background de la web */
.background {
  background-color: rgba(255, 255, 255, 0.75);
}

#Cabecera-Superior {
  width: 100%;
}

#Logo {

  padding: 1%;
  width: 11%;
  max-width: 200px;
  aspect-ratio: 10/9;
  border-radius: 100%;
  content: url(Media/Logotipo/memeteca_logotipo_2.jpeg);
}

/* Los dos siguientes párrafos trabajan el apartado de lacaja del "log-in" */
.Login_i_Registre {
  float: right;
  align-items: center;
  display: flex;
  width: auto;
  margin: 2%;
  border-radius: 10px;
}

.Login_i_Registre div {
  margin: auto;
  padding: 1%;
}

.Login_i_Registre div * {
  margin: 1%;
}

#navbar {
  display: flex;
  width: 80%;
  margin: auto;
  align-content: center;
  border-radius: 70px;
}

#Navbar #navbar-items div {

  height: auto;
}

.link {
  /* Esta clase apunta a los "div" que hay dentro del navbar, esos div contienen las "a" que nos llevan al resto de páginas */
  margin: auto;
  padding: 0.7%;
}

#Trending_Topic {

  width: auto;
  margin: 2%;
}

#Trending_Topic p {

  width: fit-content;
  margin-left: 8%;
  font-family: Verdana;
  border-radius: 10px;
  padding: 0.3%;
}

#Container {
  display: flex;
  width: 90%;
  margin: auto;
  border-radius: 15px;
  margin-bottom: 2%;
  padding: 1%;
}


/* Textos e imágenes de la página "inicio" */
#Columna1,
#Columna2,
#Columna3 {
  margin: auto;
  padding: 0.5%;
}

#Columna1 img,
#Columna2 img,
#Columna3 img {

  width: 100%;
  max-width: 500px;
  min-width: 200px;
  border: solid 1px grey;
}

#Columna1 p,
#Columna2 p,
#Columna3 p {
  text-align: center;
  padding: 4%;
}

/* Imágenes de las pestañas "Categorías, Aportes Comunidad & Formulario" */

#container_categorias {

  width: 100%;
}

.enlaces_categorias {

  width: auto;
  display: flex;
  margin: 1%;
}

.imagen_categorias {
  width: 33%;
  margin: 0.7%;
}

.imagen_categorias * img {
  aspect-ratio: 10/9;
  width: 100%;
  border-radius: 5%;
}

.categorias_container_informacion {
  width: 100%;
  background-color: rgba(200, 200, 200, 0.65);
  padding: 1.25%;
  border-radius: 0.7rem;
}

.categorias_container_informacion .titulo_de_categoria {
  font-size: 1.3em;
  font-weight: 500;
  text-decoration: underline;
  width: fit-content;
  margin: auto;
}

.Fotos_Categorias {

  width: 90%;
  margin: auto;
}

.Fotos_Categorias img {

  width: 30%;
  display: inline-block;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* Imágenes de Aporte de la Comunidad y sus sub-temas interiores */

.Destacados p.titulo {

  text-align: center;
  font-size: 1.2em;
  background-color: rgba(200, 200, 200, 1);
  width: fit-content;
  margin: auto;
  margin-bottom: 2%;
  margin-top: 1%;
  padding: 0.6%;
  border-radius: 10px;
}



/* Pàgina "formulario de memes" */

#formulario_de_memes {

  width: 100%;
}

#advertencia {

  margin: 0.8%;
}

fieldset {

  margin: 1.2%;
}

#condiciones_de_uso {

  font-weight: 700;
  text-decoration: underline;

}


#contenedor_boton {

  width: 90%;
  margin: auto;
}

form input#mandarmeme {
  margin: 1.2%;
}


/*Imagen del botón "atrás" para retroceder */
#boton_atras {

  width: 10%;
  margin: auto;
  margin-top: 1%;
  margin-bottom: 2%;
}

/* De aquí en adelante empieza el Footer */

div#colocador-del-footer {
  flex-grow: 1;
}

footer#PieDePagina {
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  height: auto;
  width: 100%;
  color: white;
  display: flex;
  padding: 0.5em;
}

#PieDePagina .separador {
  width: 50%;
}

.separador div {
  text-align: center;
}

.separador div p {
  margin: 0px;
}

.separador div * {
  padding: 0.2em;
}



/* AQUI COMIENZA EL CSS QUE HACE ADAPTABILIDAD */

@media only screen and (max-width: 800px) {    /*AQUEST CSS ES PER A TABLETS*/

  #Trending_Topic p{

    padding:1%;
  }

  #Container {
    flex-wrap: wrap;
    flex-direction: colum;
  }
  
  #Columna1 img,
  #Columna2 img,
  #Columna3 img {
    justify-content: center;
    width:max-content;
    max-width: 100%;
    min-width: 0px;
  }

  .Login_i_Registre{

    display:flex;
    flex-direction: column; 
  }

  .Login_i_Registre div{
    width: 100%;
    display:flex;
  }
  .Login_i_Registre div input{
    width: 70%;
  }
}


@media only screen and (max-width: 600px){  /*  AQUEST CSS ES PER A MÒBILS  */

  #navbar {
    flex-wrap: wrap;
    border-radius: 10px;
  }


  
  #Trending_Topic p{

    padding:1%;
  }


  /*Sección "categorias"*/

  .enlaces_categorias {

    flex-direction: column;
  }

  .imagen_categorias{
    width:100%;
    margin-top: 5%;
  }

  /* AQUI AGREGAREMOS EL CSS PARA 'APORTES DE LA COMUNIDAD' */

  div.Fotos_Categorias{
    display:flex;
    flex-direction:column;
  }

  .Fotos_Categorias img{
    width:100%;
    padding:1%;
  
  }
  
}