/*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 { /* semantic naming*/ --primary:#DE874E; /*teja o marrón*/ --secondary: #72E7F0; /* azul (background)*/ --info:rgb(87,6,140);/*violeta*/ --success:rgb(83,83,83);/*gris oscuro*/ --warning:rgb(255,255,255);/*blanco*/ --danger:rgb(26,26,26); /* red*/ --white:rgb(255,255,255); /*blanco*/ --black:rgb(20,20,20);/*negro*/ } *{margin:0} html{font-family: 'Montserrat', sans-serif;} body{ background-color: var(--secondary); color: var(--black);} header{ background-color:var(--primary);color: var(--secondary); } section{color:var(--white);background-color: var(--primary);} .clear-section{color:var(--black);background-color: var(--white);} nav{background-color: var(--secondary);color:var(--white);box-sizing:border-box;} .but_1{background-color: var(--secondary);color:var(--primary)} .but_2{background-color: var(--secondary);color:var(--black)} footer{background-color: var(--black);color:var(--white)}