New Version of the website

5 files changed, 51 insertions, 1039 deletions

diff --git a/CSS/GreenAndDark.css b/CSS/GreenAndDark.css
deleted file mode 100755
index 7687e73..0000000
--- a/CSS/GreenAndDark.css
+++ /dev/null
@@ -1,230 +0,0 @@
-body, html{
-    height: calc(100% - 2em);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
-}
-body{
-    background: #16FF5C; /* Old browsers */
-    background: -moz-linear-gradient(45deg, #16FF5C 0%, #076aff 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16FF5C', endColorstr='#076aff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-aside{
-    color: #fff;
-    display: grid;
-    grid-template-columns: 40px auto;
-    padding: 2em;
-}
-aside img{
-    cursor: pointer;
-}
-a{
-    color:#fff;
-}
-.active {
-    position: absolute;
-    display: block;
-    background: rgba(37,37,37,1);
-    color: #fff;
-    width: 50%;
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-.MenuX{
-    position: absolute;
-    display: block;
-    top: 0;
-    right: .5em;
-    padding: 1em;
-    color: #000;
-    cursor: pointer;
-}
-ul {
-    display: none;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-ul li a {
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: .6em;
-    display: block;
-    padding: .5em 3em;
-    color: #000;
-}
-div.logo{
-    width: 150px;
-    height: 150px;
-    background-image: url('../images/LOGO_Transparent.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    padding-bottom:5px;
-}
-main{
-    padding: 1em 1.4em;
-    color: white;
-}
-.search{
-    padding: 12px 20px 12px;
-    width: 50%;
-    border-radius: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 15em;
-    display: block;
-    background-color: rgba(36,38,40,.72);
-    color: rgb(186,181,171);
-    border-color: #575757;
-    font-size: 16px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
-}
-.search:focus{
-    color: #fff;
-    width: 90%;
-    background-color: rgba(36,38,40,1);
-}
-.dropbtn {
-  color: #fff;
-  padding: 1.4em;
-  font-size: .8em;
-  cursor: pointer;
-  text-transform: uppercase;
-  background: rgba(37,37,37,1);
-  border: none;*/
-  display: block;
-  position: relative;
-  width: 100%;
-  text-align: left;
-}
-.dropbtn:hover, .dropbtn:focus {
-  background-color: #000;
-}
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: rgba(37,37,37,1);
-  /*min-width: 160px;*/
-  width: 100%;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-.dropdown-content a {
-  color: #fff;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-.dropdown a:hover {background-color: #000;}
-.show {display: block;}
-@media only screen and (min-width: 768px) and (min-height: 614px){
-    body{
-        display: grid;
-        grid-template-columns: 375px auto;
-        /*padding: 2em;*/
-    }
-    .menuimg{
-        display: none;
-    }
-    .MenuX{
-        display: none;
-    }
-    aside{
-        background:rgba(37,37,37,1);
-        grid-template-columns: auto;
-        padding: 0 !important;
-        border-radius: 5px 0px 0px 5px;
-        margin: 82px 0 62px 101px;
-    }
-    main{
-        padding: 4em;
-        background: rgba(24,26,27,1);
-        background-size: 70%;
-        border-radius: 0px 5px 5px 0px;
-        background-image: url('../images/SideFlareGreen.svg') !important;
-        background-repeat: no-repeat;
-        background-position: 100% 100%;
-        margin: 82px 101px 62px 0;
-    }
-    ul{
-        display: block;
-        margin-top: 2em;
-        position:  relative !important;
-        background: none !important;
-        background: #fff;
-        width: 100% !important;
-    }
-    ul li a{
-        padding: 1.4em;
-        font-size: .8em;
-        color:#fff;
-    }
-    ul li a:hover{
-        background: #000;
-    }
-    .search{
-        width: 50%;
-        margin: 0 auto;
-        display: block;
-        margin-bottom: 0;
-    }
-    div.logo{
-        margin-top: 12em;
-    }
-}
-@media only screen and (min-width: 1610px){
-    div.logo{
-        height:6.25em !important;
-        width: 37.8125em !important;
-        background-image: url('../images/LOGO_21x127.png') !important;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-        padding-bottom: 5px !important;
-        /*width: 38.66% !important;*/
-    }
-}
-@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
-    body{
-        display: flex !important;
-    }
-    main{
-        flex: 1;
-    }
-    ul li a{
-        font-size: 0.625em;
-        padding: 1em;
-    }
-}
-@media only screen and (max-height: 665px) and (min-height: 582px){
-    div.logo{
-        margin-top: 1em;
-    }
-}
-@media only screen and (max-height: 762px){
-    ul li a{
-        font-size: 7px;
-    }
-    p{
-        font-size: 10px;
-    }
-    body{
-        grid-template-columns: 16% auto;
-    }
-
-}
diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css
deleted file mode 100755
index 108d676..0000000
--- a/CSS/PurpleAndDark.css
+++ /dev/null
@@ -1,227 +0,0 @@
-
-body, html{
-    height: calc(100% - 2em);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
-}
-body{
-    background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-aside{
-    color: #fff;
-    display: grid;
-    grid-template-columns: 40px auto;
-    padding: 2em;
-}
-aside img{
-    cursor: pointer;
-}
-a{
-    color:#fff;
-}
-.active {
-    position: absolute;
-    display: block;
-    background: rgba(37,37,37,1);
-    color: #fff;
-    width: 50%;
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-.MenuX{
-    position: absolute;
-    display: block;
-    top: 0;
-    right: .5em;
-    padding: 1em;
-    color: #000;
-    cursor: pointer;
-}
-ul {
-    display: none;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-ul li a {
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: .6em;
-    display: block;
-    padding: .5em 3em;
-    color: #000;
-}
-div.logo{
-    width: 150px;
-    height: 150px;
-    background-image: url('../images/LOGO_Transparent.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    padding-bottom:5px;
-}
-main{
-    padding: 1em 1.4em;
-    color: white;
-}
-.search{
-    padding: 12px 20px 12px;
-    width: 50%;
-    border-radius: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 15em;
-    display: block;
-    background-color: rgba(36,38,40,.72);
-    color: rgb(186,181,171);
-    border-color: #575757;
-    font-size: 16px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
-}
-.search:focus{
-    color: #fff;
-    width: 90%;
-    background-color: rgba(36,38,40,1);
-}
-.dropbtn {
-  color: #fff;
-  padding: 1.4em;
-  font-size: .8em;
-  cursor: pointer;
-  background: rgba(37,37,37,1);
-  text-transform: uppercase;
-  border: none;*/
-  display: block;
-  position: relative;
-  width: 100%;
-  text-align: left;
-}
-.dropbtn:hover, .dropbtn:focus {
-  background-color: #000;
-}
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: rgba(37,37,37,1);
-  /*min-width: 160px;*/
-  width: 100%;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-.dropdown-content a {
-  color: #fff;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-.dropdown a:hover {background-color: #000;}
-.show {display: block;}
-@media only screen and (min-width: 768px) and (min-height: 582px){
-    body{
-        display: grid;
-        grid-template-columns: 375px auto;
-        /*padding: 2em;*/
-    }
-    .menuimg{
-        display: none;
-    }
-    .MenuX{
-        display: none;
-    }
-    aside{
-        background:rgba(37,37,37,1);
-        grid-template-columns: auto;
-        padding: 0 !important;
-        border-radius: 5px 0px 0px 5px;
-        margin: 82px 0 62px 101px;
-    }
-    main{
-        padding: 4em;
-        background: rgba(24,26,27,1);
-        background-size: 70%;
-        border-radius: 0px 5px 5px 0px;
-        background-image: url('../images/SideFlarePurple.svg') !important;
-        background-repeat: no-repeat;
-        background-position: 100% 100%;
-        margin: 82px 101px 62px 0;
-    }
-    ul{
-        display: block;
-        margin-top: 2em;
-        position:  relative !important;
-        background: none !important;
-        background: #fff;
-        width: 100% !important;
-    }
-    ul li a{
-        padding: 1.4em;
-        font-size: .8em;
-        color:#fff;
-    }
-    ul li a:hover{
-        background: #000;
-    }
-    .search{
-        width: 50%;
-        margin: 0 auto;
-        display: block;
-        margin-bottom: 0;
-    }
-    div.logo{
-        margin-top: 12em;
-    }
-}
-@media only screen and (min-width: 1610px){
-    div.logo{
-        height:6.25em !important;
-        width: 37.8125em !important;
-        background-image: url('../images/LOGO_21x127.png') !important;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-        padding-bottom: 5px !important;
-        /*width: 38.66% !important;*/
-    }
-}
-/*@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
-    body{
-        display: flex !important;
-    }
-    main{
-        flex: 1;
-    }
-    ul li a{
-        font-size: 0.625em;
-        padding: 1em;
-    }
-}*/
-@media only screen and (max-height: 665px) and (min-height: 582px){
-    div.logo{
-        margin-top: 1em;
-    }
-}
-/*@media only screen and (max-height: 762px){
-    ul li a{
-        font-size: 7px;
-    }
-    p{
-        font-size: 10px;
-    }
-    body{
-        grid-template-columns: 16% auto;
-    }
-
-}*/
diff --git a/CSS/PurpleAndWhite.css b/CSS/PurpleAndWhite.css
deleted file mode 100755
index 50dd54c..0000000
--- a/CSS/PurpleAndWhite.css
+++ /dev/null
@@ -1,223 +0,0 @@
-
-body, html{
-    height: calc(100% - 2em);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
-}
-body{
-    background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-aside{
-    color: #fff;
-    display: grid;
-    grid-template-columns: 40px auto;
-    padding: 2em;
-}
-aside img{
-    cursor: pointer;
-}
-a{
-    color:#000;
-}
-.active {
-    position: absolute;
-    display: block;
-    background: rgba(210,210,210,1);
-    width: 50%;
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-.MenuX{
-    position: absolute;
-    display: block;
-    top: 0;
-    right: .5em;
-    padding: 1em;
-    color: #000;
-    cursor: pointer;
-}
-ul {
-    display: none;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-ul li a {
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: .6em;
-    display: block;
-    padding: .5em 3em;
-    color: #000;
-}
-div.logo{
-    width: 150px;
-    height: 150px;
-    background-image: url('../images/LOGO_Transparent.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    padding-bottom:5px;
-}
-main{
-    padding: 1em 1.4em;
-}
-.search{
-    padding: 12px 20px 12px;
-    width: 50%;
-    border-radius: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 15em;
-    display: block;
-    background-color: rgba(213,213,213,.72);
-    color: #878787;
-    font-size: 16px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
-}
-.search:focus{
-    color: black;
-    width: 90%;
-    background-color: rgba(213,213,213,1.0);
-}
-.dropbtn {
-  color: #000;
-  padding: 1.4em;
-  font-size: .8em;
-  cursor: pointer;
-  background: rgba(210,210,210,1);
-  text-transform: uppercase;
-  border: none;*/
-  display: block;
-  position: relative;
-  width: 100%;
-  text-align: left;
-}
-.dropbtn:hover, .dropbtn:focus {
-  background-color: #fff;
-}
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: rgba(210,210,210,1);
-  width: 100%;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-.dropdown-content a {
-  color: #000;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-.dropdown a:hover {background-color: #fff;}
-.show {display: block;}
-@media only screen and (min-width: 768px) and (min-height: 614px){
-    body{
-        display: grid;
-        grid-template-columns: 375px auto;
-        /*padding: 2em;*/
-    }
-    .menuimg{
-        display: none;
-    }
-    .MenuX{
-        display: none;
-    }
-    aside{
-        background:rgba(210,210,210,1);
-        grid-template-columns: auto;
-        padding: 0 !important;
-        border-radius: 5px 0px 0px 5px;
-        margin: 82px 0 62px 101px;
-    }
-    main{
-        padding: 4em;
-        background:rgba(255,255,255,1);
-        background-size: 70%;
-        border-radius: 0px 5px 5px 0px;
-        background-image: url('../images/SideFlarePurple.svg') !important;
-        background-repeat: no-repeat;
-        background-position: 100% 100%;
-        margin: 82px 101px 62px 0;
-    }
-    ul{
-        display: block;
-        margin-top: 2em;
-        position:  relative !important;
-        background: none !important;
-        background: #fff;
-        width: 100% !important;
-    }
-    ul li a{
-        padding: 1.4em;
-        font-size: .8em;
-        color:#000;
-    }
-    ul li a:hover{
-        background: #fff;
-    }
-    .search{
-        width: 50%;
-        margin: 0 auto;
-        display: block;
-        margin-bottom: 0;
-    }
-    div.logo{
-        margin-top: 12em;
-    }
-}
-@media only screen and (min-width: 1610px){
-    div.logo{
-        height:6.25em !important;
-        width: 37.8125em !important;
-        background-image: url('../images/LOGO_21x127.png') !important;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-        padding-bottom: 5px !important;
-        /*width: 38.66% !important;*/
-    }
-}
-@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
-    body{
-        display: flex !important;
-    }
-    main{
-        flex: 1;
-    }
-    ul li a{
-        font-size: 0.625em;
-        padding: 1em;
-    }
-}
-@media only screen and (max-height: 665px) and (min-height: 582px){
-    div.logo{
-        margin-top: 1em;
-    }
-}
-@media only screen and (max-height: 762px){
-    ul li a{
-        font-size: 7px;
-    }
-    p{
-        font-size: 10px;
-    }
-    body{
-        grid-template-columns: 16% auto;
-    }
-
-}
diff --git a/CSS/main.css b/CSS/main.css
index cbf5ec1..ade05fe 100755..100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -1,228 +1,55 @@
-
+/*
+ * Color scheme
+ * Oxford Blue: 061A40
+ * USAFA Blue: 0353A4
+ * Honolulu Blue: 006DAA
+ * Prussian Blue: 003559
+ * Azure X 11 Web Color: D6E5E3
+ */
+@font-face{
+	font-family:IBM Plex Mono;
+	src: url(../fonts/IBMPlexMono-Regular.ttf);
+}
 body, html{
-    height: calc(100% - 2em);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
+	height: calc(100% - 2em);
 }
 body{
-    background: #16FF5C; /* Old browsers */
-    background: -moz-linear-gradient(45deg, #16FF5C 0%, #076aff 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16FF5C', endColorstr='#076aff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-aside{
-    color: #fff;
-    display: grid;
-    grid-template-columns: 40px auto;
-    padding: 2em;
-}
-aside img{
-    cursor: pointer;
-}
-a{
-    color:#000;
-}
-.active {
-    position: absolute;
-    display: block;
-    background:rgba(210,210,210,1);
-    width: 50%;
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-.MenuX{
-    position: absolute;
-    display: block;
-    top: 0;
-    right: .5em;
-    padding: 1em;
-    color: #000;
-    cursor: pointer;
-}
-ul {
-    display: none;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-ul li a {
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: .6em;
-    display: block;
-    padding: .5em 3em;
-    color: #000;
-}
-div.logo{
-    width: 150px;
-    height: 150px;
-    background-image: url('../images/LOGO_Transparent.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    padding-bottom:5px;
-}
-main{
-    padding: 1em 1.4em;
-}
-.search{
-    padding: 12px 20px 12px;
-    width: 50%;
-    border-radius: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 15em;
-    display: block;
-    background-color: rgba(213,213,213,.72);
-    color: #878787;
-    font-size: 16px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
-}
-.search:focus{
-    color: black;
-    width: 90%;
-    background-color: rgba(213,213,213,1.0);
-}
-.dropbtn {
-  color: #000;
-  padding: 1.4em;
-  font-size: .8em;
-  cursor: pointer;
-  background: rgba(210,210,210,1);
-  border: none;
-  text-transform: uppercase;
-  display: block;
-  position: relative;
-  width: 100%;
-  text-align: left;
-}
-.dropbtn:hover, .dropbtn:focus {
-  background-color: #fff;
-  border: none;
-}
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: rgba(210,210,210,1);
-  width: 100%;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-.dropdown-content a {
-  color: #000;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-.dropdown a:hover {background-color: #fff;}
-.show {display: block;}
-@media only screen and (min-width: 768px) and (min-height: 614px){
-    body{
-        display: grid;
-        grid-template-columns: 375px auto;
-        /*padding: 2em;*/
-    }
-    .menuimg{
-        display: none;
-    }
-    .MenuX{
-        display: none;
-    }
-    aside{
-        background:rgba(210,210,210,1);
-        grid-template-columns: auto;
-        padding: 0 !important;
-        border-radius: 5px 0px 0px 5px;
-        margin: 82px 0 62px 101px;
-    }
-    main{
-        padding: 4em;
-        background:rgba(255,255,255,1);
-        background-size: 70%;
-        border-radius: 0px 5px 5px 0px;
-        background-image: url('../images/SideFlareGreen.svg') !important;
-        background-repeat: no-repeat;
-        background-position: 100% 100%;
-        margin: 82px 101px 62px 0;
-    }
-    ul{
-        display: block;
-        margin-top: 2em;
-        position:  relative !important;
-        background: none !important;
-        background: #fff;
-        width: 100% !important;
-    }
-    ul li a{
-        padding: 1.4em;
-        font-size: .8em;
-        color:#000;
-    }
-    ul li a:hover{
-        background: #fff;
-    }
-    .search{
-        width: 50%;
-        margin: 0 auto;
-        display: block;
-        margin-bottom: 0;
-    }
-    div.logo{
-        margin-top: 12em;
-    }
-}
-@media only screen and (min-width: 1610px){
-    div.logo{
-        height:6.25em !important;
-        width: 37.8125em !important;
-        background-image: url('../images/LOGO_21x127.png') !important;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-        padding-bottom: 5px !important;
-        /*width: 38.66% !important;*/
-    }
-}
-@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
-    body{
-        display: flex !important;
-    }
-    main{
-        flex: 1;
-    }
-    ul li a{
-        font-size: 0.625em;
-        padding: 1em;
-    }
-}
-@media only screen and (max-height: 665px) and (min-height: 582px){
-    div.logo{
-        margin-top: 1em;
-    }
-}
-@media only screen and (max-height: 762px){
-    ul li a{
-        font-size: 7px;
-    }
-    p{
-        font-size: 10px;
-    }
-    body{
-        grid-template-columns: 16% auto;
-    }
-
+	background-color:D6E5E2;
+	color:003559;
+	font-family:IBM Plex Mono;
+}
+ul{
+	text-transform:uppercase;
+	margin:0;
+	padding:0;
+	overflow:hidden;
+	background-color:003559;
+	list-style-type:none;
+}
+li{
+	float:left;
+}
+li a{
+	display:block;
+	color:D6E5E3;
+	text-align:center;
+	padding:14px 16px;
+	text-decoration:none;
+}
+li a:hover{
+	background-color:061A40;
+}
+.main{
+	margin:auto;
+}
+@media only screen and (min-width: 1440px){
+	.main{
+		margin:auto;
+		width:60%;
+	}
+}
+@media only screen and (min-height: 1440px){
+	li a{
+		font-size:24px
+	}
 }
diff --git a/CSS/old.css b/CSS/old.css
deleted file mode 100755
index dedd69c..0000000
--- a/CSS/old.css
+++ /dev/null
@@ -1,135 +0,0 @@
-/*CSS for Everything*/
-body{
-    background-color:#323232;
-    font-family:Arial;
-    color:white;
-}
-span{
-	color:white;
-	font-size:30px;
-	cursor:pointer;
-}
-.sidenav {
-    height: 100%;
-    width: 0;
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    background-color: #111;
-    overflow-x: hidden;
-    transition: 0.5s;
-    padding-top: 60px;
-}
-.sidenav a {
-    padding: 8px 8px 8px 32px;
-    text-decoration: none;
-    font-size: 15px;
-    color: #818181;
-    display: block;
-    transition: 0.3s;
-}
-.sidenav a:hover, .offcanvas a:focus{
-    color: #f1f1f1;
-}
-.sidenav .closebtn {
-    position: absolute;
-    top: 0;
-    right: 25px;
-    font-size: 25px;
-    margin-left: 50px;
-}
-/*CSS for Main Page*/
-img.logo{
-    height:100px;
-    width:605px;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    padding-bottom:5px;
-}
-div.main{
-    text-align:center; 
-    width:100%; 
-}
-/*Uncomment code below if using old search method*/
-/*.searchForm{
-    border-radius:5px;
-    background-color:#262626;
-    color:white;
-    border: none;
-    font-size: 16px;
-}
-.searchForm:hover{
-    background-color:#1a1a1a;
-}
-.searchButton{
-    color:white;
-    background-color:#262626;
-    border-radius:5px;
-    border-color:#404040;
-}
-.searchButton:hover{
-    background-color:#1a1a1a;
-}*/
-.search{
-    width:605px;
-    border-radius: 5px;
-    border-color:#404040;
-    background-color:#262626;
-    color:white;
-    font-size: 16px;
-    background-image:url('Images/LOGO_Transparent.png');
-    background-repeat: no-repeat;
-    padding: 12px 20px 12px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
-}
-.search:focus {
-    width: 90%;
-    border-color:#1a1a1a;
-}
-/*CSS fo Binary Page*/
-textarea.inputBinary{
-    resize: none;
-    border-radius: 5px;
-    background-color: #262626;
-    border-color: #404040;
-    color: white;
-    width: 90%;
-}
-textarea.inputBinary:focus{
-    background-color: #1a1a1a;
-}
-textarea.outputBinary{
-    resize: none;
-    border-radius: 5px;
-    background-color: #262626;
-    border-color: #404040;
-    color: white;
-    width: 90%;
-}
-textarea.outputBinary:focus{
-    background-color: #1a1a1a;
-}
-/*CSS for Morse Code page*/
-textarea.morse{
-    width: 70%; 
-    background-color: #262626;
-    color: white;
-    border-color: #404040;
-    border-radius: 5px;
-    resize: none;
-}
-textarea.morse:focus{
-    background-color: #1a1a1a;
-}
-input.morse{
-    background-color: #262626;
-    color: white;
-    border-color: #404040;
-    border-radius: 5px; 
-}
-input.morse:focus{
-    background-color: #1a1a1a;
-}
\ No newline at end of file