 body{background-color:#e5e9f4}button.neumorphic{container-type:inline-size;aspect-ratio:1/1;border:.5rem solid transparent;border-radius:1rem;color:hsl(0 0% 10%);background:none;width:60%;display:grid;place-content:center;gap:1rem;margin-left:auto;margin-right:auto;cursor:pointer;--shadow:-.5rem -.5rem 1rem hsl(0 0% 100% / .75),.5rem .5rem 1rem hsl(0 0% 50% / .5);box-shadow:var(--shadow);outline:none;transition:all .1s;&:hover,&:focus-visible{color:hsl(39.29deg 98.13% 49.28%);scale:1.1 cursor:pointer}&:active,&.active{box-shadow:var(--shadow),inset .5rem .5rem 1rem hsl(0 0% 50% / .5),inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);color:hsl(10 80% 50%);>i{font-size:28cqi};>span{font-size:13cqi};cursor:pointer}>i{font-size:31cqi}>span{font-family:system-ui,sans-serif;font-size:16cqi}}.cd__main{background-color:#e5e9f4!important}h1{text-align:center;color:hsl(0 0% 10%);font-family:sans-serif;font-size:18px;margin-bottom:30px}.buttons{display:grid;width:min(75rem,100%);margin-inline:auto;grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr));gap:2rem}button.neumorphic img{margin-left:auto;margin-right:auto}@media only screen and (max-width:768px){body{background-color:#e5e9f4}button.neumorphic img{width:60px;height:30px}h1{margin-bottom:10px}.cd__main{background-color:#e5e9f4!important}}