/*
Theme Name: blankCanvas
Author: Lattedev
Author URI: https://www.lattedev.com
Description: The blank state official theme, by lattedev.com
Version: 1.1
*/



/* MAPA DE CONTENIDOS:

1) =ROOT:
  1.1) =Variables de personalizacion de pagina
  1.2) =Variables de cambio visual relacionado a al ancho de la pantalla

2) =MEDIA QUERIES:
  2.1) min-width:  360px
  2.2) min-width:  768px
  2.3) min-width: 1200px

3) =TIPOGRAFIAS:

4) =ETIQUETAS GLOBALES:

5) =ESTRUCTURA:

6) =COMPONENTES:
6.1) =intro_card:
6.2) =showoff:
6.3) =flag:
6.4) =multiCards:
6.9) =projects:
6.42) =chapter:

6.6) =BUTTONS:

6.53) =piece:

6.69) =redDot:

FIN DE MAPA DE CONTENIDOS */


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                              1) =ROOT:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

:root {
    font-size: var(--sizeR);
    /* ---------------------------------------------------------------------------
    ------------------------------------------------------------------------------
                1.1) =Variables de personalizacion de pagina
    ------------------------------------------------------------------------------
    --------------------------------------------------------------------------- */
    /* la idea de esto es que sean como controles con los
    que hacer facilmente diferentes versiones de la pagina */

    --lateral:1rem;
    --scrollbar_width:8px;

    
    /* FONTS */
    --font_normal:'Archivo', sans-serif;
    --font_italic:'Archivo-Italic', sans-serif;

    /* COLORS */
    /* Al editar colores siempre usar HEX y nunca
    dejar espacio entre los dos puntos y el color */
    --color_background_normal:#4FECC8;
    --color_background_accent:#000;
    --color_font_normal:#FFF;
    --color_font_accent:red;

    /* SIZES */
    /* Al editar los tamaños, hacerlo siempre sin unidades
    sabiendo que el numero corresponde a la cantidad de pixeles */
    --sizeRa:16;--sizeRb:20;--sizeRc:20;--sizeRd:24;
    /* !PREGUNTA: cual es el tamaño minimo de letra? */

    --sizeR: calc(var(--sizeRa) * 1px);

    /* ---------------------------------------------------------------------------
    ------------------------------------------------------------------------------
        1.2) =Variables de cambio visual relacionado a al ancho de la pantalla
    ------------------------------------------------------------------------------
    --------------------------------------------------------------------------- */
    --onlyDesktopF:none;
    --onlyDesktopG:none;
    --onlyMobileF:flex;
    --onlyMobileG:grid;

    /* ?HEADER */
    /* ?FOOTER */
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            2) =MEDIA QUERIES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        2.1) min-width:  =360px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 360px) {
    :root {
        /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - 400px) / (1024 - 400))); */
        --sizeR: calc(calc(var(--sizeRa) * 1px) + (var(--sizeRb) - var(--sizeRa)) * ((100vw - 360px) / (768 - 360)));

        /* ?HEADER */
        /* ?FOOTER */
    }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        2.2) min-width:  =768px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    :root {
        --sizeR: calc(calc(var(--sizeRc) * 1px) + (var(--sizeRd) - var(--sizeRc)) * ((100vw - 768px) / (1200 - 768)));
        --onlyDesktopG:grid;
        --onlyDesktopF:flex;
        --onlyMobileF:none;
        --onlyMobileG:none;

        /* ?HEADER */
        /* ?FOOTER */
    }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        2.3) min-width:  =1200px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media  screen and (min-width: 1200px) {
    :root {
        --lateral:4rem;
        --sizeR: calc(var(--sizeRd) * 1px);

        /* ?HEADER */
        /* ?FOOTER */
    }
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
                                =LOGIC FOLD
------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            3) =TIPOGRAFIAS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
    @font-face {
        font-family: 'Archivo-Italic';
        src:url('../fonts/archivo/Archivo-Italic-VariableFont_wdth,wght.ttf') format('woff2 supports variations'),
            url('../fonts/archivo/Archivo-Italic-VariableFont_wdth,wght.ttf') format('woff2-variations');
        font-weight: 100 900;
        font-stretch: 62% 125%;
    }
    @font-face {
        font-family: 'Archivo';
        src:url('../fonts/archivo/Archivo-VariableFont_wdth,wght.ttf') format('woff2 supports variations'),
            url('../fonts/archivo/Archivo-VariableFont_wdth,wght.ttf') format('woff2-variations');
        font-weight: 100 900;
        font-stretch: 62% 125%;
    }
  
    .super-bold {
        font-weight: 1000;
    }

    
}
@font-face {
    font-family: "Megrim";
    src: url("fonts/megrim.woff2");
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            4) =ETIQUETAS GLOBALES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: var(--font_normal);
}
i{font-family: var(--font_italic)}
*::-webkit-scrollbar-track{
    border-radius:calc(var(--scrollbar_width) / 2);
    background-color: transparent;
}
*::-webkit-scrollbar{
    width: var(--scrollbar_width);
    position:relative;
    background-color: transparent;
}
*::-webkit-scrollbar-thumb{
    border-radius:calc(var(--scrollbar_width) / 2);
    background-color:var(--brand_color_1);
}

body{
    display:grid;
    min-height:100vh;
    grid-template-rows: 1fr min-content;
    background: var(--color_dark);
    color: var(--color_light);
    /* overflow: hidden; */
    /* text-align: center; */
}
img{object-fit:cover;width:100%;display:block}
a{text-decoration:none}
ul,ol{list-style:none}

.accent{color: var(--color_accent)}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            5) =ESTRUCTURA:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.rowcol1{grid-row:1;grid-column:1}
.onlyDesktopF{display:var(--onlyDesktopF)}
.onlyDesktopG{display:var(--onlyDesktopG)}
.onlyMobileF{display:var(--onlyMobileF)}
.onlyMobileG{display:var(--onlyMobileG)}


.dady_break {
    display: flex;
    flex-wrap: wrap;
    /* NO USAR, gap es genial para grid pero aun no tiene mucho soporte */
    /* gap:.5rem; */
    /* --margin: 1rem; */
    --breakpoint: 768px;
    /* margin: calc(var(--margin) * -1); */
}
.dady_break > * {
    flex-basis: calc( (var(--breakpoint) - 100%) * 999);
    flex-grow: 1;
    /* margin: var(--margin); */
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            6) =COMPONENTES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            6.1) =intro_card:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.hero{
    display:grid;
    /* place-items:center; */
    /* position:relative; */
    /* align-items: center; */
    justify-items: center;
    /* z-index: 2; */
    /* background: var(--color_background_normal); */
    /* color: var(--color_font_normal); */
}




.intro_card {
    display:grid;
    place-self:center;
    grid-gap:.5rem;
    position:relative;
    z-index: 2;
}
.intro_card .name{
    grid-column: 1/3;
}
.intro_card .gender{
    color: var(--color_accent);
    font-size: 1rem;
}
.intro_card .profession{
    grid-row: 2;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.2) =showoff:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.showoff{
    display:grid;
    place-self: center;
    grid-auto-flow: column;
    grid-gap:.5rem;
    margin-left:auto;
    grid-row: 2;
}
.showoff .entry a{
    display:grid;
    color:inherit;
}
.showoff .entry a svg{
    height: 1rem;
    width: auto;
    margin-left: auto;
    transition:.4s;
    fill:var(--color_light);
}
.showoff .entry a svg:hover{
    fill:var(--color_accent);
}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.3) =flag:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.flag_rainbow{
    position: absolute;
    left:calc(50% - 120px);
    transform: translateX(-50%);
    display:grid;
    grid-auto-flow: column;
    z-index: 1;
}

.flag_rainbow .color.color_1{background: red}
.flag_rainbow .color.color_2{background: orange}
.flag_rainbow .color.color_3{background: yellow}
.flag_rainbow .color.color_4{background: lime}
.flag_rainbow .color.color_5{background: blue}
.flag_rainbow .color.color_6{background: purple}

.flag_rainbow .color{
    min-width: 10px;
    height: 100vh;
}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.4) =multiCards:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.9) =projects:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.projects{
    display:grid;
    /* grid-gap: 1rem; */
    /* padding: 1rem; */
    /* margin: 0 auto; */
    /* max-width: 1200px; */
    /* align-items: center; */
    /* justify-items: center; */
    padding: 4rem 1rem;
    z-index: 3;
}
.proj_list{
    --magic_with_from_intro_card: 8rem;
    display:grid;
    grid-gap: 1rem;
    grid-auto-rows: min-content;
    /* width: 50%; */
    max-width: calc(50% + var(--magic_with_from_intro_card) / 2);
    position: relative;
    left: calc(50% - var(--magic_with_from_intro_card) / 2);
    /* padding: 1rem; */
    /* margin: 0 auto; */
    /* max-width: 1200px; */
}
.project_list{
    display:grid;
    grid-gap: .5rem;
    /* grid-auto-rows: min-content; */
}
.project_item{
    display:grid;
    margin-right: auto;
    grid-auto-flow: column;
    /* grid-template-columns: 1fr 1fr; */
    grid-gap: 1rem;
    padding-left: 1rem;
    align-items: center;
    /*justify-items: center;
    position: relative; */
    /* padding: 1rem; */
    /* margin: 0 auto; */
}
.project_link{
    text-decoration: underline;
    color: var(--color_accent);
}
.project_status{
    /* color: rgb(102, 150, 249); */
    /* color: var(--color_accent); */
}
.status_classified{color: rgb( 42,  42,  42)}
.status_active    {color: rgb(102, 150, 249)}
.status_paused    {color: rgb(132, 132, 132)}
.proj_status_decorator{
    text-decoration: none;
    font-size: .7rem;
    color: var(--color_light);
}

.lista_title .lista_name{
	/* font-size: 3rem; */
    font-weight: 800;
	font-family: 'Megrim', system-ui;
}
.lista_title .lista_version{
    font-size: 0.7rem;
}
.lista_title{
	align-items: baseline;
	display: grid;
	grid-template-columns: max-content max-content;
	grid-gap: .5rem;
	/* margin:auto; */
	/* font-family: 'Megrim', system-ui; */
}








/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.6) =BUTTONS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.42) =chapter:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.project_hero{
    padding: 3rem 3rem;
    display:grid;
    grid-gap: 1rem;
    padding: 5rem 0;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
}
.project_title{
    font-size: 2rem;
    color: var(--color_accent);
}
.project_description{
    text-align: left;
    line-height: 1.5;
    text-indent: 4rem;
}
.chapter{
    display:grid;
    grid-template-rows: min-content 1fr;
    /* grid-gap: .5rem; */
    padding: 1rem;
    margin: 0 auto;
    max-width: 1200px;
    /* max-width: calc(100% - 2 * var(--lateral)); */
    text-indent: 4rem;
}
.chapter_sub_title{
    color: var(--color_accent);
    margin-bottom: 2rem;
}
.new_message_notification{
    height: 0;
    width: 0;
    transform: translate(-1rem, 3rem) rotate(-35deg);
}
.word_mirror{
    display: inline-block;
    transform: rotate(-9deg);
    text-indent: 0rem;
}
.word_echo_chamber{
    display: inline-block;
    transform: rotate(5deg);
    text-indent: 0rem;
}
.chapter .piece_1{
    position: fixed;
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; */
    /* background: var(--color_background_normal); */
    /* background-image: url('../img/piece_1.png'); */
    /* background-size: cover; */
    /* background-position: center; */
}
.separator{
    width: 100%;
    height: 1px;
    background: var(--color_accent);
    margin: 1rem auto;
}
.chapter_date{
    text-align: right;
}
.chapter_text{
    line-height: 1.5;
    text-indent: 4rem;
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.53) =piece:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.piece_1{
    position:absolute;
    height:100vmax;
    width:auto;
    /* bottom: 0; */
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.69) =redDot:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
#redDotExample{bottom:0}
.redDot {
    border-radius: 50%;
    height: 3rem;
    position: absolute;
    right: 10vw;
    width: 3rem!important;
    z-index:12;
}
.redDot.test{background:red}