@import url('./icons.css');
@import url('./fonts.css');
@import url('./body.css');
@import url('./link.css');
@import url('./button-icon.css');
@import url('./sidebar.css');
@import url('./ellipsis.css');
@import url('./player.css');
@import url('./page.css');
@import url('./layout.css');
@import url('./scrollbar.css');
@import url('./button.css');
:root {
    --primary: #00B050;
    --white: #ffffff;
    --gray10: #B3B3B3;
    --gray20: #737373;
    --gray30: #282828;
    --gray40: #181818;
    --gray50: #121212;
    --gray60: #000000;
    --linear-background: #171717;
    --basefontFamily: Avenir, Helvetica, sans-serif;
    --headline1: bold 2rem/normal var(--basefontFamily);
    --headline2: bold 1.5rem/1.75rem var(--basefontFamily);
    --baseFont: normal .875rem/1.375rem var(--basefontFamily);
    --baseFontBold: bold .875rem/1.375rem var(--basefontFamily);
    --button: normal .875rem/1rem var(--basefontFamily);
    --buttonBold: bold .875rem/1rem var(--basefontFamily);
    --small: normal .75em/normal var(--basefontFamily);
    --subtitle: normal .75rem/normal var(--basefontFamily);
}


/* Los em varian bajo su padre directo, que se hallan definido en fuente 
 Ejemplo. si una etiqueta tiene .75em , quiere decir que tomara el 75% del tamaño de su padre */


/* Los rem son un calculo relativo, bajo una medida absoluta, que solo cambia una vez*/


/* https://developer.mozilla.org/es/docs/Web/CSS/font */

@media screen and (min-width:768px) {
     :root {
        font-size: 16px;
    }
}

@media screen and (min-width:1367px) {
     :root {
        font-size: 18px;
    }
}