Update

index.html

@@ -50,22 +50,32 @@
 
     #overlay {
       position: absolute;
-      top: 8px;
-      right: 8px;
+      top: 0;
+      right: 0;
     }
 
     button#fullscreen {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      background: none;
+      border: none;
+      justify-content: center;
+      align-items: center;
+    }
+
+    button#fullscreen::before {
+      content: '';
       display: block;
       width: 16px;
       height: 16px;
       border: 2px dashed #fff;
-      padding: 0;
-      background: none;
-      transition: 0.2s ease-in-out border-color;
     }
 
     button#fullscreen:hover {
       animation: pulse 0.2s ease-in-out;
+      cursor: pointer;
     }
 
     button#fullscreen:focus {
@@ -119,56 +129,6 @@
       display: inline;
     }
 
-    .toggle input[type="checkbox"] {
-      display: none;
-    }
-
-    .toggle label {
-      position: relative;
-      /* display: block; */
-    }
-
-    .toggle label::before {
-      content: '';
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      border: 2px solid #fff;
-      vertical-align: middle;
-      margin-right: 0.4em;
-    }
-
-    .toggle input[type="checkbox"]:focus label::before {
-      outline: 1px dashed #fff;
-    }
-
-    .toggle label::after {
-      content: '';
-      display: inline-block;
-      width: 6px;
-      height: 8px;
-      border-bottom: 2px solid #fff;
-      border-right: 2px solid #fff;
-      position: absolute;
-      width: 4px;
-      height: 9px;
-      left: 7px;
-      top: 0;
-      transform: rotate(45deg);
-      opacity: 0;
-      transition: 0.1s ease-out all;
-    }
-
-    .toggle input:checked+label::after {
-      opacity: 1;
-      top: 6px;
-    }
-
-    .toggle input:disabled + label::before,
-    .toggle input:disabled + label::after {
-      border-color: rgba(255, 255, 255, 0.4);
-    }
-
     #status-line {
       background: #67686d;
       position: relative;
@@ -264,7 +224,7 @@ <h2>Play</h2>
     <div id="settings">
       <h2>Settings</h2>
 
-      <div class="toggle" id="persist-toggle">
+      <div>
         <input type="checkbox" id="persist-input">
         <label for="persist-input">Enable persistent storage. This will make sure replays and settings are not deleted when browser cache is automatically cleared (such as when device space is low). You will have to clear site data to disable this setting.</label>
       </div>
@@ -273,7 +233,7 @@ <h2>Settings</h2>
     <div>
       <h2>About</h2>
 
-      <img id="screenshot" alt="Neverball in a browser frame." src="screenshot.png">
+      <img id="screenshot" alt="Screenshot of the Neverball title screen." src="screenshot.png">
 
       <p>Neverball in the browser is <a href="https://neverball.org/">Neverball</a> compiled with Emscripten and gl4es.</p>