/* ESTA PAGINA DE CSS ES PARA LOS ELEMENTOS QUE USARE EN VARIAS PAGINAS */
/* Indice: TIPOS, H1-H2-H3-H4-H5 */

/* Establecemos VARIABLES para poder tener más libertad de cambio */
@import url(resets/reset_meyer.css);

@font-face {
    font-family: 'InterTight-Regular';
    src: url("../txt/InterTight-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'InterTight-LightItalic';
    src: url("../txt/InterTight-LightItalic.ttf") format("truetype");
}

@font-face {
    font-family: 'InterTight-Italic';
    src: url("../txt/InterTight-Italic.ttf") format("truetype");
}

@font-face {
    font-family: 'InterTight-Light';
    src: url("../txt/InterTight-Light.ttf") format("truetype");
}

@font-face {
    font-family: 'PTSerif-Italic';
    src: url("../txt/PTSerif-Italic.ttf") format("truetype");
}

/* Creo variables para agilizar el proceso. . . . . . . . . . . . . . . . . . . . . . . . . . .  */

:root {
    --font-regular: 'InterTight-Regular', sans-serif;
    --font-light: 'InterTight-Light', sans-serif;
    --font-italic: 'InterTight-Italic', sans-serif;
    --font-lightitalic: 'InterTight-LightItalic', sans-serif;
    --font-italicaPTSerif: 'PTSerif-Italic', serif;

    --font-tamaño-aaaa: 16pt;/* -- en orden de tamaño */
    --font-tamaño-aaa: 14pt;/* -- en orden de tamaño */
    --font-tamaño-aa: 12pt;/* -- en orden de tamaño */
    --font-tamaño-a: 20pt;/* -- en orden de tamaño */
    --font-tamaño-b: 24pt;
    --font-tamaño-c: 36pt;
    --font-tamaño-cc: 40pt;
    --font-tamaño-d: 48pt;

    --color-negro-optimizado: #252525;
    --color-diamo: #A65FFA;
    --color-blanco: #ffffff;

    --font-peso-light: 300;
    --font-peso: 400;
}

body{
    margin: 0;
    padding-right: 32px;
    padding-left: 32px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    min-height: 100vh;
    /* position: relative; */
    font: var(--font-regular);
    /* cursor: none; */

    /* flex-direction: column; */
    /* position: relative; */
}

/* esta clase sirve para hacer cambios en el html a serifa mediante <span class="serif-italic"> */
.serif-italic {
    font-family: var(--font-italicaPTSerif);
}

h1{
    font-family: var(--font-regular);
    font-weight: var(--font-peso);
    font-size: var(--font-tamaño-d);
    color: var(--color-negro-optimizado);
}

h2{
    font-family: var(--font-regular);
    font-weight: var(--font-peso);
    font-size: var(--font-tamaño-aaaa);
    color: var(--color-negro-optimizado);
}

h3{
    font-family: var(--font-regular);
    font-weight: var(--font-peso);
    font-size: var(--font-tamaño-d);
    color: var(--color-negro-optimizado);
}

h4{
    font-family: var(--font-regular);
    font-weight: var(--font-peso);
    font-size: var(--font-tamaño-aa);
    color: var(--color-negro-optimizado);
}

::selection {
    background-color: var(--color-diamo); /* Cambia el color de fondo de la selección a morado en lugar de azul */
}