connect-4-frontend / assets /index-6sbi0XHv.css
Gruhit Patel
made responsive for mobile compatibility
698da72 verified
.App{display:flex;flex-direction:column;align-items:center}.board{display:flex;flex-direction:column;background-color:#6f3;width:90%;max-width:600px;height:80vh;padding:.5%;border-radius:2%;box-shadow:0 0 2% #0003;overflow:hidden}.row{display:flex;justify-content:center;width:100%}.cell{flex:1;padding-top:calc(100% / 7);background-color:#fff;margin:1%;border-radius:50%;max-width:calc(100% / 7 - 2%)}.winning-cell{animation:glow 1s infinite alternate}@keyframes glow{0%{box-shadow:0 0 1% #0004ff80}to{box-shadow:0 0 2% #0004ff}}.play-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.play-icon{width:12%;height:auto;fill:#007bff}.reload-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.reload-icon{width:12%;height:auto;fill:#007bff}.options-header{margin-bottom:20px}.options-container{display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 768px){.board{height:auto;max-height:none;width:100%;max-width:none}.cell{flex:1;padding-top:calc(100% / 6);margin:.5%;max-width:48%}.row{flex-wrap:wrap}.options-container{position:relative;top:calc(100% + 10px);left:50%;transform:translate(-50%);margin-top:10px}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media only screen and (max-width: 768px){body{font-size:14px}}