Spacing for readability

narrowstyle.css

@@ -7,6 +7,7 @@
   font-weight: normal;
   font-style: italic;
 }
+
 @font-face {
   font-family: "Computer Modern Typewriter Light";
   src: url("cmunbtl.eot");
@@ -16,6 +17,7 @@
   font-weight: normal;
   font-style: normal;
 }
+
 @font-face {
   font-family: "Computer Modern Typewriter Light";
   src: url("cmunbto.eot");
@@ -25,12 +27,14 @@
   font-weight: normal;
   font-style: italic;
 }
+
 html {
   box-sizing: border-box;
   height: 100%;
   font-size: 14pt;
   line-height: 16pt;
 }
+
 *,
 *:before,
 *:after {
@@ -38,21 +42,25 @@ html {
   -moz-box-sizing: inherit;
   box-sizing: inherit;
 }
+
 body {
   margin: 0rem;
   font-family: "Computer Modern Typewriter Light";
   background-color: #393c56;
   color: #ffe4fd;
 }
+
 iframe,
 video {
   border: none;
   width: inherit;
 }
+
 a,
 button {
   cursor: pointer;
 }
+
 .note {
   font-size: 0.8rem;
   position: fixed;
@@ -60,6 +68,7 @@ button {
   right: 0;
   margin: 0.2rem;
 }
+
 .about {
   font-family: "Computer Modern Classical Serif Italic";
   font-size: 1.2rem;
@@ -70,11 +79,13 @@ button {
   margin: 1rem;
   color: #ffffe5;
 }
+
 .about a {
   font-size: 1rem;
   color: #ffffe5;
   text-decoration: none;
 }
+
 .sidebar {
   height: 100%;
   position: fixed;
@@ -99,6 +110,7 @@ button {
   transition: margin-left 2s;
   margin-left: 40px;
 }
+
 button.minimize {
   box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd;
   font-size: 1rem;
@@ -111,6 +123,7 @@ button.minimize {
   margin: 0.5rem;
   border: none;
 }
+
 .sidetop,
 .sidebottom {
   overflow-y: scroll;
@@ -123,6 +136,7 @@ button.minimize {
   flex-direction: column;
   padding: 1rem 1rem;
 }
+
 .sidetop {
   height: 45vh;
   font-size: 1.2rem;
@@ -153,40 +167,49 @@ button.minimize {
 .middle p {
   margin: 0px;
 }
+
 #livetitle {
   font-size: 2rem;
   animation: glow 1.6s infinite alternate;
   -webkit-animation: glow 1.6s infinite alternate;
 }
+
 @-webkit-keyframes glow {
   to {
     text-shadow: 0 0 8px #ff029c;
   }
 }
+
 @-webkit-keyframes glowbutton {
   to {
     box-shadow: 0 0 8px #ff029c;
   }
 }
+
 .sidebottom {
   height: 45vh;
   box-shadow: 10rem -6rem 4rem #ffe4fd;
 }
+
 .sidebottom p {
   margin: 0.25rem 0rem;
 }
+
 .sidebottom a {
   color: #aec7ea;
 }
+
 .sidebottom p:last-child {
   padding-bottom: 2rem;
 }
+
 .live {
   margin-left: 300px;
   display: inline-block;
   height: 100%;
   width: 100%;
 }
+
 .live > * {
   /*  touch-action: none;*/
 }
@@ -201,6 +224,7 @@ button.minimize {
   border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
   position: relative;
 }
+
 .drag::before,
 .resize-drag::before,
 .live > *::before {
@@ -238,6 +262,7 @@ button.minimize {
     -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
   }
 }
+
 @-webkit-keyframes corners {
   0% {
     border-radius: 2rem 0rem 1rem 2rem;