Language seperation

public/styles/devices.css

@@ -0,0 +1,144 @@
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+::-webkit-scrollbar-track {
+  background: rgb(41, 41, 41);
+}
+::-webkit-scrollbar-thumb {
+  background: #7f5af0;
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+[class*="col-"] {
+  float: right;
+}
+
+#sidenavbar {
+  z-index: 1;
+  margin-left: -8px;
+  overflow: visible;
+  background-color: #121629;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+}
+
+#sidenavbar button {
+  all: unset;
+  margin: 5px auto;
+  color: #eff0f3;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-decoration: none;
+  font-size: 1.4em;
+  border: none;
+}
+
+#sidenavbar button:hover {
+  background: #eff0f3;
+  color: #2a2a2a;
+  cursor: pointer;
+}
+
+.main {
+  height: 100%;
+}
+
+body {
+  background-color: #16161a;
+  color: #94a1b2;
+  font-size: 1.4em;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.6em;
+  margin-left: 140px;
+}
+
+p {
+  text-align: justify;
+  font-size: 0.875em;
+}
+
+header {
+  text-align: center;
+}
+
+footer,
+aside,
+article {
+  text-align: center;
+  padding: 2%;
+  margin: 1.5%;
+}
+
+img {
+  width: 100%;
+  max-width: max-content;
+  padding: 16px;
+  height: auto;
+
+  display: block;
+}
+
+.col-1 {
+  width: 8.33%;
+}
+.col-2 {
+  width: 16.66%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-4 {
+  width: 33.33%;
+}
+.col-5 {
+  width: 41.66%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-7 {
+  width: 58.33%;
+}
+.col-8 {
+  width: 66.66%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-10 {
+  width: 83.33%;
+}
+.col-11 {
+  width: 91.66%;
+}
+.col-12 {
+  width: 100%;
+}
+
+@media only screen and (max-width: 767px) {
+  [class*="col-"] {
+    width: 100%;
+  }
+}