diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..8a4d8e4
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,530 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+body{
+  font-family: "Quicksand", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  background: #1d1e1d;
+  color: #D7D7D7;
+}
+
+.navbar{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999;
+    padding: 30px 0;
+    transition: all 0.3s ease;
+    top: 0;
+    width: 100%;
+    height: 75px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(59%, rgba(0, 0, 0, 0.8)), to(transparent));
+    background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 80%, transparent);
+    padding: 15px 0;
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E", endColorstr="#336C9C", GradientType=1 );
+}
+.navbar .max-width{
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar .logo a{
+    color: #fff;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 30px;
+    font-weight: 600;
+}
+.navbar .logo img{
+ margin-bottom: 5px;
+ width: 50px;
+}
+.navbar .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 5px;
+}
+.menu{
+  margin-right: 15px;
+}
+
+.navbar .menu li{
+  list-style: none;
+  display: inline-block;
+}
+.navbar .menu li a{
+    display: block;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+.navbar .menu li a:hover{
+    color: hsla(47, 97%, 62%, 1);
+    text-decoration: none;
+filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74", endColorstr="#FCD43E", GradientType=1 );
+}
+.navbar.sticky .menu li a:hover{
+    color: #fff;
+}
+.menu-btn{
+    color: #fff;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
+}
+.inaclogo{
+  display: none;
+}
+
+
+
+@media (max-width: 947px){
+    .navbar .max-width{
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .aclogo a{
+      color: white;
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .aclogo img{
+      width: 47px;
+    }
+    .aclogo{
+      border-bottom: 1px solid white;
+      position: absolute;
+      padding-bottom: 5px;
+      width: 100%;
+      top: 1%;
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      color: white;
+      font-size: 35px;
+      font-weight: 500;
+    }
+    #menu-btn{
+      position: absolute;
+      left: 5%;
+      display: flex;
+      align-items: center;
+      z-index: 999;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active:before{
+        content: "\f00d";
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: #111;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        margin: 20px 0;
+        font-size: 25px;
+    }
+}
+
+
+.main{
+  width: 100%;
+}
+
+.intro{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 100px;
+  width: 90%;
+}
+.intro h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.intro hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.intro p{
+  font-size: 1.1em;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.intro .p1{
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+.intro .p2{
+  margin-bottom: 20px;
+}
+.intro span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 5px;
+}
+.intro ul{
+  list-style-position: inside; 
+}
+.intro li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+
+
+.features{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 50px;
+  width: 90%;
+}
+.features h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.features h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.features hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.features ul{
+  list-style-position: inside; 
+}
+.features li{
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  font-size: 1.1em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+
+
+.practices{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 50px;
+  width: 90%;
+}
+.practices h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.practices h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.practices hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.practices span{
+  font-size: 1.1em;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.hf{
+  margin-top: 30px;
+}
+.spanl{
+  margin-bottom: 20px;
+}
+
+
+.limitations{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 50px;
+  width: 90%;
+}
+.limitations h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.limitations h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.limitations hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.limitations span{
+  font-size: 1.1em;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+
+
+.tech{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 50px;
+  width: 90%;
+}
+.tech h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.tech h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.tech h3{
+  margin-bottom: 5px;
+  margin-top: 20px;
+}
+.tech hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.tech span{
+  font-size: 1.1em;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.tech ul{
+  list-style-position: inside; 
+}
+.tech li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+.tech #spanl{
+  margin-top: 10px;
+}
+.tech #spanf{
+  margin-bottom: 10px;
+}
+
+
+
+
+
+
+
+footer {
+  margin-top: 100px;
+  background-color: #2a2a2a;
+  color: #ffffff;
+  font-size: 16px;
+}
+footer * {
+  font-family: "Poppins", sans-serif;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+}
+.row {
+  padding: 2em 1em;
+}
+.row.primary {
+  display: grid;
+  background: #2a2a2a;
+  grid-template-columns: 2fr 1fr 2fr;
+  align-items: stretch;
+}
+.column {
+  background: #2a2a2a;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 2em;
+  min-height: 15em;
+}
+.followhead,.quickhead,.namehead {
+  width: 100%;
+  margin-bottom: 1rem;
+  text-align: left;
+  color: #2a8ded;
+  font-size: 1.6em;
+  white-space: nowrap;
+}
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+footer li:not(:first-child) {
+  margin-top: 0.8em;
+}
+footer ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+footer ul li a:hover {
+  color: #2a8ded;
+}
+footer .about p {
+  text-align: justify;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/*button {
+  font-size: 1em;
+  padding: 1em;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  background-color: #2a8ded;
+  color: #ffffff;
+}
+*/
+.social a{
+  text-decoration: none;
+  color: white;
+}
+.social {
+  color: white;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 2.4em;
+  flex-direction: row;
+}
+.social i{
+  padding: 1rem;
+}
+.social i:hover {
+  color: #2a8ded;
+}
+.copyright {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 3em;
+  background-color: #25262e;
+}
+#made{
+  color: white;
+  text-decoration: none;
+}
+.copyright p {
+  font-size: 0.9em;
+  text-align: center;
+}
+
+
+@media screen and (max-width: 850px) {
+  .code{
+    width: 80%;
+  }
+  .row.primary {
+    grid-template-columns: 1fr;
+  }
+  .row.secondary {
+    flex-direction: column;
+  }
+}
+@media (max-width: 690px) {
+
+    .main{
+
+      width: 90%;
+      margin: 100px auto 0 auto;
+      font-size: 0.9em;
+    }
+    
+    .max-width{
+        padding: 0 23px;
+    }
+}
+
+/* Responsive Media Queries 768 */
+@media (max-width: 768px) {
+  /* Adjust Chessboard and Main Containers */
+  .code{
+    width: 100%;
+  }
+  
+  footer .social{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  footer .about p{
+    word-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  
+
+}
diff --git a/css/blog.css b/css/blog.css
new file mode 100644
index 0000000..5800a15
--- /dev/null
+++ b/css/blog.css
@@ -0,0 +1,439 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+body{
+  font-family: "Quicksand", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  background: #1d1e1d;
+  color: #D7D7D7;
+}
+
+.navbar{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999;
+    padding: 30px 0;
+    transition: all 0.3s ease;
+    top: 0;
+    width: 100%;
+    height: 75px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(59%, rgba(0, 0, 0, 0.8)), to(transparent));
+    background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 80%, transparent);
+    padding: 15px 0;
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E", endColorstr="#336C9C", GradientType=1 );
+}
+.navbar .max-width{
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar .logo a{
+    color: #fff;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 30px;
+    font-weight: 600;
+}
+.navbar .logo img{
+ margin-bottom: 5px;
+ width: 50px;
+}
+.navbar .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 5px;
+}
+.menu{
+  margin-right: 15px;
+}
+
+.navbar .menu li{
+  list-style: none;
+  display: inline-block;
+}
+.navbar .menu li a{
+    display: block;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+.navbar .menu li a:hover{
+    color: hsla(47, 97%, 62%, 1);
+    text-decoration: none;
+filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74", endColorstr="#FCD43E", GradientType=1 );
+}
+.navbar.sticky .menu li a:hover{
+    color: #fff;
+}
+.menu-btn{
+    color: #fff;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
+}
+.inaclogo{
+  display: none;
+}
+
+
+
+@media (max-width: 947px){
+    .navbar .max-width{
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .aclogo a{
+      color: white;
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .aclogo img{
+      width: 47px;
+    }
+    .aclogo{
+      border-bottom: 1px solid white;
+      position: absolute;
+      width: 100%;
+      padding-bottom: 5px;
+      top: 1%;
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      color: white;
+      font-size: 35px;
+      font-weight: 5500;
+    }
+    #menu-btn{
+      position: absolute;
+      left: 5%;
+      display: flex;
+      align-items: center;
+      z-index: 999;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active:before{
+        content: "\f00d";
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: #111;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        margin: 20px 0;
+        font-size: 25px;
+    }
+}
+
+
+.main{
+  width: 100%;
+  margin-top: 100px;
+}
+.main h1{
+  text-align: center;
+  margin-bottom: 20px;
+}
+.main hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 5px auto 20px auto;
+    padding: 0;
+    width: 90%;
+}
+
+.intro{
+  display: flex;
+  margin: 10px auto 0 auto;
+  flex-flow: column;
+  width: 90%;
+}
+.intro h1{
+  text-align: center;
+  margin-bottom: 15px;
+}
+.intro hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.intro p{
+  font-size: 1.1em;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.intro .p1{
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+.intro .p2{
+  margin-bottom: 20px;
+}
+.intro span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 5px;
+}
+.intro ul{
+  list-style-position: inside; 
+}
+.intro li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+
+
+
+.blog{
+  display: flex;
+  margin: 0 auto;
+  flex-flow: column;
+  margin-top: 50px;
+  width: 90%;
+}
+.blog h1{
+  text-align: justify;
+  margin-bottom: 20px;
+}
+.blog hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+.blog p{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.blog span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 5px;
+}
+.blog ol{
+  list-style-position: inside; 
+}
+.blog ul{
+  list-style-position: inside; 
+}
+.blog li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+
+}
+.blog .lul{
+  margin-bottom: 10px;
+  margin-top: 5px;
+}
+
+
+
+
+
+footer {
+  margin-top: 100px;
+  background-color: #2a2a2a;
+  color: #ffffff;
+  font-size: 16px;
+}
+footer * {
+  font-family: "Poppins", sans-serif;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+}
+.row {
+  padding: 2em 1em;
+}
+.row.primary {
+  display: grid;
+  background: #2a2a2a;
+  grid-template-columns: 2fr 1fr 2fr;
+  align-items: stretch;
+}
+.column {
+  background: #2a2a2a;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 2em;
+  min-height: 15em;
+}
+.followhead,.quickhead,.namehead {
+  width: 100%;
+  margin-bottom: 1rem;
+  text-align: left;
+  color: #2a8ded;
+  font-size: 1.6em;
+  white-space: nowrap;
+}
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+footer li:not(:first-child) {
+  margin-top: 0.8em;
+}
+footer ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+footer ul li a:hover {
+  color: #2a8ded;
+}
+footer .about p {
+  text-align: justify;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/*button {
+  font-size: 1em;
+  padding: 1em;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  background-color: #2a8ded;
+  color: #ffffff;
+}
+*/
+.social a{
+  text-decoration: none;
+  color: white;
+}
+.social {
+  color: white;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 2.4em;
+  flex-direction: row;
+}
+.social i{
+  padding: 1rem;
+}
+.social i:hover {
+  color: #2a8ded;
+}
+.copyright {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 3em;
+  background-color: #25262e;
+}
+#made{
+  color: white;
+  text-decoration: none;
+}
+.copyright p {
+  font-size: 0.9em;
+  text-align: center;
+}
+@media (max-width: 690px) {
+  .main h1{
+    font-size: 20px;
+    font-weight: 600;
+    
+  }
+  .main{
+    width: 90%;
+    margin: 100px auto 0 auto;
+    font-size: 0.9em;
+  }
+  .main p{
+    line-height: 1.3;
+    padding: 0;
+    margin: 0;
+  }
+  .blog h1{
+    text-align: justify;
+    margin-bottom: 20px;
+  }
+
+    .max-width{
+        padding: 0 23px;
+    }
+}
+@media screen and (max-width: 850px) {
+  .row.primary {
+    grid-template-columns: 1fr;
+  }
+  .row.secondary {
+    flex-direction: column;
+  }
+}
+
+
+/* Responsive Media Queries 768 */
+@media (max-width: 768px) {
+  /* Adjust Chessboard and Main Containers */
+
+  footer .social{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  footer .about p{
+    word-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  
+
+
+}
diff --git a/css/faq.css b/css/faq.css
new file mode 100644
index 0000000..27c96ff
--- /dev/null
+++ b/css/faq.css
@@ -0,0 +1,375 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+body{
+  font-family: "Quicksand", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  background: #1d1e1d;
+  color: #D7D7D7;
+}
+
+.navbar{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999;
+    padding: 30px 0;
+    transition: all 0.3s ease;
+    top: 0;
+    width: 100%;
+    height: 75px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(59%, rgba(0, 0, 0, 0.8)), to(transparent));
+    background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 80%, transparent);
+    padding: 15px 0;
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E", endColorstr="#336C9C", GradientType=1 );
+}
+.navbar .max-width{
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar .logo a{
+    color: #fff;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 30px;
+    font-weight: 600;
+}
+.navbar .logo img{
+ margin-bottom: 5px;
+ width: 50px;
+}
+.navbar .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 5px;
+}
+.menu{
+  margin-right: 15px;
+}
+
+.navbar .menu li{
+  list-style: none;
+  display: inline-block;
+}
+.navbar .menu li a{
+    display: block;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+.navbar .menu li a:hover{
+    color: hsla(47, 97%, 62%, 1);
+    text-decoration: none;
+filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74", endColorstr="#FCD43E", GradientType=1 );
+}
+.navbar.sticky .menu li a:hover{
+    color: #fff;
+}
+.menu-btn{
+    color: #fff;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
+}
+.inaclogo{
+  display: none;
+}
+
+
+
+@media (max-width: 947px){
+    .navbar .max-width{
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .aclogo a{
+      color: white;
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .aclogo img{
+      margin-top: 0;
+      width: 47px;
+    }
+    .aclogo{
+      border-bottom: 1px solid white;
+      position: absolute;
+      padding-bottom: 5px;
+      width: 100%;
+      top: 1%;
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      color: white;
+      font-size: 35px;
+      font-weight: 5500;
+    }
+    #menu-btn{
+      position: absolute;
+      left: 5%;
+      display: flex;
+      align-items: center;
+      z-index: 999;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active:before{
+        content: "\f00d";
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: #111;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        margin: 20px 0;
+        font-size: 25px;
+    }
+}
+
+
+
+
+.main{
+  width: 100%;
+  margin-top: 100px;
+}
+.main h1{
+  margin-bottom: 20px;
+  text-align: center;
+}
+.q{
+  display: flex;
+  margin: 25px auto 25px auto;
+  flex-flow: column;
+  width: 90%;
+}
+.main hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 5px auto;
+    padding: 0;
+    width: 90%;
+}
+.q h1{
+  text-align: justify;
+  margin-bottom: 20px;
+}
+.q p{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.q span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.q ul{
+  list-style-position: inside; 
+}
+.q ol{
+  list-style-position: inside; 
+}
+.q li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+
+}
+
+
+
+
+
+
+footer {
+  margin-top: 100px;
+  background-color: #2a2a2a;
+  color: #ffffff;
+  font-size: 16px;
+}
+footer * {
+  font-family: "Poppins", sans-serif;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+}
+.row {
+  padding: 2em 1em;
+}
+.row.primary {
+  display: grid;
+  background: #2a2a2a;
+  grid-template-columns: 2fr 1fr 2fr;
+  align-items: stretch;
+}
+.column {
+  background: #2a2a2a;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 2em;
+  min-height: 15em;
+}
+.followhead,.quickhead,.namehead {
+  width: 100%;
+  margin-bottom: 1rem;
+  text-align: left;
+  color: #2a8ded;
+  font-size: 1.6em;
+  white-space: nowrap;
+}
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+footer li:not(:first-child) {
+  margin-top: 0.8em;
+}
+footer ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+footer ul li a:hover {
+  color: #2a8ded;
+}
+footer .about p {
+  text-align: justify;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/*button {
+  font-size: 1em;
+  padding: 1em;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  background-color: #2a8ded;
+  color: #ffffff;
+}
+*/
+.social a{
+  text-decoration: none;
+  color: white;
+}
+.social {
+  color: white;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 2.4em;
+  flex-direction: row;
+}
+.social i{
+  padding: 1rem;
+}
+.social i:hover {
+  color: #2a8ded;
+}
+.copyright {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 3em;
+  background-color: #25262e;
+}
+#made{
+  color: white;
+  text-decoration: none;
+}
+.copyright p {
+  font-size: 0.9em;
+  text-align: center;
+}
+@media (max-width: 690px) {
+
+  .main h1{
+    font-size: 20px;
+    font-weight: 600;
+    
+  }
+  .main{
+    width: 90%;
+    margin: 100px auto 0 auto;
+    font-size: 0.9em;
+  }
+  .main p{
+    line-height: 1.3;
+    padding: 0;
+    margin: 0;
+  }
+
+    .max-width{
+        padding: 0 23px;
+    }
+}
+@media screen and (max-width: 850px) {
+  .row.primary {
+    grid-template-columns: 1fr;
+  }
+  .row.secondary {
+    flex-direction: column;
+  }
+}
+
+
+/* Responsive Media Queries 768 */
+@media (max-width: 768px) {
+  /* Adjust Chessboard and Main Containers */
+
+  footer .social{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  footer .about p{
+    word-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  
+
+
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 6334b57..91945dc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,18 +2,168 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-html {
-  scroll-behavior: smooth;
+  text-decoration: none;
 }
 body{
   font-family: "Quicksand", serif;
   font-optical-sizing: auto;
-  font-weight: 300;
+  overflow-x: none;
   font-style: normal;
   background: #101110;
   color:white;
 }
+.navbar{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999;
+    transition: all 0.3s ease;
+    top: 0;
+    height: 75px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(59%, rgba(0, 0, 0, 0.8)), to(transparent));
+    background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 80%, transparent);
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E", endColorstr="#336C9C", GradientType=1 );
+}
+.navbar .max-width{
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar .logo a{
+    color: #fff;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 30px;
+    font-weight: 600;
+}
+.navbar .logo img{
+  margin-bottom: 5px;
+  width: 50px;
+}
+.navbar .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 5px;
+}
+.menu{
+  margin-right: 15px;
+}
+
+.navbar .menu li{
+  list-style: none;
+  display: inline-block;
+}
+.navbar .menu li a{
+    display: block;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+.navbar .menu li a:hover{
+    color: hsla(47, 97%, 62%, 1);
+    text-decoration: none;
+filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74", endColorstr="#FCD43E", GradientType=1 );
+}
+.navbar.sticky .menu li a:hover{
+    color: #fff;
+}
+.menu-btn{
+    color: #fff;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
+}
+.inaclogo{
+  display: none;
+}
+
+@media (max-width: 947px){
+    .navbar .max-width{
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .aclogo a{
+      color: white;
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .aclogo img{
+      margin-top: 0;
+      width: 50px;
+    }
+    .aclogo{
+      border-bottom: 1px solid white;
+      position: absolute;
+      padding-bottom: 5px;
+      width: 100%;
+      top: 1%;
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      color: white;
+      font-size: 35px;
+      font-weight: 500;
+    }
+    #menu-btn{
+      position: absolute;
+      left: 5%;
+      display: flex;
+      align-items: center;
+      z-index: 999;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active:before{
+        content: "\f00d";
+    }
+    .navbar .menu .menu-name{
+      font-weight: 600;
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: #111;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        margin: 20px 0;
+        font-size: 25px;
+    }
+}
+@media (max-width: 690px) {
+    .navbar .logo a, .aclogo a{
+    font-size: 30px;
+    }
+    .navbar .logo{
+      
+    }
+    .max-width{
+        padding: 0 23px;
+    }
+}
+
+
+
 #myBoard {
   margin: 0.5rem 0 0 0;
   max-width: 100%;
@@ -358,28 +508,24 @@ footer * {
   font-size: 1.6em;
   white-space: nowrap;
 }
-ul {
+footer ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
 }
-li:not(:first-child) {
+footer li:not(:first-child) {
   margin-top: 0.8em;
 }
-ul li a {
+footer ul li a {
   color: #ffffff;
   text-decoration: none;
 }
-ul li a:hover {
+footer ul li a:hover {
   color: #2a8ded;
 }
-.about{
-  display:flex;
-  flex-wrap: wrap;
-}
-.about p {
+footer .about p {
   text-align: justify;
   line-height: 1.5;
   margin: 0;
@@ -403,7 +549,6 @@ ul li a:hover {
   color: white;
   display: flex;
   justify-content: flex-start;
-  flex-wrap: wrap;
   font-size: 2.4em;
   flex-direction: row;
 }
@@ -503,8 +648,7 @@ ul li a:hover {
     height: 10vh;
     font-size: 1rem;
   }
-
-	footer .social{
+  footer .social{
     display: flex;
     flex-wrap: wrap;
   }
@@ -514,6 +658,9 @@ ul li a:hover {
     display: flex;
     flex-wrap: wrap;
   }
+  
+  
+
 }
 
 @media (max-width: 480px) {
diff --git a/css/usage.css b/css/usage.css
new file mode 100644
index 0000000..77043ae
--- /dev/null
+++ b/css/usage.css
@@ -0,0 +1,507 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+body{
+  font-family: "Quicksand", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  background: #1d1e1d;
+  color: #D7D7D7;
+}
+
+.navbar{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999;
+    padding: 30px 0;
+    transition: all 0.3s ease;
+    top: 0;
+    width: 100%;
+    height: 75px;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(59%, rgba(0, 0, 0, 0.8)), to(transparent));
+    background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 80%, transparent);
+    padding: 15px 0;
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E", endColorstr="#336C9C", GradientType=1 );
+}
+.navbar .max-width{
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar .logo a{
+    color: #fff;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 30px;
+    font-weight: 600;
+}
+.navbar .logo img{
+ margin-bottom: 5px;
+ width: 50px;
+}
+.navbar .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 5px;
+}
+.menu{
+  margin-right: 15px;
+}
+
+.navbar .menu li{
+  list-style: none;
+  display: inline-block;
+}
+.navbar .menu li a{
+    display: block;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+.navbar .menu li a:hover{
+    color: hsla(47, 97%, 62%, 1);
+    text-decoration: none;
+filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74", endColorstr="#FCD43E", GradientType=1 );
+}
+.navbar.sticky .menu li a:hover{
+    color: #fff;
+}
+.menu-btn{
+    color: #fff;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
+}
+.inaclogo{
+  display: none;
+}
+
+
+
+@media (max-width: 947px){
+    .navbar .max-width{
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .aclogo a{
+      color: white;
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .aclogo img{
+      margin-top: 0;
+      width: 47px;
+    }
+    .aclogo{
+      border-bottom: 1px solid white;
+      position: absolute;
+      padding-bottom: 5px;
+      width: 100%;
+      top: 1%;
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      color: white;
+      font-size: 35px;
+      font-weight: 5500;
+    }
+    #menu-btn{
+      position: absolute;
+      left: 5%;
+      display: flex;
+      align-items: center;
+      z-index: 999;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active:before{
+        content: "\f00d";
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: #111;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        margin: 20px 0;
+        font-size: 25px;
+    }
+}
+@media (max-width: 690px) {
+
+    .max-width{
+        padding: 0 23px;
+    }
+}
+
+.main{
+  width: 100%;
+  margin-top: 100px;
+}
+.main h1{
+  margin-bottom: 20px;
+  text-align: center;
+}
+.intro{
+  display: flex;
+  margin: 25px auto 25px auto;
+  flex-flow: column;
+  width: 90%;
+}
+.intro p{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.encrypt{
+  display: flex;
+  margin: 25px auto 25px auto;
+  flex-flow: column;
+  width: 90%;
+}
+.encrypt img{
+  width: 50%;
+  margin-bottom: 10px;
+}
+.main hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 5px auto;
+    padding: 0;
+    width: 90%;
+}
+.encrypt h1{
+  text-align: justify;
+  margin-bottom: 20px;
+}
+.encrypt h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.encrypt h3{
+  margin-bottom: 5px;
+  margin-top: 20px;
+}
+.encrypt p{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.encrypt span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.encrypt ul{
+  list-style-position: inside; 
+}
+.encrypt ol{
+  list-style-position: inside; 
+}
+.encrypt li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+
+
+.decrypt{
+  display: flex;
+  margin: 25px auto 25px auto;
+  flex-flow: column;
+  width: 90%;
+}
+.main hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid gray;
+    margin: 5px auto;
+    padding: 0;
+    width: 90%;
+}
+.decrypt h1{
+  margin-bottom: 20px;
+}
+.decrypt h1{
+  text-align: justify;
+  margin-bottom: 20px;
+}
+.decrypt h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.decrypt h3{
+  margin-bottom: 5px;
+  margin-top: 20px;
+}
+.decrypt img{
+  width: 50%;
+  margin-bottom: 10px;
+}
+.decrypt p{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+  text-align: justify;
+  line-height: 1.5;
+}
+.decrypt span{
+  font-size: 1.1em;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.decrypt ul{
+  list-style-position: inside; 
+}
+.decrypt ol{
+  list-style-position: inside; 
+}
+.decrypt li{
+  font-size: 1.1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.5;
+  color: #CBCBCB;
+  font-family: "Poppins", sans-serif;
+}
+
+
+
+
+
+
+
+footer {
+  margin-top: 100px;
+  background-color: #2a2a2a;
+  color: #ffffff;
+  font-size: 16px;
+}
+footer * {
+  font-family: "Poppins", sans-serif;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+}
+.row {
+  padding: 2em 1em;
+}
+.row.primary {
+  display: grid;
+  background: #2a2a2a;
+  grid-template-columns: 2fr 1fr 2fr;
+  align-items: stretch;
+}
+.column {
+  background: #2a2a2a;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 2em;
+  min-height: 15em;
+}
+.followhead,.quickhead,.namehead {
+  width: 100%;
+  margin-bottom: 1rem;
+  text-align: left;
+  color: #2a8ded;
+  font-size: 1.6em;
+  white-space: nowrap;
+}
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+footer li:not(:first-child) {
+  margin-top: 0.8em;
+}
+footer ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+footer ul li a:hover {
+  color: #2a8ded;
+}
+footer .about p {
+  text-align: justify;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/*button {
+  font-size: 1em;
+  padding: 1em;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  background-color: #2a8ded;
+  color: #ffffff;
+}
+*/
+.social a{
+  text-decoration: none;
+  color: white;
+}
+.social {
+  color: white;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 2.4em;
+  flex-direction: row;
+}
+.social i{
+  padding: 1rem;
+}
+.social i:hover {
+  color: #2a8ded;
+}
+.copyright {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1em 3em;
+  background-color: #25262e;
+}
+#made{
+  color: white;
+  text-decoration: none;
+}
+.copyright p {
+  font-size: 0.9em;
+  text-align: center;
+}
+@media (max-width: 690px) {
+
+
+  .main img{
+    width: 90%;
+  }
+  .main h1{
+    font-size: 20px;
+    font-weight: 600;
+    
+  }
+  .main{
+    width: 70%;
+    margin: 100px auto 0 auto;
+    font-size: 0.9em;
+  }
+  .main p{
+    line-height: 1.3;
+    padding: 0;
+    margin: 0;
+  }
+
+    .max-width{
+        padding: 0 23px;
+    }
+}
+@media screen and (max-width: 850px) {
+  .row.primary {
+    grid-template-columns: 1fr;
+  }
+  .row.secondary {
+    flex-direction: column;
+  }
+}
+
+
+/* Responsive Media Queries 768 */
+@media (max-width: 768px) {
+  /* Adjust Chessboard and Main Containers */
+
+  footer .social{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  footer .about p{
+    word-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .main{
+    width: 90%;
+    margin: 100px auto 0 auto;
+  }
+  body li{
+    font-size: 1em;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+  line-height: 1.3;
+  }
+  span{
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  }
+  
+  h1{
+    margin-bottom: 20px;
+  }
+.encrypt h2{
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+.encrypt h3{
+  margin-bottom: 5px;
+  margin-top: 20px;
+  }
+  p{
+    font-size: 1.1em;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    text-align: justify;
+    line-height: 1.5;
+  }
+
+
+}