CSS Pronto de caixa de cores

Tabela-Cores/CSS/style.css

@@ -14,12 +14,13 @@ div {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 15px; /* Espaçamento entre os "pincéis" */
+    gap: 15px; 
+    padding: 20%;
 }
 
 a {
     display: inline-block;
-    width: 60px; /* Largura do "pincel" */
+    width: 80px; /* Largura do "pincel" */
     height: 60px; /* Altura do "pincel" */
     border-radius: 5px;
     cursor: pointer;
@@ -50,9 +51,10 @@ a:hover {
 }
 
 #resetColor {
-    background-color: #444; /* Cor do botão reset */
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    background-color: #444; 
     color: white;
-    padding: 10px 15px;
+    padding: 5px 15px;
     border-radius: 5px;
     margin-top: 20px;
 }

Tabela-Cores/Index.html

@@ -23,9 +23,9 @@ <h1>Toque na caixa de cores para alterar a cor</h1>
         <a onclick="bgchange(this.id)" id="color12">#24d30d</a>
         <a onclick="bgchange(this.id)" id="color13">#44432f</a>
         <a onclick="bgchange(this.id)" id="color14">#207ec1</a>
-        <a id="resetColor" onclick="resetBgColor()">Resetar Cor</a>
+        <a id="resetColor" onclick="resetBgColor()">Resetar</a>
     </div>
-    <a href="../index.html">Voltar ao Relógio</a>
+    <a href="../index.html">Voltar</a>
     <script src="JS/script.js"></script>
 </body>
 </html>

styles.css

@@ -2,6 +2,7 @@ body{
     background-color: darkcyan;
 }
 
+
 main{
     width: 100%;
     height: 100vh;