/**/

/* https://gwfh.mranftl.com/fonts/manrope?subsets=latin */
/* https://fonts.google.com/specimen/Bebas+Neue
 * https://fonts.google.com/specimen/Montserrat
 * https://fonts.google.com/specimen/Lato
 * https://fonts.google.com/specimen/Oswald
 * https://www.fontshare.com/fonts/epilogue
 
 * https://www.fontshare.com/fonts/azeret-mono
 * https://www.fontshare.com/fonts/clash-display
 * https://fonts.google.com/specimen/Rubik
 * https://fonts.google.com/specimen/Manrope */

@font-face { 
  font-family:'font'; font-display:swap; font-style:normal; font-stretch: condensed; font-weight:400;
  src: url('../../fonts/psn_400.woff2') format('woff2'); }
@font-face { 
  font-family:'font'; font-display:swap; font-style:normal; font-stretch: condensed; font-weight:700;
  src: url('../../fonts/psn_700.woff2') format('woff2'); }
@font-face { 
  font-family:'font'; font-display:swap; font-style:normal; font-stretch: condensed; font-weight:800;
  src: url('../../fonts/bn_400.woff2') format('woff2'); }


/* @dox :: https://cssgrid-generator.netlify.app/ */
* { 
  word-break:normal; 
  word-wrap:break-word; 
  text-decoration:none; 
  scroll-behavior:smooth; 
  -ms-overflow-style:none;
  /* scrollbar-width:none; */
  /* unselectable text */
  user-select:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-family:'font', sans-serif;
}

body { 
  display:flex;
  align-items:center;
  justify-content:center;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:800;
}


/* disable any scrolling... */
::-webkit-scrollbar, ::-webkit-scrollbar { display:none !important; }
/* ... despite explicit*/
/* :-ms-input-placeholder { color: var(--color-primary-accent); } */
/* ::-ms-input-placeholder { color: var(--color-primary-accent); } */
.scrollable { overflow:auto; }
.scrollable::-webkit-scrollbar { 
    display: initial !important; 
    height: var(--border-radius-secondary);
   width: var(--border-radius-secondary); 
}
.scrollable::-webkit-scrollbar-thumb { 
    background-color:var(--color-background-secondary); 
    background-clip:padding-box; 
}
.scrollable::-webkit-scrollbar-thumb:hover { 
    background-color: var(--color-secondary-accent); 
}
.scrollable::-webkit-scrollbar-corner{ 
   background-color: var(--color-primary-accent); 
   display:none; 
} 

::selection { 
    color:var(--color-primary); 
    background:var(--color-primary-accent); 
}
::-moz-selection { 
    color:var(--color-primary); 
    background:var(--color-primary-accent); 
}


/* Utils */
.hide { display:none !important; }
.stretch { width:100%; height:100%; flex:1 0 0px; }

.u-no-pad { padding:0 !important; }
.u-no-margin { margin:0 !important; }
/* Utils */



@property --width-box {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 25%;
}
@property --height-box {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 25%;
}
/* Box */
.box {
  position:absolute;
  padding:var(--container-padding);
  max-height:var(--height-box);
  width:var(--width-box);
  box-sizing:border-box;
  box-shadow:var(--color-primary-shadow) 0px 3px 8px;
  background-color: var(--color-background); 
}
.box.box-s { width:15%; }
.box.box-m { width:25%; }
.box.box-l { width:50%; }

/* Box */
/* Flexbox */
.flex { 
  display:flex;
  justify-content:start;
  align-items:start; 
  flex-wrap: wrap;

  padding:var(--container-padding);
}
.flex .f-1 { flex:1 0 0px; }
.flex .f-2 { flex:2 0 0px; }
.flex .f-3 { flex:3 0 0px; }
.flex .f-4 { flex:4 0 0px; }
.flex .f-5 { flex:5 0 0px; }
.flex .f-6 { flex:6 0 0px; }
.flex .f-7 { flex:7 0 0px; }
.flex .f-8 { flex:8 0 0px; }
.flex .f-9 { flex:9 0 0px; }

.flex.vertical { flex-direction:column; }
.flex.horizontal { flex-direction:row; }
.flex.left { justify-content:start; }
.flex.right { justify-content:end; }
.flex.top { align-items:start; }
.flex.bottom { align-items:end; }
.flex.center { justify-content:center; align-items:center; }
/* Flexbox */



@property --color-a-background {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}
@property --color-a-border {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}
@property --width-a-border {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}
@property --color-a-text {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

a {
    background:var(--color-a-background); 
    border:var(--width-a-border) solid var(--color-a-border);
    color:var(--color-a-text);
    text-decoration:none;
    padding:.25rem .5rem;
    margin-right:.5rem;
    cursor:pointer;
}
a:last-child { margin-right:0; }


a.primary { --color-a-background:blue;--color-a-border:blue;--color-a-text:white; }
a.primary.error {}
a.primary.warning {}
a.primary.info {}
a.primary.debug {}

a.secondary { --color-a-background:transparent;--color-a-border:red;--color-a-text:black; }
a.secondary.error {}
a.secondary.warning {}
a.secondary.info {}
a.secondary.debug {}



@property --color-input-background {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}
@property --color-input-border {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}
@property --width-input-border {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}
@property --color-input-text {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}


input, input:focus {
    background-color:var(--color-input-background);
    border:var(--width-input-border) solid var(--color-input-border);
    outline:var(--width-input-border) solid var(--color-input-border);
    color:var(--color-input-text);
    padding:.25rem .5rem;
}

input.primary { --color-input-background:transparent;--color-input-border:blue;--color-input-text:black; }
input.primary.error { --color-input-border:red;--color-input-text:red; }
input.primary.warning { --color-input-border:orange;--color-input-text:orange; }
input.primary.info { --color-input-border:blue;--color-input-text:blue; }
input.primary.debug { --color-input-border:gray;--color-input-text:gray; }

input.secondary { --color-input-background:blue;--color-input-border:blue;--color-input-text:white; }
input.secondary.error { --color-input-border:red; }
input.secondary.warning { --color-input-border:orange; }
input.secondary.info { --color-input-border:red; }
input.secondary.debug { --color-input-border:red; }