CSS Predeterminado para iniciar un proyecto

/* (*) todos*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    color: #000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}

a{
    color: #000;
    text-decoration: none;
}

ul{
    list-style-type: none;
}

/* estilo del encabezado -- contenedor padre*/
.header-top{
    width: 100%;/* ancho */
    height: 120px; /* alto */
    display: flex; /*alinear los contenedores uno al lado del otro -- horizontal*/
    justify-content: space-between; /*alinea de manera justificada los contenedores*/
    align-items: center;/*alinea centro*/
    padding-left: 30px; /*espacio interno izquierdo*/
    padding-right: 30px; /*espacio interno derecho*/
    box-sizing: border-box; /*esta propiedad incluye el espacio del margen al with 100% */
}

/*contenedor hermano*/

.brand{
    width:150px;/* ancho */
    /*height: 110px;*//* alto */
    /* background-color: #ff0; */ /*color de fondo */
}

/*contenedor hermano*/

.header-nav{
    width: 700px; /* ancho */
    height: 0px; /* alto */
    /* background-color:#ec0909; */ /*color de fondo */
}

/*selector descendiente*/

.brand img{
    width: 100%; /* ancho */
    /*height: 30px;*//* alto */
}
.header-nav ul{
    display: flex; /*alinear la lista horizontal*/
    justify-content: space-around; /*alinea de manera distribuida*/
}

.header-nav a{
    font-size: 13px; /*tamaño del texto*/
    color:rebeccapurple; /*color de texto*/
    font-weight: bolder; /*negrita*/
    text-transform: uppercase; /*todas mayusculas*/
    padding:10px 5px ; /*valor top - right - left - botton */
    /* background-color: #0ff; */ /*color de fondo */
}

/*movimiento del mouse*/

.header-nav a:hover{
    color:grey; /*color de texto*/
    text-decoration:underline; /*subrayallado al pasar el mouse*/
    font-weight: normal; /*normal*/
}

.shop img{
    width: 30px; /* ancho */
}

.shop ul{
    display: flex; /*alinear la lista horizontal*/
}

.shop li{
    margin-left: 30px;
}

.nav-shop{
    width: 100%;
    height: 50px;
    background-color: #ccc;
    /*background-color: #c9c;*//*formato de color seguro para el web #cc99cc */
    /*background-color:rgba(117, 6, 6, 0.5);*//*formato para colores con la trasparencia*/
}

.nav-shop-center{
    width: 1024px;
    height: 50px;
    /*background-color:#ff0;*/
    /*margenes automatico funcionan cuando existe un ancho (ejemplo width 1024;)*/
    margin-left: auto;
    margin-right: auto;
}

.nav-shop ul{
    display: flex;
    justify-content: space-between;
    /*background-color: orchid;*//*color de fondo*/
    align-items: center;
    height: 100%;/*se utiliza el 100% porque se ha utilizado display:flex;*/
}

.nav-shop li{
    display: flex;
}

.nav-shop a{
    font-size: 14px;
    margin-left: 10px;
    padding: 10px 20px 10px 0;
    text-transform: uppercase;
}

.nav-shop a:hover{
    color: royalblue;
    text-decoration: underline;/*subrayado*/
    font-weight:bolder; /*negrita*/
}

/*pie de pagina*/

.newsletter{
    width: 100%;
    height: 150px;
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.newsletter a{
    background-color:#000;
    color: #fff;
    padding:10px 20px;
}