updrade with rector

assets/styles/app.scss

@@ -15,6 +15,14 @@
 }
 
 
+html, body{
+  margin: 0;
+  padding: 0;
+  background: black;
+  background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%);
+}
+
+
 // customize some Bootstrap variables
 
 
@@ -25,15 +33,39 @@ $border-primary: #FF8040;
 $dropdown-dark-bg: black;
 $dropdown-dark-link-color: $primary;
 $dropdown-dark-border-color: $primary;
+$jet-black: #0e0e10;
+$mango: #FF8040;
+
 
 // the ~ allows you to reference things in node_modules
-@import "~bootstrap/scss/bootstrap";
+
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 
-a:link { text-decoration: none; }
-a:visited { text-decoration: none; }
-a:hover { text-decoration: none; }
-a:active { text-decoration: none; }
+.wrapper {
+  clear: both;
+  position: sticky;
+  top: 0;
+}
+
+
+a:link {
+  text-decoration: none;
+  color: $mango;
+}
+a:visited {
+  text-decoration: none;
+  color: $mango;
+}
+a:hover {
+  text-decoration: none;
+  color: $mango;
+}
+a:active {
+  text-decoration: none;
+  color: $mango;
+}
 
 
 body {
@@ -72,6 +104,13 @@ body {
   }
 }
 
+.navbar {
+  opacity: 0.9;
+}
+
+footer {
+  opacity: 0.9;
+}
 
 .navbar-top {
   border-bottom-width: 1px;
@@ -97,20 +136,10 @@ body {
 }
 
 
-@include media-breakpoint-down(sm) {
-  .dropdown-toggle:after {
-    content: none;
-  }
-  #dropdown-menu {
-    display: block;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .navbar {
-    padding-left: 100px;
-    padding-right: 100px;
-  }
+.display-wrapper {
+  text-align: left;
+  width: 90%;
+  margin: 0 auto 150px;
 }
 
 
@@ -118,16 +147,20 @@ body {
   margin-top: 25px;
 }
 
+.main-content {
+}
+
+
 .box {
   border-width: 1px;
   border-style: solid;
   border-color: $primary;
   border-radius: 10px;
-  padding: 15px;
-  background-image: url('../images/bg.jpeg');
-  background-position: center;
+  color: lightgray;
+  background: black;
   align-content: center;
-  margin-bottom: 200px;
+  margin: 15px 15px 20px;
+  height: auto;
 }
 
 /* BlogPosts */
@@ -183,6 +216,16 @@ body {
 }
 
 
+.circle {
+    position:fixed;
+    width:500px;
+    height:600px;
+    margin:-300px auto auto -250px;
+    top:50%;
+    left:50%;
+    text-align:center;
+}
+
 .teaser-image {
   object-fit: contain;
   width: 800px;
@@ -190,6 +233,11 @@ body {
   margin: 7px;
 }
 
+.project-container {
+  border-radius: 5px;
+}
+
+
 .blog-img {
   height: 100px;
   width: 100px;