:root{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Abril Fatface,serif;background-color:var(--accent-color)}:root{--accent-color: #FB7A81;--body-color: #F5B6B9;--text-color: black;--p1-color: #FFDAB9;--p2-color: #DA70D6;--c1-color: #87CEFA;--c2-color: #20B2AA;--border-color: #663399;--board-color: #DDA0DD}body{margin:0;overflow:hidden}#app{display:flex;position:relative;flex-direction:column;align-items:center;width:100vw;height:100vh;height:100svh}header h1{margin:.2em;font-size:28px;font-weight:400}main{display:flex;flex-direction:column;align-items:center;width:100%;background-color:var(--body-color);border-radius:20px 20px 0 0;padding:8px 0;flex-grow:1}main .board-vector{max-width:calc(100% - 16px);height:auto}.primary{height:100px;display:flex;flex-direction:column;justify-content:center}.primary .prompt{font-size:22px}.primary .dice{display:flex;filter:drop-shadow(3px 4px 1px rgba(0,0,0,.25))}.primary .dice svg{height:64px;width:auto;margin:8px}.primary .dice svg.n1 .center{fill:#000}.primary .dice svg.n2 .diag{fill:#000}.primary .dice svg.n3 .center,.primary .dice svg.n3 .diag{fill:#000}.primary .dice svg.n4 .diag,.primary .dice svg.n4 .reverse-diag{fill:#000}.primary .dice svg.n5 .center,.primary .dice svg.n5 .diag,.primary .dice svg.n5 .reverse-diag{fill:#000}.primary .dice svg.n6 .diag,.primary .dice svg.n6 .reverse-diag,.primary .dice svg.n6 .across{fill:#000}button{font-family:Abril Fatface,serif;background-color:#fff;color:#000;border:none;border-radius:16px;height:60px;font-size:28px;cursor:pointer;border:2px solid var(--accent-color)}button:hover{border:4px solid var(--accent-color)}button:active{border:4px solid var(--accent-color);box-shadow:inset 0 0 4px var(--accent-color)}.buttons{display:flex;width:100%;justify-content:space-evenly;max-width:500px}.buttons button{width:120px}.detail{font-size:16px;margin-top:16px}