*{box-sizing:border-box}body{margin:0;background-color:#0b2434;padding:20px;font-family:Karla,sans-serif;display:flex;justify-content:center}main{height:400px;max-width:800px;border-radius:5px;padding:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;transition:.4s background}main.light{background:#f5f5f5}main.dark{background-color:#1e2021}.dieContainer{display:grid;grid-template:auto auto / repeat(5,1fr);gap:20px}.die{height:50px;width:50px;box-shadow:0 2px 2px #00000026;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.4s background}.dieHeld{background:#59e391}.dieFree.light{background:white;color:#213547}.dieFree.dark{background:rgb(25,27,28);color:#b2c9db}.rollDice{height:50px;width:150px;border:none;border-radius:6px;color:#fff;font-size:1.2rem;cursor:pointer;transition:.4s background}.rollDice.light{background-color:#5035ff}.rollDice.dark{background-color:#301f9f}.title{font-size:40px;margin:0}.instructions.light,.title.light{color:#213547}.instructions.dark,.title.dark{color:#b2c9db}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}