/* SQUARE DESIGN */
*{
    font-size: calc(100vw / 24);
}

@media screen and (min-width: 100vh){
    *{
        font-size: calc(80vw / 24);
    }
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
}
body{  
    width: 24rem;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    word-break : break-all;
}
img{
    max-width: 100%;
    max-height: 100%;
}
a{
    text-decoration: none;
}
ul , li{
    list-style: none;
}
p {
    width: 100%;
}


/* FONT FAMIRY */
[style *= "--family"]{
    --family: sans-serif;
}
[style *= "--family"]{
    font-family: var(--family);
}


/* FONT WEIGHT */
[style *= "--weight"]{
    --weight: 400;
}
[style *= "--weight"] ,
[style *= "--weight"] *{
    font-weight: var(--weight);
}

/* LINE HEIGHT */
[style *= "--space"]{
    --space: 1.5rem;
}
[style *= "--space"]{
    line-height: var(--space);
}

@media screen and (max-width: 100vh){
/* STICKY ELEMENT */
[style *= "--sticky"]{
    --sticky: 0;
    --sticky-top: 0;
}
[style *= "--sticky"]{
    position: -webkit-sticky;
    position: sticky;
    z-index: 9999;
}
[style *= "--sticky"]{
    top: calc(var(--sticky) * 1rem);
}
}


/* SPLIT SIZE */
[style *= "--split"]{
    --split: 24;
}
[style *= "--split"] ,
[style *= "--split"] *{
    font-size: calc(24rem / var(--split));
}


/* LIST SYSTEM */
[style *= "--li"]{
    --li-w: 24;
    --li-h: 3;
    --li-p: 0;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}
[style *= "--li"]>li{
    width: calc(0.999 * var(--li-w) * 1rem);
    padding: calc(1rem * var(--li-p));
}
[style *= "--li-h"]>li{
    height: calc(0.999 * var(--li-h) * 1rem);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}


/* GRID SYSTEM */
section[style *= "--h"]{
    --w: 24;
    --h: 2;
    --x: 0;
    --y: 0;
}
section[style *= "--h"]{
    display: grid;
    grid-template-columns: repeat(24 , 1fr);
    grid-template-rows: repeat(var(--h) , 1rem);
}
section[style *= "--h"]>*{
    grid-area: calc(1 + var(--y)) / calc(1 + var(--x)) / span var(--h) / span var(--w);
}


/* PADDING */
[style *= "--pd"]{
    --pd: 0;
}
[style *= "--pd"]{
    padding: var(--pd);
}


/* MARGIN */
[style *= "--mg"]{
    --mg: 0;
}
[style *= "--mg"]{
    margin: var(--mg);
}


/* TEXT ALIGN */
[style *= "--txt"]{
    --txt: left;
}
[style *= "--txt"]{
    text-align: var(--txt);
}


/* BACK GROUND COLOR */
[style *= "--bg-c"]{
    --bg-c: #888;
}
[style *= "--bg-c"]{
    background-color: var(--bg-c);
}


/* COLOR */
[style *= "--clr"]{
    --clr: #888;
}
[style *= "--clr"] ,
[style *= "--clr"] *{
    color: var(--clr);
}


/* BORDER */
[style *= "--bd"]{
    --bd: 1px solid #000;
}
[style *= "--bd"]{
    border: var(--bd);
}


/* BORDER RADIUS */
[style *= "--bd-r"]{
    --bd-r: 50%;
}
[style *= "--bd-r"]{
    border-radius: var(--bd-r);
}


/* BOX SHADOW */
[style *= "--shadow"]{
    --shadow: 0;
}
[style *= "--shadow"]{
    box-shadow: var(--shadow);
}


/* BORDER TOP */
[style *= "--line"]{
    --line: 1px solid #eee;
}
[style *= "--line"]{
    border-top: var(--line);
}


/* WIDE CLICK AREA */
[style *= "--wide"]{
    display: inline-block;
    width: 100%;
    --wide: auto;
}
[style *= "--wide"]{
    height: var(--wide);
}