with hight important icons

MTG/index.html

@@ -18,22 +18,22 @@
 
     <div id="navContainer"></div>
     <div class="buttons1" id="buttonWrapper">
-      <span class="icon" onclick="removePlayer()">
+      <span class="icons" onclick="removePlayer()">
         <i class="fa-solid fa-circle-minus"></i>
       </span>
-      <span class="icon" onclick="reset()">
+      <span class="icons" onclick="reset()">
         <i class="fa-solid fa-rotate-left"></i>
       </span>
-      <span class="icon" onclick="addPlayer()">
+      <span class="icons" onclick="addPlayer()">
         <i class="fa-solid fa-circle-plus"></i>
       </span>
-      <span class="icon" onclick="commander()">
+      <span class="icons" onclick="commander()">
         <i class="fa-solid fa-crown"></i>
       </span>
-      <!-- <span class="icon" onclick="flip()">
+      <!-- <span class="icons" onclick="flip()">
         <i class="fa-solid fa-wand-sparkles"></i>
       </span> -->
-      <span class="icon" onclick="fullscreen()">
+      <span class="icons" onclick="fullscreen()">
         <i class="fa-solid fa-expand"></i>
       </span>
       <span class="dice">

MTG/style.css

@@ -142,13 +142,14 @@ main {
 
 
 
-.icon {
+.icons {
   position: relative;
   /* background-color: #04AA6D; */
   border: none;
 
   padding: 20px;
-  width: 200px;
+  width: auto !important;
+  height: auto !important;
   text-align: center;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
@@ -158,7 +159,7 @@ main {
   border-radius: 50%;
 }
 
-.icon:after {
+.icons:after {
   content: "";
   background: #697069;
   display: block;
@@ -172,7 +173,7 @@ main {
   border-radius: 25%
 }
 
-.icon:active:after {
+.icons:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;