diff --git a/src/components/Home.js b/src/components/Home.js
index 810a004..686c7ae 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Route, Link } from 'react-router-dom';
 import {Donate} from './Snippets';
+import "../scss/with_love.scss";
 
 export default function Home() {
   return (
     <div>
-      <link rel="stylesheet" href="/src/css/with_love.css" />
       <br />
       <div className="with-love">
         <div>Welcome to the <a href="https://github.com/chaoticbackup" className="name" target="_blank">Chaotic Backup Project</a>.
diff --git a/src/components/entercode/PackSimulator.js b/src/components/entercode/PackSimulator.js
index 4933099..8a294bc 100644
--- a/src/components/entercode/PackSimulator.js
+++ b/src/components/entercode/PackSimulator.js
@@ -47,8 +47,7 @@ export default class PackSimulator extends React.Component {
       if (i>9) break;
     }
 
-    return (<div>
-      <link rel="stylesheet" href="/src/css/packs.css" />
+    return (<div className="packsim">
       <Interactive as={Link} {...s.link}
        to={`/EnterTheCode/`}>Enter The Code</Interactive>
       <br /><br />
diff --git a/src/scss/packs.scss b/src/scss/packs.scss
index e8404b9..6182630 100644
--- a/src/scss/packs.scss
+++ b/src/scss/packs.scss
@@ -4,6 +4,13 @@
 }
 } /* Desktop */
 
+.packsim {
+    input[type=number]::-webkit-inner-spin-button,
+    input[type=number]::-webkit-outer-spin-button {
+       opacity: 1;
+    }
+}
+
 .pack {
     height: 100%;
     display: flex;
@@ -11,92 +18,88 @@
     flex-wrap: wrap;
     justify-content: center;
     margin: auto;
-}
 
-.card {
-    width: 150px;
-    height: 210px;
-    background-size: cover;
-    box-sizing: content-box;
-    margin: 5px;
-    -webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
-    -webkit-border-radius: 5px;
-    -o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-    -o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-    -moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-    -moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-    transition-property: width,height,transform,background,font-size,opacity,top,left;
-    transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-}
+    .card {
+        width: 150px;
+        height: 210px;
+        background-size: cover;
+        box-sizing: content-box;
+        margin: 5px;
+        -webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
+        -webkit-border-radius: 5px;
+        -o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
+        -o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+        -moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
+        -moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+        transition-property: width,height,transform,background,font-size,opacity,top,left;
+        transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+    }
 
-.card:hover {
-    width: 250px;
-    height: 350px;
-}
+    .card:hover {
+        width: 250px;
+        height: 350px;
+    }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-   opacity: 1;
-}
+    .stats {
+        height: 100%;
+        width: 100%;
+        text-align: left;
+    }
 
-.stats {
-    height: 100%;
-    width: 100%;
-    text-align: left;
-}
+    .stats span {
+        position: relative;
+        color: black;
+        display: block;
+        left: 10px;
+        font-size: 12px;
+    }
 
-.stats span {
-    position: relative;
-    color: black;
-    display: block;
-    left: 10px;
-    font-size: 12px;
-}
+    .stats span:nth-of-type(1) {
+        top: 130px;
+    }
+    .stats span:nth-of-type(2) {
+        top: 128px;
+    }
+    .stats span:nth-of-type(3) {
+        top: 126px;
+    }
+    .stats span:nth-of-type(4) {
+        top: 124px;
+    }
 
-.stats span:nth-of-type(1) {
-    top: 130px;
-}
-.stats span:nth-of-type(2) {
-    top: 128px;
-}
-.stats span:nth-of-type(3) {
-    top: 126px;
-}
-.stats span:nth-of-type(4) {
-    top: 124px;
-}
+    /* Energy */
+    .stats span:nth-of-type(5) {
+        text-align: right;
+        top: 125px;
+        left: -11px;
+        font-size: 14px;
+    }
 
-/* Energy */
-.stats span:nth-of-type(5) {
-    text-align: right;
-    top: 125px;
-    left: -11px;
-    font-size: 14px;
-}
+    .card:hover .stats span {
+        left: 20px;
+        font-size: 14px;
+        font-weight: bold;
+    }
 
-.card:hover .stats span {
-    left: 20px;
-    font-size: 14px;
-    font-weight: bold;
-}
+    .card:hover .stats span:nth-of-type(1) {
+        top: 220px;
+    }
+    .card:hover .stats span:nth-of-type(2) {
+        top: 229px;
+    }
+    .card:hover .stats span:nth-of-type(3) {
+        top: 237px;
+    }
+    .card:hover .stats span:nth-of-type(4) {
+        top: 245px;
+    }
 
-.card:hover .stats span:nth-of-type(1) {
-    top: 220px;
-}
-.card:hover .stats span:nth-of-type(2) {
-    top: 229px;
-}
-.card:hover .stats span:nth-of-type(3) {
-    top: 237px;
-}
-.card:hover .stats span:nth-of-type(4) {
-    top: 245px;
-}
+    /* Energy */
+    .card:hover .stats span:nth-of-type(5) {
+        text-align: right;
+        top: 258px;
+        left: -21px;
+        font-size: 20px;
+    }
 
-/* Energy */
-.card:hover .stats span:nth-of-type(5) {
-    text-align: right;
-    top: 258px;
-    left: -21px;
-    font-size: 20px;
 }
diff --git a/src/scss/portal.scss b/src/scss/portal.scss
index e55049a..a2adab5 100644
--- a/src/scss/portal.scss
+++ b/src/scss/portal.scss
@@ -109,7 +109,3 @@
     font-size: 16px;
     line-height: 20px;
 }
-
-.collection > .left {
-    position: fixed;
-}
diff --git a/src/css/with_love.css b/src/scss/with_love.scss
similarity index 100%
rename from src/css/with_love.css
rename to src/scss/with_love.scss