1 line
3.3 KiB
CSS
1 line
3.3 KiB
CSS
@font-face{font-family:digital;src:url(../fonts/DIGITALDREAM.ee9072cf.ttf)}body,html{overflow:hidden;font-family:digital;width:100%;height:100%;padding:0;margin:0;background:radial-gradient(#000 15%,transparent 16%) 0 0,radial-gradient(#000 15%,transparent 16%) 8px 8px,radial-gradient(hsla(0,0%,100%,.1) 15%,transparent 20%) 0 1px,radial-gradient(hsla(0,0%,100%,.1) 15%,transparent 20%) 8px 9px;background-color:#282828;background-size:16px 16px}body{position:relative}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}.simeon-wrapper{margin:0;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);display:flex;align-items:center;vertical-align:middle;justify-content:center;margin:auto;width:100%;max-width:640px;height:100vw;max-height:640px}.simeon-game-board{display:grid;grid-template-columns:50% 50%;width:75%;height:75%;padding:8px;border:4px solid #232323;background:linear-gradient(270deg,#2b2b2b,#464646);border-radius:100%;box-shadow:0 0 8px 2px #000}.overlay{background:linear-gradient(180deg,#5b5b5b,#191919);border-radius:100%;width:30%;height:30%;padding:6px;box-shadow:1px 1px 6px 0 #000}.overlay,.score{margin:0;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.score{background:#000;border-radius:6px;border-top:2px solid #262626;width:50%;height:32px;font-size:22px;line-height:32px;color:#00f;text-shadow:2px 2px 8px #00f}.score-success{color:green;text-shadow:2px 2px 8px green}.score-fail{color:red;text-shadow:2px 2px 8px red}.simeon-game-spaces{box-sizing:border-box;align-content:center;justify-content:center;vertical-align:middle;display:grid;width:100%;height:100%;box-shadow:1px 1px 4px 2px #000,inset -11px 0 4px -2px rgba(0,0,0,.34901960784313724),inset 11px 0 4px 2px hsla(0,0%,100%,.4196078431372549)}.piece-t-l{background-color:#12cb56;border-top-left-radius:100%}.piece-t-r{background-color:#fd0010;border-top-right-radius:100%}.piece-b-l{background-color:#f1c200;border-bottom-left-radius:100%}.piece-b-r{background-color:#1264ca;border-bottom-right-radius:100%}.lite{font-size:25px;font-weight:700;line-height:50px;color:hsla(0,0%,100%,.6588235294117647);box-sizing:border-box;border-radius:100%;height:50px;width:50px}.blink{box-shadow:inset 0 0 70px 60px hsla(0,0%,100%,.6509803921568628),inset -11px 0 4px -2px rgba(0,0,0,.34901960784313724),inset 11px 0 4px 2px hsla(0,0%,100%,.4196078431372549)}.reset,.start{height:50%;width:100%;display:flex;align-items:center;justify-content:center;vertical-align:middle}.reset button,.start button{font-family:digital;outline:none;font-size:24px;font-weight:700;height:100%;background:linear-gradient(45deg,#262626,hsla(0,0%,100%,.1607843137254902));text-shadow:-1px -1px 0 #838383;color:#000;width:100%}.start button{border-radius:100px 100px 0 0;border:2px solid #262626;border-bottom:1px solid #262626}.reset button:disabled,.start button:disabled{color:#838383;font-weight:400;text-shadow:-1px -1px 0 #000}.reset button{border-radius:0 0 100px 100px;border:2px solid #262626;border-top:1px solid #262626}.fail{background:#fd0010}.success{background:hsla(0,0%,100%,.7294117647058823)}.key{text-shadow:0 0 5px #000}@media (max-height:640px){.simeon-wrapper{max-height:100%}}@media (max-width:640px){.simeon-wrapper{max-width:100%}.simeon-game-board{width:90%;height:90%}.reset button,.start button{font-size:14px}.key{display:none}} |