CSS : Modify the design of download page;

Python: Add instructions for operating systems and for featured clients;
SVG   : Add new icons and optimize existing icons;
TOML  : Add a file for operating systems;
XHTML : Add a page for operating systems.

css/stylesheet.css

@@ -33,6 +33,7 @@ body {
       rgba(130, 130, 130, 0.5)
     ),
     url(/img/background.svg);
+  background-attachment: fixed;
   background-repeat: repeat;
   /* height: 100vh; */
   /*
@@ -295,11 +296,37 @@ h1 {
 }
 
 #selection {
+  margin-left: 10%;
+  margin-right: 10%;
   padding-left: 1em;
   padding-right: 2em;
   padding-top: 2em;
 }
 
+#container-of-selection {
+  border-radius: 30px;
+  margin-top: 2.5em;
+  margin-bottom: 2.5em;
+  margin-left: auto;
+  margin-right: auto;
+  filter: drop-shadow(2px 4px 6px grey);
+  max-width: 55em;
+  /* FIXME
+     Elements of element #profile overflow upon decreasing height, once property
+     min-width has been added.
+  */
+  min-width: 35em;
+  /* NOTE
+     The problem is not with elements within element #profile.
+     Issue has been fixed, once property max-height was commented.
+     If you would, add @media (max-height: 300px) for lower height.
+  */
+  /* max-height: 75vh; */
+  padding-top: 1em;
+  padding-bottom: 2em;
+  width: 80%;
+}
+
 #selection > dt {
   margin-bottom: 1.5em;
   margin-left: 0.5em;
@@ -363,6 +390,7 @@ h1 {
 
 #selection .features {
   font-size: 80%;
+  line-height: 40px;
   margin: 1em;
 }
 
@@ -393,6 +421,65 @@ h1 {
   display: block; /* Show details upon checked checkbox */
 }
 
+.plain-note {
+  display: block;
+  justify-content: center;
+  margin-bottom: 2em;
+  margin-top: 1.5em;
+  text-align: center;
+}
+
+#software,
+#software-menu {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+#software-menu .system {
+  /* background: #e9e9e9; */
+  border-radius: 10px;
+  color: #5c5c5c;
+  /* display: table; */
+  margin: 1em;
+  overflow-wrap: break-word;
+  padding: 1em;
+  text-align: center;
+  text-decoration: none;
+  width: 12.2%;
+}
+
+#software-menu img {
+  border-radius: 10px;
+  height: 5em;
+  width: 5em;
+}
+
+#software > .system:hover,
+#software-menu .system:hover {
+  background: #e5e5e5;
+  /* text-decoration: overline; */
+}
+
+#software > .system {
+  /* background: #e9e9e9; */
+  border-radius: 10px;
+  color: #5c5c5c;
+  height: 15%;
+  margin: 1em;
+  padding: 1.5em;
+  text-decoration: none;
+  width: 20%;
+}
+/*
+#software > .system:hover {
+  outline-style: solid;
+}
+*/
+#software > .system img {
+  width: 5em;
+}
+
 #security-notices {
   display: flex;
   justify-content: center;
@@ -403,7 +490,7 @@ h1 {
   background: #ebebbe;
   border-radius: 10px;
   display: flex;
-  font-size: 1.2em;
+  /* font-size: 1.2em; */
   margin: 1em;
   /*
   margin-right: 20%;
@@ -414,18 +501,25 @@ h1 {
 }
 
 #security-notices img {
-  height: 80px;
+  height: 60px;
   margin-left: 0.5em;
   margin-right: 1em;
-  width: 80px;
+  width: 60px;
 }
 
+/*
+#security-notices span {
+  align-self: center;
+  place-self: center;
+}
+*/
+
 #titles {
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
 
-#container-of-profile {
+#overlay {
   /* margin: auto; */
   padding-bottom: 0.5em;
 }
@@ -463,11 +557,6 @@ h1 {
   filter: drop-shadow(2px 4px 6px grey);
 }
 
-#container-of-content {
-  /* margin-left: 8em; */
-  /* overflow: auto; */
-}
-
 #profile {
   border-radius: 30px;
   filter: drop-shadow(2px 4px 6px grey);
@@ -654,22 +743,6 @@ h1 {
 }
 */
 
-@media (max-width: 820px) {
-
-  #action-bar > #windows {
-    display: none;
-  }
-
-  #selection img.wide {
-    display: none;
-  }
-
-  #selection img.narrow {
-    display: unset;
-  }
-
-}
-
 @media (max-width: 950px) {
 
   #action-bar > #view,
@@ -683,6 +756,14 @@ h1 {
     justify-content: center;
   }
 
+  #selection img.narrow {
+    display: unset;
+  }
+
+  #selection img.wide {
+    display: none;
+  }
+
 }
 
 @media (max-width: 885px) {
@@ -743,8 +824,7 @@ h1 {
   }
 
   #action > #add,
-  #action-bar > #add,
-  #action-bar > #haiku {
+  #action-bar > #add {
     display: none;
   }
 
@@ -766,7 +846,7 @@ h1 {
     display: unset;
   }
 
-  #container-of-profile {
+  #overlay {
     padding-bottom: unset;
   }
 
@@ -822,14 +902,6 @@ h1 {
 
 }
 
-@media (max-width: 670px) {
-
-  #action-bar > #linux {
-    display: none;
-  }
-
-}
-
 @media (max-width: 572px) {
 
   #action > a,