*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    --color1: #F2E527;
    --color2: #403501;
    --color3: #0D0D0D;
    --color4: #F2D027;
    background-image: url(imagenes/sw_fondo.jpg);
    color: white
}

#contenedor{
    width: 90%; /*ancho de la página*/
    /*border: 4px solid red;*/
    margin: 25px auto; /*margen de 25px desde arriba y va a estar alineado al medio de la página*/
}

#logo{
    height: 150px; /*tamaño del logo*/
}

#search{
    height: 50px; /*tamaño de la imagen search*/
}

#cabecera{
    border: 2px solid var(--color2); /*borde de la cabecera de 2px y color azu*/
    display: flex; /*Habilita un contexto de diseño flexible para los elementos hijos*/
    flex-direction: row; /*se aplica por defecto*/
    justify-content: space-between; /*permite que los hijos se puedan distribuir dentro de su padre*/
    align-items: center;  /**/
    flex-wrap: wrap;/*para ajustar*/
    margin: 10px; /*tamaño de margen*/
    padding: 10px; /*distancia interna*/
}

#titulo{
    text-align: center;
    margin: 10px;
    padding: 10px;
}

#contenidos{
    display: flex; /*para poner uno al costado del otro*/
    flex-direction: row;
    justify-content: space-around;
    margin: 10px;
    padding: 10px;
    border: 2px solid white;
}

.episodio{
    /*border: 3px solid green;*/
    width: 30%; /*ancho*/
    padding: 10px;
}

.episodio img{
    width: 90%; /*las imagenes tienes que ser 100% de su contenedor padre*/
    display: block;
    margin: auto;
}

.episodio h2{
    text-align: center;
    margin: 10px;
    color: var(--color4)
}

.episodio p{
    text-align: justify
}

#pie{
    text-align: center;
    border: 3px solid var(--color2);
    margin: 10px;
    padding: 10px;
}

#pie h3 #pie p{
    padding: 10px;
}

#pie img{
    height: 50px;
    margin: 10px ;
}