*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}:root{--primary-fs: 28px;--primary-light-cyan: hsl(193, 38%, 86%);--primary-neon-green: hsl(150, 100%, 66%);--neutral-grayish-blue: hsl(217, 19%, 38%);--neutral-dark-grayish-blue: hsl(217, 19%, 24%);--neutral-dark-blue: hsl(218, 23%, 16%);--primary-fw: 800}img{display:block;max-width:100%}.App{font-family:Manrope,sans-serif;font-weight:var(--primary-fw);font-size:var(--primary-fs);min-height:100vh;min-height:100dvh;display:grid;place-items:center;background-color:var(--neutral-dark-blue);color:var(--primary-light-cyan)}.App .container{position:relative;background-color:var(--neutral-dark-grayish-blue);padding:2em;width:min(90%,35rem);text-align:center;border-radius:.5em}.App .container>*:not(:first-child){margin-top:1em}.App .id-advice{color:var(--primary-neon-green);font-size:1rem;letter-spacing:3px}.App .dice{position:absolute;display:grid;place-items:center;cursor:pointer;width:55px;aspect-ratio:1;background-color:var(--primary-neon-green);border-radius:50%;bottom:0%;left:50%;transform:translate(-50%,50%);transition:.3s ease}.App .dice:is(:hover,:focus-visible),.App .dice:has(.dice-btn:is(:hover,:focus-visible)){box-shadow:0 0 30px var(--primary-neon-green)}.App .dice:has(.time-second){pointer-events:none}.App .dice-btn{cursor:pointer;background-color:var(--primary-neon-green);border:none;outline:transparent}.App .time-second{color:var(--neutral-dark-blue);font-family:Manrope,sans-serif;font-size:var(--primary-fs);font-weight:var(--primary-fw)}