@import url('./common.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;
}
@property --vw{
  syntax: '<length>';
  inherits:true;
  initial-value:100vw;
}
@property --vh{
  syntax: '<length>';
  inherits:true;
  initial-value:100vh;
}
:root{
  --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:50px;
  width:200px;
  width:50px;
  position:fixed;
  inset:0;
  right:20px;
  top:20px;
  /* width:fit-content;
  height:fit-content; */
  margin:auto;
  font-family: var(--font-family);
}