diff --git a/flex.html b/flex.html
index 1129452..9ad5581 100644
--- a/flex.html
+++ b/flex.html
@@ -4,6 +4,7 @@
 		<meta charset="utf-8">
 		<title>flexozyme</title>
 	</head>
+	<!-- The black 180deg in the conic gradient ensures the colorful part of the gradient spans a 90deg arc -->
 	<body style="height:100vh;margin:0;display:flex">
 		<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div>
 		<div style="flex:1;display:flex;flex-direction:column">
diff --git a/index.html b/index.html
index 158c700..9150f88 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,14 @@
 		<title>Diagonal Scroll</title>
 		<style>
 			div {
-				left: -500px;
+				left: -500px; /* The div is shifted to the left so the left side of the p elements don't get clipped */
 				top: 0px;
-				position: fixed;
+				position: fixed; /* Make the div fill the entire screen */
 				width: 1000px;
 				height: 100vh;
-				overflow: scroll;
+				overflow: scroll; /* This adds the diagonal scroll bar */
 				transform-origin: top left;
-				transform: skewX(45deg);
+				transform: skewX(45deg); /* I originally used a rotate transform, but the math is way easier when using skewX */
 				font-family: DejaVu Sans, Noto Sans, Sans-Serif;
 			}
 			p {
@@ -23,6 +23,8 @@
 				transform: skewX(-45deg);
 			}
 			span {
+				/* This adds a block of empty space at the bottom of the div */
+				/* Otherwise, if the screen is taller than its width, the text at the bottom will be to the right of the screen's right edge */
 				display: inline-block;
 				height: calc(100vh - 100vw + 400px);
 				transform-origin: top left;
