body{
  background-color:#DEC1DB;
  padding:10px;
  }
  
#container{
  display:grid;
  background-color:#EEE2DF;
  width:800px;
  padding:10px;
  margin:auto;
  } 
  
#header{
  background-color:#5B61B2;
  color:white;
  padding:5px;
  text-align:center;
  grid-column:1/span 3;
  }
  
#nav{
  background-color:#6DA0E1;
  color:white;
  margin:10px;
  grid-column:1;
  }

#content{
  padding:10px;
  margin:10px;
  font-size:18px;
  grid-column:2;
  }
  
#basico{
  padding:10px;
  }
  
#seriesfavoritas{
  width:520px;
  height:175px;
  padding:10px;
  margin:10px;
  background-color:pink;
  overflow-x:auto;
  }
  
#peliculasfavoritas{
  width:520px;
  height:175px;
  padding:10px;
  margin:10px;
  background-color:pink;
  overflow-x:auto;
  }
  
#videojuegosfavoritos{
  width:520px;
  height:175px;
  padding:10px;
  margin:10px;
  background-color:pink;
  overflow-x:auto;
  }
  
#personajesfavoritos{
  width:520px;
  height:175px;
  padding:10px;
  margin:10px;
  background-color:pink;
  overflow-x:auto;
  }
  
.imagen {
  position: relative;
  display: inline-block;
}
  
.imagen img{
  transition:0.3s ease;
  display: block;
  z-index: 1;
  position:relative;
  }
  
.imagen .text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0,0,0,0.5);
  transition:0.3s ease;
  opacity:0;
  color:white;
  z-index: 2;
  }
  
.imagen .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 0, 128, 0.5);;
  opacity: 0;
  transition: 0.3s ease;
  z-index: 2;
}

.imagen:hover .overlay{
  opacity:1;
  }

.imagen:hover .text{
  opacity: 1;
}
  
#footer{
  background-color:#5B61B2;
  text-align:center;
  color:white;
  clear:both;
  padding:10px;
  grid-column:1/span 3;
  }
  
li{
  padding:5px;
  }