wiki/style/sample.css

h1 {
    color: hotpink;
    font-family: cursive;
    display: inline-block;
    position:sticky;
    top: 0;
  }
canvas{
  width:50%;
  height:50%;
  align-items: center;
  border: 1px solid black;
}
html[data-theme="light"]{
  --body-background-color:rgba(255, 255, 255, 0.333);
  --font-color:rgb(2, 2, 2);
  --a-color:rgba(71, 220, 71, 0.133);
  --a-link-color:rgba(71, 220, 71, 0.133);
  --a-hover-color:rgba(71, 220, 71, 0.133);
  --a-active-color:rgba(71, 220, 71, 0.133);  
  --a-visited-color:rgba(71, 220, 71, 0.133);
}
html[data-theme="dark"]{
  --body-background-color:#121929;
  --font-color:#DED8D4;
  --a-color:#DED8D4;
  --a-link-color:rgba(71, 220, 71, 0.133);
  --a-hover-color:#862930;
  --a-active-color:#DED8D4;
  --a-visited-color:#DED8D4;

}
@property --vw{
  syntax: '<length>';
  inherits:true;
  initial-value:100vw;
}
@property --vh{
  syntax: '<length>';
  inherits:true;
  initial-value:100vh;
}
:root{
  --body-background-color:rgba(53, 139, 225, 0.333);
  --background-color:rgba(53, 139, 225, 0.333);
  --backdrop-color:rgba(94, 164, 235, 0.3);
  --font-color:rgb(91, 158, 91);
  --font-shadow-color:rgb(91, 158, 91);
  --filter-color:rgb(91, 158, 91);
  --filter-shadow-color:rgb(91, 158, 91);
  --hover-color:rgba(71, 220, 71, 0.133);
  --a-color:rgba(71, 220, 71, 0.133);
  --a-link-color:rgba(71, 220, 71, 0.133);
  --a-hover-color:rgba(71, 220, 71, 0.133);
  --a-active-color:rgba(71, 220, 71, 0.133);  
  --a-visited-color:rgba(71, 220, 71, 0.133);
  --normal-color:rgba(190, 243, 238, 0.133);
  --notice-color:rgba(88, 144, 235, 0.133);
  --warming-color:rgba(240, 218, 75, 0.133);
  --wrong-color:rgba(243, 31, 31, 0.133);
  --red:#122;
  --green:#122;
  --blue:#122;
  --black:#122;
  --white:#122;
  --gray:#122;
  --yellow:#122;
  --purple:#122;
  --pink:#122;
  --orange:#122;
  --brown:#122;
  --cyan:#122;
  --magenta:#122;
  --C:#122;
  --M:#122;
  --Y:#122;
  --K:#122;
  --plate-size-default:98%;
  --font-size:12px;
  --font-default-size:12px;
  --font-scale-size:24px;
  --font-scale-default-size:24px;
  --title-size:18px;
  --title-default-size:18px;
  --content-size:12px;
  --content-default-size:12px;
  --button-text-size:15px;
  --button-text-default-size:15px;
  --test-border:2px solid black;
  --production-border:2px solid black;
  --w:tan(atan2(var(--vw),1px));
  --h:tan(atan2(var(--vh),1px));
}
body::before{
  content:counter(w) "x" counter(h);
  counter-reset: w var(--w) h var(--h);
  font-size:100px;
  position:fixed;
  inset:0;
  width:fit-content;
  height:fit-content;
  margin:auto;
}
body{
  background-color: var(--body-backdrop-color);
  color: var(--font-color);
}
body a{
  color:var(--a-color);
}
body a:hover{
  color:var(--a-hover-color);
}
body a:visited{
  color:var(--a-visited-color);
}