เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (Branch 11704) (Copy 11729) (Branch 11733) (Copy 13459)

เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (..

✨ PONGSIRI SUWANNASILP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
            box-sizing: border-box;
        }
        :root{
            --pad: 20;
            --color: 16.5;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }
        .text{
            width: 300px;
            background-color: hsl(calc(var(--color) * 20), 78%, 60%);
            padding: calc(var(--pad) * 2px);
            font-size: 20px;
            text-align: center;
            border-radius: 15%;
            box-shadow: 10px 10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
            -10px -10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
            -10px 10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
            10px -10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5)
        }
        nav{
            position: fixed;
            display: flex;
            padding: 20px;
            top: 0;
            left: 0;
            border-bottom: 2px solid red;
            width: 100%;
        }
        .bt{
            display: flex;
            flex-direction: column;
            align-items: center;
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <nav>
        <div class="bt color">
            <p>Change color</p>
            <input type="range" min="10" max="30" step="1" value="20" id="color">
        </div>
        <div class="bt pad">
            <p>Change padding</p>
            <input type="range" min="10" max="30" step="1" value="20" id="pad">
        </div>
    </nav>
    <div class="text">Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm</div>
    <script>
        const lovepalm = document.querySelector(":root"),
        lovepalmmakmak = document.querySelector("#pad"),
        lovepalmjub = document.querySelector(":root"),
        lovepalmmakmakjub = document.querySelector("#color")
        lovepalmmakmak.addEventListener("input", e =>{
            lovepalm.style.setProperty("--pad", e.target.value)
        })
        lovepalmmakmakjub.addEventListener("input", e =>{
            lovepalm.style.setProperty("--color", e.target.value)
        })
    </script>
</body>
</html>