*{box-sizing:border-box}body{font-family:Karla,sans-serif;margin:0;background-color:#0b2434;height:100vh;padding:20px;display:flex;justify-content:center;align-items:center}#root{max-width:400px;max-height:400px;width:100%;height:100%}main{background-color:#f5f5f5;height:100%;border-radius:5px;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}.dice-container{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.dice-container button{width:50px;height:50px;border-radius:10px;box-shadow:0 0 2px #00000080,inset 0 -5px 4px #0000001a;border:none;background-color:#fff;font-size:1.75rem;font-weight:700;display:grid;padding:10px;cursor:pointer}.dot{width:10px;height:10px;background:#000;border-radius:50%;align-self:center;justify-self:center}.dice-1{grid-template-areas:". . ." ". a ." ". . ."}.dice-2{grid-template-areas:"a . ." ". . ." ". . b"}.dice-3{grid-template-areas:"a . ." ". b ." ". . c"}.dice-4{grid-template-areas:"a . b" ". . ." "c . d"}.dice-5{grid-template-areas:"a . b" ". c ." "d . e"}.dice-6{grid-template-areas:"a . b" "c . d" "e . f"}.dot:nth-child(1){grid-area:a}.dot:nth-child(2){grid-area:b}.dot:nth-child(3){grid-area:c}.dot:nth-child(4){grid-area:d}.dot:nth-child(5){grid-area:e}.dot:nth-child(6){grid-area:f}.roll-btn{width:auto;padding:6px 21px;white-space:nowrap;font-size:1.2rem;border:none;border-radius:6px;background-color:#5035ff;color:#fff}.title{font-size:40px;margin:0}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}
