:root{

--version: "v 6.7";

/*COLORS
//rgba(var(--tint1).5);
///////////////////////////*/
--black0:   0,0,0,;
--black1:   50,50,50,;
--black2:   100,100,100,;
--black3:   200,200,200,;
--white0:   255,255,255,;
--white1:   238,238,238,;
--tint1:    16,231,220,;  /*#10E7DC*/
--tint2:    0,116,225,;   /*#0074E1*/
--tint3:    27,156,229,;  /*#1B9CE5*/
--tint4:    108,218,238,; /*#6CDAEE*/
--tint5:    247,158,2,;   /*#F79E02*/
--gray0: #E7E7E7;
--gray1: #FAFAFA;
--blue1: #19b;
--blue2: #bef;
--dark1: #3A3A3A;



/* FONT SIZES
////////////////////*/
--fs3: clamp(12px, 2.4em, 2.4em);
--fs1: 1.5cqmax;
--fs0: 2.5cqmin;
--fs01: 1.8cqmin;
--fs02: 1.4cqmin;
--fs03: .9cqmax;



/* FONT FAMILIES
//font-family: var(--ff-sans);//
//////////////////////////////*/

--ff-jap: 'japan-heavy';
--ff-jap2: 'japan-regular';
--ff-hand: 'eng-hand';

--ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

--ff-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

--ff-mono: Lucidatypewriter, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", ui-monospace, "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", Andale Mono, Courier New, Courier, Fixed, monospace;

--ff-handwrite: Parkavenue, Florence, Coronetscript, Zapf Chancery, Comic Sans, Comic Sans MS, cursive;

--ff-fantasy: Arnoldboecklin, Oldtown, Blippo, Brushstroke, Impact, fantasy;

--ff-cursive: Brush Script, Brush Script MT, Brush Script MT Italic, Edwardian Script ITC, Apple Chancery,Segoe Script, Cantarell;





/* DIMENTIONS
////////////////////*/
--size-corners: 1cqmax;
--tagsize: 1cqmax;

/* --gapMM: 1cqmax; */
--gapM: 1cqmax;
--gapS: .5cqmax;
--gapSS: .5cqmin;



/* STYLES
////////////////////*/

--text-shadow1: 
  1ch 1ch 0px red, 
  -1ch -1ch 0px red, 
  1ch -1ch 0px red,  
  -1ch 1ch 0px red;






}



@font-face {
font-family: 'japan-heavy';
src: url('/font/HGSoeiKakupoptai.ttf');}
@font-face {
font-family: 'eng-hand';
src: url('../font/KGMissKindergarten.ttf');
src: url('../font/KGMissKindergarten.ttf') format('truetype');}
@font-face {
font-family: 'japan-regular';
src: url('../font/UDDigiKyokashoNB.ttf');
src: url('../font/UDDigiKyokashoNB.ttf') format('truetype');
}


/* include padding in total width */
*, *::before, *::after {
box-sizing: border-box;
transition: all .1s linear;
}


html{
color-scheme: light; /* only light mode supported  */
hanging-punctuation: first last;
}

body{
min-height: 100dvh;
overflow: hidden;
font-family: var(--ff-sans);
font-size: var(--fs0);
}

html, body {
width: 100%;
overflow-x: hidden;
max-width: 100dvw;
}

/* make media responsive */
img, picture, svg, video {
max-width: 100%;
vertical-align: middle;
height: auto;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: .75rem;

}

/* consistant font properties */
input, button, textarea, select {
font: inherit;
}

/* text wrap readability */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
overflow-wrap: break-word;
word-wrap: break-word; /* For older browsers */
word-break: break-word;
}
p, li, figcaption, small{
text-wrap: pretty;
}

/* scale by containing block */
header,footer,main,section,article{
container-type: inline-size;
}

a,a:visited {
text-decoration: none;
color: inherit;
}


button{
cursor: pointer;
border: none;
background-color: unset;
}

input{cursor: pointer;}



*{
margin: 0;
padding: 0;
font: inherit;
}

*:focus{outline:none;}
  
  
  

js-style{
  position: absolute;
  z-index: -10;
  visibility: hidden;
}

































body{
display: grid;
grid-template-columns: 1fr auto;
}
body > main{
  /* z-index: 1; */
  display: grid;
  container-type: inline-size;
  width: 100%;



  &.js_oneone{
    overflow:scroll;
    /* display:block; */
    max-width: 100vw;
    max-height: 100dvh;
  }

  & main{
    padding: .5cqw;
  }
}




obj-dialog{
  container-type: inline-size;
}


#doc_title{
  position: fixed;
  bottom: 0;
  background-image: 
  linear-gradient(to bottom,
  var(--gray1),
  var(--gray0));
  font-family: var(--ff-sans);
  /* font-size: 1.1cqw; */
  font-weight: 100;
  padding: 0.3ch 1ch ;
  border-top-right-radius: 1.5ch;
    & span{font-weight: 600;}
}




 









/* OLD VERSION COMPATIBILITY TWEAKS */
menu-doctype{display: none;}
obj-bubble > js-button{display: none;}


/* END OF FILE */