/*La pseudo-clase :root de CSS selecciona el elemento ra¨ªz del documento. 
En HTML, :root representa el elemento <html> 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(25,115,184);/*azul*/
    --footer-background:rgb(41,80,122);/*gris     oscuro*/
    --clear-background:rgb(234,249,250);/*blanco*/
    --black:rgb(18,18,18); /* negro*/
    --button2-color:rgb(2,132,132);/*background-boton-resaltado*/
   
    --first-color: rgb(7, 33, 70);
    --second-color: rgb(41, 80, 122); /*fondo header y footer*/
    --third-color:rgb(43,66,97);
    --fourth-color:rgb(4,50,99);
    --fifth-color:rgb(0,68,129);
    --sixth-color:rgb(25,115,184);   /*textoazul sobre blanco*/
    --seventh-color:rgb(73,165,230); /*textoazul header y footer*/
    --eigth-color:rgb(91,120,255);
    --nineth-color:rgb(234,249,250);/*color fondo o texto sobre azul*/
    --tenth-color:rgb(248,205,81);  /*color botÃ³n resaltado*/
    --eleventh-color:rgb(2,132,132);/*background-boton-resaltado*/
    }
    *{margin:0}
html{    font-family: 'Libre Franklin', 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);}

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)}