/* Connect 4 CSS */ h3 { font-size: 1.1rem; font-weight: bold; } .avatar { width: 100%; max-width: 200px; height: auto; padding: 25px; } .active-player { padding: 0; } .mw-red { background-color: #f44336; } .mw-green { background-color: #4caf50; } .mw-yellow { background-color: #ffeb3b; } .mw-selected { border: 4px solid black; } .connect-4-table { margin: auto; border-collapse: separate; } tbody { border: 4px solid black; } .circles { -moz-border-radius: 100%; -webkit-border-radius: 100%; width: 80px; height: 80px; background-color: dimgrey; border-spacing: 0; border: 4px solid black; } .chosen { border: 7px dashed yellow; } /* Mobile adjustment */ @media only screen and (max-device-width: 480px) { .circles { -moz-border-radius: 100%; -webkit-border-radius: 100%; width: 50px; height: 50px; background-color: dimgrey; border-spacing: 0; border: 4px solid black; } .chosen { border: 4px dashed yellow; } } .color-blue { background-color: blue; } .color-red { background-color: red; } /*https://codepen.io/metagrapher/pen/tgcLl*/ /*and*/ /*https://css-tricks.com/almanac/properties/a/animation/*/ /* Blue winning color animation */ .color-blue-win { animation: colorchange-blue 3s infinite; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange-blue 3s infinite; /* Chrome and Safari */ } @keyframes colorchange-blue { 0% { background-color: blue; } 10% { background-color: blue; } 40% { background-color: green; } 60% { background-color: green; } 90% { background-color: blue; } 100% { background-color: blue; } } @-webkit-keyframes colorchange-blue /* Safari and Chrome - necessary duplicate */ { 0% { background-color: blue; } 10% { background-color: blue; } 40% { background-color: green; } 60% { background-color: green; } 90% { background-color: blue; } 100% { background-color: blue; } } /* Red winning color animation */ .color-red-win { animation: colorchange-red 3s infinite; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange-red 3s infinite; /* Chrome and Safari */ } @keyframes colorchange-red { 0% { background-color: red; } 10% { background-color: red; } 40% { background-color: green; } 60% { background-color: green; } 90% { background-color: red; } 100% { background-color: red; } } @-webkit-keyframes colorchange-red /* Safari and Chrome - necessary duplicate */ { 0% { background-color: red; } 10% { background-color: red; } 40% { background-color: green; } 60% { background-color: green; } 90% { background-color: red; } 100% { background-color: red; } }