*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Karla,sans-serif;background-color:#f7f4f4a6;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:1.5em}div#root{height:100%;width:100%;max-height:400px;max-width:400px;margin:0 auto}.container{background-color:#faf37c;border-radius:.75rem;display:grid;place-content:center;gap:1rem;padding:1.5em;box-shadow:5px 5px 10px #00000030}.title{font-size:2.5rem;font-weight:700;text-align:center;color:#049204;font-family:Karla,sans-serif}.instructions{font-family:Karla,sans-serif;font-style:italic;text-align:center;color:#000;letter-spacing:1px;line-height:1.2}.dices-container{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative;place-content:center}.dice{width:3.125rem;height:3.125rem;border-radius:.5rem;background-color:#f8c6f2;display:grid;place-content:center;font-family:Karla,sans-serif;font-size:1.5rem;font-weight:700;color:#5b0101;border:none;cursor:pointer;box-shadow:2px 2px #0000004d,-2px -2px #0000004d}.dice.held{background-color:#69de69}.dice:hover{background-color:#4f5255}.dice.held:hover{background-color:#58ed58}.buttons-container{place-self:center}.roll{font-size:.9rem;padding:.5em 1em;border-radius:.5rem;background-color:#b060a4;color:#fff;font-size:1.2rem;font-weight:700;text-transform:uppercase;font-family:Karla,sans-serif;cursor:pointer;border:none;box-shadow:2px 2px #00000080}.roll:hover{background-color:#eb7fdde4}.roll:focus{outline:3px solid green}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}.win-message{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;background-color:#fff;padding:1em;display:grid;place-content:center;border-radius:.5rem;box-shadow:0 0 10px #00000080;text-align:center;font-family:Karla,sans-serif;text-transform:uppercase;font-size:1.5rem;font-weight:700;color:#ffd000;z-index:100;animation:fadeIn 3s ease-in;transform-origin:center}@keyframes fadeIn{0%{transform:scale(.5);opacity:0}to{opacity:1;transform:scale(1)}}.attempts{text-align:center;margin:.5rem auto 0;font-size:.9rem;font-style:italic;color:#48036a}@media (min-width: 768px){div#root{max-width:600px;max-height:600px}.dices-container{margin:0 auto;column-gap:2rem;row-gap:1rem}}