/*con este metodo :root, creamos estilos en forma de variables*/
:root {
    --theme-color: rgb(167, 181, 196);
    --primary-color: #70b7f9;
    --secundary-color: #f7c331;
    --text-color-inverse: rgb(51, 131, 178);
    --color-de-barra-direccion: #49526d;
    --text-color: rgb(241, 241, 232);
    --navbar-shallow-color: #e5e5e5;
    --menu-mobile-background-color: #89c4fc;
    --underline-menu-color: rgb(255, 204, 0);
    
}

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  /* local() le dice al navegador que si el usuario ya la tiene instalada en su PC, no descargue nada */
  src: local('Varela Round'), local('VarelaRound-Regular'),
       url('../fonts/varelaround-regular-webfont.woff2') format('woff2');
  
  /* Estrategia de rendimiento crítica: muestra texto alternativo mientras carga */
  font-display: swap; 
}

body {
    font-family: 'Varela Round', Arial, sans-serif;
    background-color: var(--theme-color);
    color: var(--text-color);
    padding-top: 180px;
}

a {
    text-decoration: none;
    color:var(--text-color);
}

p {
    padding: 0px 45px;
}

footer {
    font-size: 14px;
    background-color: var(--text-color-inverse);
    text-align: center;
}

/***************************************/
/*              RESPONSIVE             */
/***************************************/
/*-------------MEDIA Query-------------*/
/*-------------------------------------*/

@media (max-width: 767px) {
    body {
    padding-top: 120px;
}
}