Updated file management

src/App.css

@@ -0,0 +1,179 @@
+html, body{
+  background-color: #1b1f27;
+  overflow-x: hidden;
+}
+body{
+  margin: 0;
+  background-image: url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')
+}
+h1, h2, p{
+  font-family: "Roboto Condensed",sans-serif;
+}
+h1, h2{
+  color: #ecebeb;
+}
+h2{
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+h3{
+  color: #a8a8a8;
+}
+p{
+  color: #ffffff;
+  font-size: 1rem;
+}
+a { 
+  color: #a0a0a0a0;
+  text-decoration: none;
+}
+.header h1{
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-top: .5rem;
+  font-size: 2.5rem;
+}
+.header{
+  margin-bottom: 0px;
+  margin-left: .3rem;
+  padding-bottom: .2rem;
+  background-color: #0f1216;
+  width: 100%;
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.navBar li{
+  display: inline;
+  background-color: rgb(156,49,45,.5);
+  border-top: .2rem black solid;
+  border-bottom: .2rem black solid;
+  border-right: .2rem black solid;
+  font-size: 1.2rem;
+}
+.navBar li:hover{
+  background-color: rgb(156,49,45,.8);
+}
+.navBar li:first-child{
+  border-left: .2rem black solid;
+}
+.navBar li a{
+  color: white;
+  padding-left: 2rem;;
+  padding-right: 2rem;
+  line-height: 1.2vmax;
+}
+.navBar{
+  margin-top: 1rem;
+  margin-bottom: 0px;
+  padding-left: 0px;
+}
+.foreground{
+  padding-top:5.5rem;
+  padding-left: .5rem;
+  width:100%;
+  background-color: rgb(44,44,44,.5);
+  padding-bottom: 1rem;
+  overflow: hidden;
+}
+.foreground p{
+  max-width: 40rem;
+}
+.sideimg{
+  float: right;
+  display: block;
+  margin-right: 10rem;
+  max-width: 20rem;
+  max-height: 20rem;
+}
+.projectList{
+  padding: 0;
+  display: block;
+  margin-left:auto;
+  margin-right:auto;
+  width: 75rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  border: solid rgba(156,49,45, .8) .3rem;
+  text-align: center;
+}
+.project{
+  display: inline-block;
+  text-align: left;
+  margin: 1rem;
+  width: 20rem;
+  height: 15rem;
+  border: .3rem rgba(156,49,45, .8) solid;
+  background-color: rgba(22,22,22,.8);
+}
+.tab{
+  display: inline;
+  float: right;
+}
+.project h3{
+  display: inline-block;
+  border-bottom: black solid .2rem;
+}
+.body{
+  color:rgb(212, 212, 212);
+}
+.project img{
+  margin-top: auto;
+  height:3rem;
+}
+.topBox{
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 65%;
+}
+.bottomBox{
+  height: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.bottomBox a{
+  vertical-align: middle;
+}
+.project a img, .project a p{
+  padding: .5rem;
+  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%);
+}
+.project a img:hover, .project a p:hover{
+  filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%);
+}
+.incomplete{
+  color:red;
+}
+.WIP{
+  color:yellow;
+}
+.complete{
+  color:green;
+}
+.footer{
+  display: block;
+  background-color: rgb(156,49,45);
+}
+.socials{
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  margin-right: auto;
+  table-layout: fixed;
+}
+.socials img{
+  height: 2rem;
+  margin-right: 2rem;
+}
+
+@media screen and (max-width: 1200px){
+  .socials{
+    margin-left: auto;
+  }
+  .projectList{
+    width: 95%;
+  }
+}