:root {
    /*variable con los colores a usar*/
    --ra-fa: #528fd5;
    /*variable con los colores a usar*/
    --a-a: #e6e6e6;
    --color-blanco: #fff;
    --color-hover: #75ACEC;
    --color-aside: rgb(219, 233, 202);
    --color-negro: #000;
    --color-aside1:rgb(110, 136, 195);
	--color-cuerpo:#66FF00;
	
}


* {
    margin: 0%;
    padding: 0%;
}

body {
    background: var(--a-a);
	background-color: var(--color-cuerpo);
	background-image: url(imagen/png/fondo100.png);
	background-repeat: repeat-x;
}

header,
.main,
footer {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
}

header nav {
    background: var(--ra-fa);
    overflow: hidden;
    /*limpia eñ floa left*/
}

header nav ul {
    /* qita los puntos de las listas*/
    list-style: none;
}

header nav ul li {
    /* alinea el menu a la derecha*/
    float: left;
}

header nav ul li a {
    padding: 10px 20px;
    /* para que funciones el pading 10px 20px que tengo antes no funciona*/
    display: block;
    color: var(--color-blanco);
}

header nav ul li a:hover {
    background: var(--color-hover);
}

.main .articulos {
    width: 68.5%;
    /*margen*/
    margin-right: 1.5%;
    /*hace que el contenedor se pase a la izquierda*/
    float: left;
}

.main .articulos article {
    padding: 20px;
    background: var(--color-blanco);
    margin-bottom: 20px;
}

aside {
    width: 30%;
    float: left;
   /* background: var(--color-hover);*/
    padding: 20px;
    /*como la propiedad anterior pading bajo el aside Usamos el box-sizing  para que vuelva ala izquierda*/
    box-sizing: border-box;
}

footer {
    background: var(--color-blanco);
    color: var(--color-negro);
    /*limpia los float left y aparenta un salto de linea*/
    clear: both;
    padding: 10px 0px;
    text-align: center;
}