/*La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento y es idéntico al selector html, excepto que su especificidad es mayor. */ /* En CSS, las propiedades personalizadas (también conocidas como variables) son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento. */ :root { --main-background:rgb(87,6,140);/*violeta*/ --footer-background:rgb(83,83,83);/*gris oscuro*/ --clear-background:rgb(255,255,255);/*blanco*/ --black:rgb(26,26,26); /* negro*/ --button2-color:rgb(2,132,132);/*background-boton-resaltado*/ } *{margin:0} html{font-family: 'Montserrat', sans-serif;} body{ background-color: var(--main-background); color: var(--clear-background);} header{ background-color:var(--main-background);color: var(--clear-background); } section{color:var(--clear-background);background-color: var(--main-background);} .clear-section{color:var(--black);background-color: var(--clear-background);} /*h1{color:var(--main-background);background-color: var(--clear-background);} p{color:var(--main-background);background-color: var(--clear-background );}*/ nav{background-color: var(--clear-background);color:var(--black);box-sizing:border-box;} .but_1{background-color: var(--main-background);color:var(--clear-background)} .but_2{background-color: var(--button2-color);color:var(--clear-background)} footer{background-color: var(--footer-background);color:var(--clear-background)}