*{box-sizing:border-box}body{margin:0;background-color:#0b2434;padding:20px;font-family:Karla,sans-serif;display:flex;justify-content:center}main{background-color:#f5f5f5;height:420px;max-width:600px;border-radius:5px;padding:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;min-width:500px}.title{font-size:40px;margin:0}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}.dice-container{display:grid;grid-template:auto auto / repeat(5,1fr);gap:20px;margin-bottom:20px}.die-container{height:50px;width:50px;box-shadow:0 2px 2px #00000026;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;margin:1rem}.roll-dice{height:50px;width:150px;border:none;border-radius:6px;background-color:#5035ff;color:#fff;font-size:1.2rem;font-family:Karla,sans-serif;cursor:pointer;box-shadow:0 3px 2px #a9a9a9}.roll-dice:focus{outline:none}.roll-dice:active{box-shadow:inset 5px 5px 10px -3px #000000b3}.face{display:grid;grid-template-areas:"a . c" "e g f" "d . b";grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);flex:0 0 auto;margin:16px;padding:10px;width:75px;height:75px;background-color:tomato;box-shadow:inset 0 3px #fff,inset 0 -3px #bbb,inset 3px 0 #d7d7d7,inset -3px 0 #d7d7d7;border-radius:10%}.pip{display:block;align-self:center;justify-self:center;width:12px;height:12px;border-radius:50%;background-color:#333;box-shadow:inset 0 3px #111,inset 0 -3px #555}.pip:nth-child(2){grid-area:b}.pip:nth-child(3){grid-area:c}.pip:nth-child(4){grid-area:d}.pip:nth-child(5){grid-area:e}.pip:nth-child(6){grid-area:f}.pip:nth-child(odd):last-child{grid-area:g}.game-info{display:flex;flex-direction:row;align-items:center;gap:50px}h2{background-color:#e7e7e7;border-radius:6px;padding:8px 16px;box-shadow:0 2px 2px #d3d3d3}.modal{position:fixed;top:0;bottom:0;right:0;left:0;margin:20px auto;height:412px;width:350px;border-radius:5px;box-shadow:0 0 6px 2px #666;background-color:#0b2434;color:#f5f5f5}.subModal{display:flex;flex-direction:column;justify-content:center;align-content:center;height:400px}.modal-inner{display:flex;flex-direction:column;justify-content:center;align-content:center;text-align:center;background-color:#666;font-size:2.5rem;border-radius:5px}.close-modal-btn-container{text-align:right;margin:9px}.modal-close-btn{font-size:22px;font-weight:700;background-color:transparent;color:#f5f5f5}.modal-close-btn:hover,.modal-close-btn:active{color:red;cursor:pointer}