*,*:before,*:after{box-sizing:border-box}body{margin:0;background:#0B2434;font-family:Karla,"sans-serif";color:#2b283a}main{display:flex;width:100vw;height:100vh;max-height:100%}.app-background{display:flex;margin:auto;width:70%;height:90%;min-width:320px;min-height:320px;background:#F5F5F5;border-radius:10px}.app-content-container{display:flex;margin:auto;flex-direction:column;justify-content:space-around;align-items:center;height:80%;min-height:600px}.app-header-container{width:90%}.app-title{margin:0 0 .1em;font-size:2rem;text-align:center}.app-instructions{margin:0;font-family:Inter;font-size:.9rem;text-align:center;color:#4a4e74}.dice-container{display:grid;grid-template:repeat(5,1fr) /repeat(2,1fr);grid-gap:1.5em 3em;justify-items:center;align-items:center}.die{display:flex;height:3.25rem;width:3.25rem;box-shadow:0 2px 2px #00000026;border-radius:4px}.die:focus{outline:3px solid #2B283A}.die-face{margin:auto;font-size:2rem;color:#2b283a}.main-btn{padding:.5em 2em;background:#5035FF;box-shadow:0 3px 7.5px #0000002e;border-radius:4px;border:none;font-family:Karla;font-size:1.5rem;text-align:center;color:#fff;cursor:pointer}.main-btn:active{box-shadow:inset 1px 1px 10px #fff;outline:3px solid #2B283A}.main-btn:focus{outline:3px solid #2B283A}.leaderboard-container{display:block;position:fixed;bottom:50%;right:0;left:0;margin:auto;width:90%;border:4px solid #0B2434;border-radius:5px;box-shadow:0 0 6px 2px #666;background-color:#f5f5f5;text-align:center;color:#2b283a;padding:2em}.leaderboard-title,.leaderboard-subtitle{margin:0 0 1rem}.leaderboard-entry{margin:.5rem 0 0}@media (min-width: 650px){.app-background{max-height:550px}.app-content-container{height:90%;min-height:300px}.dice-container{width:80%;grid-template:repeat(2,1fr)/repeat(5,1fr);grid-gap:1em}.leaderboard-container{width:50%;bottom:50%}}@media (min-width: 768px){.app-header-container{width:70%}.app-instructions{font-size:1rem}}@media (min-width: 1290px){.app-title{margin:0 0 .5em}.app-instructions{font-size:1.1rem}}