<script>
import { css } from './css.js';
let fontSize = 2;
let color = "#000";
</script>
<style>
h1 {
--fontSize:;
font-size: calc(var(--fontSize) * 1rem);
color: inherit;
}
.container {
--color: black;
color: var(--color);
display: grid;
place-items: center;
row-gap: 16px;
}
</style>
<div use:css={{ color }} class="container">
<h1 use:css={{ fontSize }}>Hello world!</h1>
<input type="range" bind:value={fontSize} min="1" max="5"/>
<input type="color" bind:value={color} />
<div >
h1 font size: <strong>{fontSize}rem</strong>
</div>
<div>
Current color: <strong>{color}</strong>
</div>