Updated layout

orbitals.html

@@ -13,9 +13,54 @@
     <script src="orbitals/rendering.js" defer></script>
 
     <style>
+        body
+        {
+            background-color: black;
+            color: white;
+            font-family: "Arial";
+        }
+
+        h1
+        {
+            margin-top: 100px;
+            font-family: "Trebuchet MS";
+        }
+
+        p
+        {
+            margin-right: 100px;
+            text-align: justify;
+        }
+
+        a
+        {
+            text-decoration: none;
+        }
+
+        i
+        {
+            font-family: Georgia, 'Times New Roman', Times, serif;
+        }
+
+        button 
+        {
+            width: 100px;
+            height: 50px;
+            background-color: rgb(57, 135, 224);
+            color: white;
+            border: 0px;
+            font-weight: bold;
+        }
+
+        button:hover
+        {
+            background-color: rgb(33, 110, 199);
+        }
+
         #screen
         {
-            border: 1px solid red;
+            height: 95vh;
+            width: 95vh;
         }
     </style>
 </head>

orbitals/rendering.js

@@ -24,9 +24,8 @@ function HSVtoRGB(h, s, v) {
 }
 
 var canvas = document.querySelector('#screen');
-canvas.height = screen.height - 200;
-canvas.width = canvas.height;
-console.log(window.height)
+canvas.height = canvas.clientHeight;
+    canvas.width = canvas.clientHeight;
 var gl = canvas.getContext("webgl");
 
 var VBO = gl.createBuffer();
@@ -131,7 +130,7 @@ function drawScene()
     gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(coord);
     
-    gl.viewport(0,0,canvas.width,canvas.height);
+    gl.viewport(0,0, gl.canvas.width, gl.canvas.height);
     gl.drawArrays(gl.POINTS, 0, vertices.length / 3);
 }