body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background-color:#272647;height:100vh;width:100%;margin:0%;display:flex;justify-content:center;align-items:center}main{background-color:#fff;padding:30px}main nav{display:flex;justify-content:space-between;margin-bottom:30px}main nav h1{margin:0}main nav div{display:flex;align-items:center;justify-content:center}main nav div button{background-color:#fff;border:1px solid gray;font-size:.8rem;padding:5px;cursor:pointer;margin-left:10px}main nav div button:hover{background-color:#d3d3d3}main #grid{display:grid;grid-template-columns:repeat(7, 1fr);grid-template-rows:repeat(6, 1fr);gap:10px;cursor:pointer}main #grid .cell{width:80px;height:80px;padding:15px;background-color:#ddd;box-shadow:inset 0px 0px 5px 0px rgba(0,0,0,.3)}main #grid .cell .circle{width:100%;height:100%;border-radius:50%;box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);-webkit-animation:fly-in .4s ease-in-out;animation:fly-in .4s ease-in-out}main #grid .cell .colour-blue{background-color:blue}main #grid .cell .colour-red{background-color:red}main #grid .hover{background-color:#bbb}@-webkit-keyframes fly-in{0%{transform:translateY(-1000%)}100%{transform:translateY(0)}}@keyframes fly-in{0%{transform:translateY(-1000%)}100%{transform:translateY(0)}}/*# sourceMappingURL=style.min.css.map */