/*Configuracion que aplica a todo, hace que el ancho y alto tome en cuenta todo, incluyendo margenes e indentados*/
* {
  box-sizing: border-box;
}

/* Este codigo me lo robe je je (es para la scrollbar) */
  body::-webkit-scrollbar {
    width: 16px;
  }

  body::-webkit-scrollbar-track {
    background: #ffffff;
  }

  body::-webkit-scrollbar-thumb {
    background-color: #a22525;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
  
/*Fondo de página*/
body {
  background-image: url("/img/fondo facha.jpg");
}

/*CABECERA*/
#Cabecera {
  border: #212121 solid 10px;
  border-radius: 15px;
  border-style: solid solid none solid;
  background-color: #363636;
  
  position: relative; /*Esto, con la combinacion de "Pos:absolute" del gif de spiderman, ayuda a posicionar al gif respecto a la cabecera*/
  
  margin: 10px auto 30px auto;
  width: 700px;
  min-height: 120px;

  font-family: "Courier New", monospace;
}

#spiderman {
  margin:0;
  position:absolute;
  left:-120px; /*Esto significa correrse 120 pixeles a la izquierda de la esquina superior derecha de Cabecera*/
  top: -20px;
  
  width:180px;
}

/*CABECERA título*/
#Titulo {
  text-align: center;
  color: white;
  width: 100%;
  height: 81%;  
}

#Titulo h2 {
  font-size: 18px;
}
  
#Titulo h1 {
  margin: 0;
  font-size: 55px;
}

#h2top {
  margin-bottom: 0;
}

#h2abajo {
  margin-top: 0;
}

/*CABECERA navegador*/
nav {
  font-size: 18px;
  height: 19%;
  width: 100%;
  background-color: #D1D1D1;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  text-align: center;
  width: 50%;
  border: dimgray solid 5px;
  border-style: none solid solid none;
}

a:hover {
  color: #B081E3;
}

/*CUERPO*/
#CUERPO {
  margin: 0 auto;
  width: 1100px;
  height: 500px;
}

/*CUERPO principal*/
#flex {
  display: flex;
  width: 100%;
  height: calc(100% - 40px);
  
  font-family: "Trebuchet MS", Verdana, sans-serif;
}  

/*CUERPO principal-texto*/
main {
  order: 2;
  width: 83%;
  background-color: #D1644F;
  
  border: #AB402C solid 10px;
  border-radius: 0 15px 0 0;
  border-style: solid solid none none;
  
  padding: 0 15px;
  font-size: 18px;
  text-indent: 25px;
}

#tipo {
  display: flex;
  background-color: #BA4F3C;
  border-radius: 15px;
}

#tipo img {
  border: #EB78C2 solid 5px;
  order: 1
}

#tipo p {
  order: 2;
  margin: auto 20px;
  padding: 10px;
  width: 650px;
  min-height: 50px;
  
  background-color: white;
  border: grey dashed 5px;
  border-radius: 20px;
}


/*CUERPO principal-barra lateral*/
aside {
  order: 1;
  width: 17%;
  background-color: #363636;
  color: white;
  
  border: #212121 10px;
  border-style: solid solid none solid;
  border-radius: 15px 0 0 0;
  
  text-align: center;
}

figure {
  text-align: center; 
  padding: 10px;

  border: black solid 2px;
  border-radius: 15px;
  margin: 0 auto 10px;
  width: 147px;
}

#imgsDestacadas {
  border: #212121 5px;
  border-style: solid none;
  
  text-align: center;
  
  background-color: #363636;
  width: 105%;
  margin: 0;
  
  overflow-y: scroll;
  overflow-x: hidden;
}

  /* mismo codigo robado */
#imgsDestacadas::-webkit-scrollbar {
    width: 10px;
  }

#imgsDestacadas::-webkit-scrollbar-track {
    background: #000000;
  }

#imgsDestacadas::-webkit-scrollbar-thumb {
    background-color: #212121;
    border-radius: 10px;
    border: 1px solid #ffffff;
  }

/*CUERPO pie de página*/
footer {
  width: 100%;
  height: 40px;

  background-color: black;
  color: white;
  padding: 10px;

  border: white solid 2px;
}