in between stages of css pimping

static/css/style.css

@@ -2,29 +2,6 @@
 /* FONTS */
 /********************************************************/
 
-@font-face {
-    font-family: 'Compagnon Bold';
-    src: url('webfonts/Compagnon-Bold.woff2') format('woff2'),
-         url('webfonts/Compagnon-Bold.woff') format('woff') ;
-    font-weight: bold;
-    font-style: normal;
-}
-@font-face {
-font-family: 'Compagnon Italic';
-src: url('webfonts/Compagnon-Italic.woff2') format('woff2'),
-     url('webfonts/Compagnon-Italic.woff') format('woff');
-font-weight: normal;
-font-style: italic;
-}
-
-@font-face {
-font-family: 'Compagnon';
-src: url('webfonts/Compagnon-Medium.woff2') format('woff2'),
-    url('webfonts/Compagnon-Medium.woff') format('woff');
-font-weight: medium;
-font-style: normal;
-}
-
 @font-face {
 font-family: 'Compagnon Light';
 src: url('webfonts/Compagnon-Light.woff2') format('woff2'),
@@ -33,13 +10,6 @@ font-weight: light;
 font-style: normal;
 }
 
-@font-face {
-font-family: 'Compagnon Roman';
-src: url('webfonts/Compagnon-Roman.woff') format('woff');
-font-weight: normal;
-font-style: roman;
-}
-
 @font-face {
 font-family: 'Steps Thin Mono';
 src: url('webfonts/steps-mono-thin-webfont.woff2') format('woff2'),
@@ -48,7 +18,15 @@ font-weight: normal;
 font-style: roman;
 }
 
-@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
+/* @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+} */
 
 /********************************************************/
 /* ALL PAGES - LAYOUT */
@@ -61,7 +39,7 @@ font-style: roman;
 
 body{
 	color:black;
-	font-family: 'Montserrat', sans-serif;
+	font-family: 'Steps Thin Mono', sans-serif;
 	top:0;
 	left: 0;
   margin: 0;
@@ -147,12 +125,12 @@ div.home a{
 
 
 div.home a:visited{
-  color: red;
+  color: black;
   border-bottom: white;
 }
 
 div.home a:hover{
-  background: red;
+  background: magenta;
   color: white;
 }
 
@@ -199,26 +177,11 @@ div.explanation{
 }
 
 #logobox h1{
-  font-size: 6vw;
+  font-size: 3em;
-  font-family: 'Steps Thin Mono';
+  font-family: 'Steps Thin Mono', sans-serif;
   margin-top: 0;
 }
 
-nav{
-  float: right;
-  text-transform: lowercase;
-  /* font-family: 'Montserrat', sans-serif; */
-  font-family: 'Steps Thin Mono';
-  /* font-family: 'Victorianna Thin'; */
-}
-
-nav ul.menu {
-  /* font-weight: bold; */
-  float: left;
-  display: inline-block;
-	text-align: right;
-  margin-top: 0.6em;
-}
 
 /********************************************************/
 /* BUTTONS */
@@ -347,8 +310,8 @@ a{
 	text-decoration: none;
 }
 
-a:visited {
+div.diverge_list a {
-    color:red;
+    color: magenta;
 }
 
 ul{
@@ -362,7 +325,7 @@ li a{
 
 li:hover a{
 	color: white;
-  background-color: red;
+  background-color: magenta;
 }
 
 li{
@@ -370,7 +333,7 @@ li{
   padding-right: 5px;
 }
 li:hover {
-  background-color: red;
+  background-color: magenta;
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -393,7 +356,7 @@ video{
  }
 
 .text a:visited{
-  color: red;
+  color: magenta;
 }
 .text a:hover{
   background: : red;
@@ -413,7 +376,7 @@ video{
 
 .column a:hover{
   color: white;
-  background-color: red;
+  background-color: magenta;
 }
 
 .h3-titles {
@@ -456,8 +419,9 @@ nav.nav_bottom div li a{
   color: black
 }
 nav.nav_bottom div li a:hover{
-  color: red;
+  color: magenta;
-  background-color: black;
+  color: black;
+  /* background-color: black; */
 }
 
 nav.nav_bottom div li:first-child {
@@ -530,7 +494,7 @@ div.theindexpage{
   /*display: inline-block;*/
 }
 .foldersindex a:hover{
-  background-color: red;
+  background-color: magenta;
   color: white;
   width: 100%;
   display: inline-block;
@@ -552,7 +516,7 @@ a.li-index:hover {
 /* OTHER DISPLAYS */
 /********************************************************/
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 770px) {
   header{
   margin-right: 10em;
   position: fixed;
@@ -570,10 +534,18 @@ a.li-index:hover {
 }
   }
 /* Use a media query to add a breakpoint at 800px: */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 770px) {
+
   /*all pages*/
+  body{
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    word-break: break-all;
+  }
   div.content-block {
-    padding: 0em 2em 0em 2em; /* The width is 100%, when the viewport is 800px or smaller */
+    padding: 0em 2em 4em 2em; /* The width is 100%, when the viewport is 800px or smaller */
   }
   #logobox{
     padding: 0em;