*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}html{color:black;font-family:Arial, Helvetica, sans-serif;font-size:18px;}.main{display:flex;flex-direction:column;gap:5px;height:100dvh;margin-inline:auto;padding-block:2dvh;width:min(100% - 2rem , 30rem);}.board{aspect-ratio:1/1;background:white;display:grid;grid-template-columns:repeat(50, 1fr);grid-template-rows:repeat(50, 1fr);width:min(100% - 2rem , 30rem);}.tile{border-bottom:1px solid black;border-right:1px solid black;}.dead{background:white;}.red{background:red;transition:background 0.6s ease;}.blue{background:blue;transition:background 0.6s ease;}.green{background:green;transition:background 0.6s ease;}.orange{background:orange;transition:background 0.6s ease;}.fuchsia{background:fuchsia;transition:background 0.6s ease;}.purple{background:purple;transition:background 0.6s ease;}