✨

pokemon.css

@@ -1,3 +1,11 @@
+.pokemon.sheet.characterSheet {
+  /* Create a custom radio button */
+  /* On mouse-over, add a grey background color */
+  /* When the radio button is checked, add a blue background */
+  /* Create the indicator (the dot/circle - hidden when not checked) */
+  /* Show the indicator (dot/circle) when checked */
+  /* Style the indicator (dot/circle) */
+}
 .pokemon.sheet.characterSheet .window-content {
   background: #c00d0d;
   color: white;
@@ -368,7 +376,8 @@
   justify-items: space-evenly;
 }
 .pokemon.sheet.characterSheet .statHex {
-  margin-top: 0px;
+  margin-top: 7px;
+  margin-bottom: 7px;
 }
 .pokemon.sheet.characterSheet select {
   background-color: #30da0c;
@@ -390,3 +399,49 @@
   align-items: center;
   text-align: center;
 }
+.pokemon.sheet.characterSheet .radioButton {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.pokemon.sheet.characterSheet .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 35px;
+  background-color: #30da0c;
+  border-radius: 5px;
+  box-shadow: 0 0 20px #003300 inset;
+  -webkit-box-shadow: 0 0 20px #003300 inset;
+  -moz-box-shadow: 0 0 20px #003300 inset;
+  -o-box-shadow: 0 0 20px #003300 inset;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+.pokemon.sheet.characterSheet .container:hover input ~ .checkmark {
+  background-color: #3de31c;
+}
+.pokemon.sheet.characterSheet .container input:checked ~ .checkmark {
+  background-color: #3de31c;
+}
+.pokemon.sheet.characterSheet .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.pokemon.sheet.characterSheet .container input:checked ~ .checkmark:after {
+  display: block;
+}
+.pokemon.sheet.characterSheet .container .checkmark:after {
+  top: 9px;
+  left: 9px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: white;
+}