@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

:root                            { 

  --font-main:    'Outfit',        sans-serif;
  --font-mono:    'Inconsolata',   monospace;
  --font-grotesk: 'Space Grotesk', sans-serif;

  --carbon05:  #1B1C1C05;
  --carbon10:  #1B1C1C10;
  --carbon15:  #1B1C1C15;
  --carbon25:  #1B1C1C25;
  --carbon35:  #1B1C1C35;
  --carbon50:  #1B1C1C50;
  --carbon65:  #1B1C1C65;
  --carbon80:  #1B1C1C80;
  --carbon90:  #1B1C1C90;
  --carbon99:  #1B1C1C99;

  --carbon:    #1B1C1C;

  --ceniza05:  #2B2C2C05;
  --ceniza10:  #2B2C2C10;
  --ceniza15:  #2B2C2C15;
  --ceniza25:  #2B2C2C25;
  --ceniza35:  #2B2C2C35;
  --ceniza50:  #2B2C2C50;
  --ceniza65:  #2B2C2C65;
  --ceniza80:  #2B2C2C80;
  --ceniza90:  #2B2C2C90;
  --ceniza99:  #2B2C2C99;

  --ceniza:    #2B2C2C;

  --polvo05:   #3C3C3C05;
  --polvo10:   #3C3C3C10;
  --polvo15:   #3C3C3C15;
  --polvo25:   #3C3C3C25;
  --polvo35:   #3C3C3C35;
  --polvo50:   #3C3C3C50;
  --polvo65:   #3C3C3C65;
  --polvo80:   #3C3C3C80;
  --polvo90:   #3C3C3C90;
  --polvo99:   #3C3C3C99;

  --polvo:     #3C3C3C;

  --humo05:    #AAABAC05;
  --humo10:    #AAABAC10;
  --humo15:    #AAABAC15;
  --humo25:    #AAABAC25;
  --humo35:    #AAABAC35;
  --humo50:    #AAABAC50;
  --humo65:    #AAABAC65;
  --humo80:    #AAABAC80;
  --humo90:    #AAABAC90;
  --humo99:    #AAABAC99;

  --humo:      #AAABAC;

  --niebla05:  #D8DADE05;
  --niebla10:  #D8DADE10;
  --niebla15:  #D8DADE15;
  --niebla25:  #D8DADE25;
  --niebla35:  #D8DADE35;
  --niebla50:  #D8DADE50;
  --niebla65:  #D8DADE65;
  --niebla80:  #D8DADE80;
  --niebla90:  #D8DADE90;
  --niebla99:  #D8DADE99;

  --niebla:    #D8DADE;

  --brillo05:  #F2F2F205;
  --brillo10:  #F2F2F210;
  --brillo15:  #F2F2F215;
  --brillo25:  #F2F2F225;
  --brillo35:  #F2F2F235;
  --brillo50:  #F2F2F250;
  --brillo65:  #F2F2F265;
  --brillo80:  #F2F2F280;
  --brillo90:  #F2F2F290;
  --brillo99:  #F2F2F299;

  --brillo:    #F2F2F2;

  --lirio05:   #986C9805;
  --lirio10:   #986C9810;
  --lirio15:   #986C9815;
  --lirio25:   #986C9825;
  --lirio35:   #986C9835;
  --lirio50:   #986C9850;
  --lirio65:   #986C9865;
  --lirio80:   #986C9880;
  --lirio90:   #986C9890;
  --lirio99:   #986C9899;

  --lirio:     #986C98;
  
  --cristal05: #8AB6BB05;
  --cristal10: #8AB6BB10;
  --cristal15: #8AB6BB15;
  --cristal25: #8AB6BB25;
  --cristal35: #8AB6BB35;
  --cristal50: #8AB6BB50;
  --cristal65: #8AB6BB65;
  --cristal80: #8AB6BB80;
  --cristal90: #8AB6BB90;
  --cristal99: #8AB6BB99;

  --cristal:   #8AB6BB;

  --arcilla05: #85494905;
  --arcilla10: #85494910;
  --arcilla15: #85494915;
  --arcilla25: #85494925;
  --arcilla35: #85494935;
  --arcilla50: #85494950;
  --arcilla65: #85494965;
  --arcilla80: #85494980;
  --arcilla90: #85494990;
  --arcilla99: #85494999;

  --arcilla:   #854949;

  --poma05:    #6FAC6705;
  --poma10:    #6FAC6710;
  --poma15:    #6FAC6715;
  --poma25:    #6FAC6725;
  --poma35:    #6FAC6735;
  --poma50:    #6FAC6750;
  --poma65:    #6FAC6765;
  --poma80:    #6FAC6780;
  --poma90:    #6FAC6790;
  --poma99:    #6FAC6799;

  --poma:      #6FAC67;

  --shadow-border: inset 0 0 0 1px;
  --small-outline: 1px solid;

  --radius-xl: 12px;
  --radius-ll: 10px;
  --radius-mm: 08px;
  --radius-ss: 05px;
  --radius-xs: 03px;

  --animate-fast: 0.25s ease;
  --animate-mid:  0.50s ease;
  --animate-long: 0.80s ease;

  --alpha-invisible: 0.00;
  --alpha-half:      0.50;
  --alpha-disabled:  0.25;

  --scale-min: scale(0.99);
  --scale-low: scale(0.95);

}

*                                { box-sizing: border-box; }

body                             { 

  /* LAYOUT */ display: grid; min-height: 100vh; padding: 0; margin: 0; grid-template-columns: 260px 1fr;
  /* FONT   */ font-family: 'Inconsolata', monospace; font-size: 13px; line-height: 1.4;
  /* FILL   */ background-color: var(--carbon); color: var(--humo);
  /* IMG    */ background-image: url(/assets/square.gif); background-repeat: repeat-x;

}

.static-nav                      { 

  /* LAYOUT */ display: flex; flex-direction: column; position: sticky; top: 0; overflow-y: auto;
  /* BOX    */ height: 100vh; padding: 2rem 1.5rem;

}

.site-logo                       { 

  /* FONT    */ font-size: 26px; font-weight: 700; letter-spacing: 2px; line-height: 1;
  /* BOX     */ margin-bottom: -0.8rem;
  /* FILL    */ color: var(--lirio);

}

.profile-box                     { 

  /* LAYOUT */ display: flex; flex-direction: column; align-items: flex-start;
  /* BOX    */ gap: 0.8rem; padding: 0.8rem; padding-top:1.15rem;
  /* BORDER */ border: 1px solid var(--polvo); box-shadow: inset 0 6px 0 0 var(--cristal); border-radius: 0;
  /* FILL   */ background-color: var(--carbon);
  
}

.profile-img                     { 

  /* LAYOUT */ display: block; object-fit: cover;
  /* BOX    */ width: 100%; height: 100%; margin: 0;
  /* BORDER */ border: 1px solid var(--polvo); border-radius: 0;
  
}

.separator-margin                { 

  /* BOX    */ padding-bottom: .25rem; margin-top: 1rem; margin-bottom: 1rem;
  /* BORDER */ border-bottom: 1px dashed var(--polvo); border-top: none;
  /* FONT   */ font-size: .9rem; font-weight: 700; text-transform: lowercase; letter-spacing: 1px; text-align: left;
  /* FILL   */ color: var(--lirio); 
  
}

.separator-nomargin              { 

  /* BOX    */ padding-bottom: .25rem; margin-bottom: -0.5rem;
  /* BORDER */ border-bottom: 1px dashed var(--polvo); border-top: none;
  /* FONT   */ font-size: .9rem; font-weight: 700; text-transform: lowercase; letter-spacing: 1px; text-align: left;
  /* FILL   */ color: var(--lirio); 
  
}

.post-content                    { 

  /* LAYOUT */ display: flex; flex-direction: column; overflow-y: auto;
  /* BOX    */ padding: 2rem 3rem; padding-right: 50vw; width: 100%;

}

.profile-link:hover .profile-img { border-color: var(--lirio); }

.sidebar-content                 { display: flex; flex-direction: column; gap: 1rem;      }
.site-subtitle                   { font-style: italic; color: var(--humo); opacity: 0.85; }
.profile-link                    { flex-shrink: 0; cursor: pointer;                       }

.cat-header                      { color: var(--cristal); font-weight: 700; opacity: 0.6; margin: .25rem; }

.nav-links                       { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;    }
.nav-links a                     { display: inline-block; border: 1px solid var(--polvo); padding: 2px 6px; color: var(--cristal); }
.nav-links a:hover               { font-weight: 700; text-decoration: none; border-color: var(--cristal);                          }

.post-content p                  { margin-top: .5rem; margin-bottom: .5rem; }
.post-header                     { margin-bottom: 1rem;                     }
.post-content img                { border: none; width: 100%; height: 100%; }
.post-content p a                { 

  /* FILL   */ background: linear-gradient(125deg, var(--cristal), var(--lirio)); background-clip: text;
  /* FONT   */ font-family: var(--font-main); text-decoration: underline; text-decoration-color: var(--cristal80); text-underline-offset: 3px; 
  /* MOTION */ transition: text-decoration-color 0.25s ease;
  /* WEBKIT */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;

  &:hover { 
    
    /* FILL   */ background: linear-gradient(250deg, var(--cristal), var(--lirio)); background-clip: text;
    /* FONT   */ text-decoration: underline; text-decoration-color: var(--lirio);
    /* WEBKIT */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  
  }

}

.YTVideo                         { width: 100%; }

.S6TRAD img                      { margin-top: 1rem; margin-bottom: .5rem; }
.S7TEXT                          { margin-top: 2rem; display: flex; flex-direction: column; }
.S7TEXT a                        { 

  /* FILL   */ background: linear-gradient(125deg, var(--cristal), var(--lirio)); background-clip: text;
  /* FONT   */ font-family: var(--font-main); text-decoration: underline; text-decoration-color: var(--cristal80); text-underline-offset: 3px; 
  /* MOTION */ transition: text-decoration-color 0.25s ease;
  /* WEBKIT */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;

  &:hover { 
    
    /* FILL   */ background: linear-gradient(250deg, var(--cristal), var(--lirio)); background-clip: text;
    /* FONT   */ text-decoration: underline; text-decoration-color: var(--lirio);
    /* WEBKIT */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  
  }

}

.article-list                    { display: flex; flex-direction: column; gap: .5rem; list-style: none; padding: 0; margin: 0;     }
.article-list a                  { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;                 }
.article-list a:hover            { color: var(--cristal);                                }
.article-list a::before          { content: ">"; margin-right: 8px; color: var(--polvo); }
.article-list a:hover::before    { color: var(--lirio);                                  }

.post-header h1                  { 

  /* FONT   */ font-family: 'Inconsolata', monospace; font-variant: small-caps; line-height: 1.1;
  /* BOX    */ padding-bottom: .25rem; margin-bottom: .25rem;
  /* FILL   */ color: var(--cristal);
  /* BORDER */ border-bottom: 1px dashed var(--polvo);

}

.post-header .meta               { font-size: 1rem; font-style: italic; color: var(--lirio); }
.post-header img                 { border: none; margin: none;}

/* RESET --------------------------------------------------------------------------------------------- */

a:focus, button:focus, input:focus, textarea:focus, select:focus, tbody tr:focus-within { outline: none; box-shadow: inset 0 0 0 250px var(--lirio80), 0 0 0 2px var(--carbon99); transition: all var(--animate-fast); }

h1                               { margin: 0; }
p                                { margin: 0; max-width: none;                                     }
img                              { border: 1px solid var(--polvo); margin: none;                   }
ul, ol                           { margin-bottom: 1rem; padding-left: 1.2rem;                      }
li                               { margin: 0;                                                      }
hr                               { border: 0; border-top: 1px dashed var(--polvo); margin: 2rem 0; }
strong, b                        { color: var(--lirio);   font-weight: 700;                        }
i, em                            { color: var(--cristal); font-style: italic;                      }
a                                { color: var(--humo); text-decoration: none;                      }
a:hover                          { color: var(--cristal);                                          }

blockquote                       { 

  /* BORDER */ border-left: 3px solid var(--lirio);
  /* BOX    */ margin: 1.5rem 0; padding: 0.5rem 1rem;
  /* FILL   */ background-color: var(--ceniza);
  /* FONT   */ font-style: italic;

}

@supports not selector(::-webkit-scrollbar)   { *, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--lirio) transparent; }                   }

audio[controls]                               { width: 100%; background: var(--carbon);                                                                        }
audio::-webkit-media-controls-enclosure       { border: var(--small-outline) var(--humo25); border-radius: var(--radius-ss); background-color: var(--lirio35); }
audio::-webkit-media-controls-enclosure:hover { background-color: var(--lirio65);                                                                              }

::selection                      { background-color: var(--lirio); color: var(--carbon);   }
::-moz-selection                 { background-color: var(--lirio); color: var(--carbon);   }
::-webkit-scrollbar              { background-color: transparent; width: 4px; height: 4px; }
::-webkit-scrollbar-thumb        { background-color: var(--lirio); border-radius: 0;       }
::-webkit-scrollbar-track        { background: transparent; border-radius: 0;              }
::-webkit-scrollbar-button       { display: none; width: 0; height: 0;                     }
::-webkit-scrollbar-corner       { background-color: transparent;                          }

@media (max-width: 900px)        { 
  
  body          { grid-template-columns: 1fr; }
  .static-nav   { height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--polvo); padding: 1.5rem; }
  .post-content { padding: 1.5rem; padding-right: 1.5rem; }
  .nav-links    { flex-direction: row; flex-wrap: wrap;   }

}