diff --git a/css/styles.css b/css/styles.css
deleted file mode 100644
index 676b43f..0000000
--- a/css/styles.css
+++ /dev/null
@@ -1,1060 +0,0 @@
-/* Basic resets */
-
-:root {
-    --themeRed:#B32B2D;
-    --themeRose:#FEEFE6;
-    --themePurple:#7C6174;
-    --themeGray: #707070
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-html, body {
-    min-height: 100vh;
-}
-
-body {
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
-    font-size: 130%;
-    line-height: 150%;
-    background-color: var(--themeRose);
-}
-
-/*
-Styles here
-*/
-
-/* ------- HOME page Styles */
-
-/* Menu */
-
-.nav-link {
-    color: var(--themeRed);
-    margin: 0 20px;
-}
-
-
-.nav-link:hover {
-    color: var(--themePurple);
-}
-
-.test:hover {
-    color: var(--themePurple);
-}
-
-.navbar-nav {
-    align-items: flex-end;
-}
-
-.mylogo {
-    height: 90px;
-}
-
-.navbar-dark .navbar-toggler-icon{
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28179, 43, 45, 1.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-} /* I used this tutorial to learn how to change the hamburger color: https://www.youtube.com/watch?v=45QSuJaHEss&ab_channel=ADesignerWhoCodes */
-
-.navbar-dark .navbar-toggler{
-    border: 2px solid var(--themeRed);
-    background-color: var(--themeRose);
-}
-
-/* Banner */
-
-.banner {
-    background-image: url(../images/banner.png);
-    height: 85vh;
-    background-size: cover;
-    margin-top: -170px;
-    width: 100%;
-}
-
-.bannermessage {
-    height: 85vh;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    justify-items: center;
-}
-
-.himessage {
-    width: 300px;
-    height: 300px;
-    margin-left: 20px;
-    margin-top: 50px;
-}
-
-/* My work */
-
-h2 {
-    color: var(--themeRed);
-    text-align: center;
-    font-family: 'Arima', cursive;
-    margin-top: 20px;
-}
-
-.work {
-    margin-bottom: 50px;
-}
-
-.workimg>img {
-    width: 90%;
-}
-
-
-.skills {
-    margin: 60px 0;
-}
-
-
-
-/* Images with overlay and text, I learned this at: https://www.w3schools.com/howto/howto_css_image_overlay.asp */
-
-.wrapper {
-    width: 80%;
-    margin: auto;
-    display: flex;
-    padding: 10px;
-}
-
-.imagebox {
-    position: relative;
-    width: 80%;
-    justify-content: space-between;
-    margin: 0 10px;
-  }
-  
-  .image {
-    display: block;
-    width: 100%;
-    height: 350px;
-  }
-  
-  .overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    transition: .5s ease;
-    background-color: var(--themeRed);
-  }
-  
-  .imagebox:hover .overlay {
-    opacity: 1;
-    transition: 1s;
-  }
-  
-  .text {
-    color: white;
-    font-size: 20px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    text-align: center;
-  }
-
-.centeralign {
-    text-align: center;
-}
-
-/* Contact */
-
-#contact {
-    padding:0 0 30px 0;
-}
-
-
-
-
-
-
-/* -------  ABOUT page styles */
-
-
-.containerfix {
-    align-items: flex-start;
-}
-
-.rowadjust {
-    padding: 0 170px;
-    margin-top: -150px;
-}
-
-.bioimg{
-    width: 400px;
-}
-
-.biotitle {
-    position: relative;
-    color: var(--themeRose);
-    transform: rotate(-90deg);
-    left: 600px;
-    top: -360px;
-    display: flex;
-}
-
-.textstyle {
-    color: var(--themeRose);
-    -webkit-text-stroke: 3px;
-    -webkit-text-stroke-color: var(--themeRed);
-    font-size: 150px;
-}
-
-
-.abouttext {
-    font-size: 16px;
-    text-align: left;
-}
-
-h3 {
-    text-align: left;
-}
-
-.redtext {
-    color: var(--themeRed);
-}
-
-.purpletext {
-    color: var(--themePurple);
-    font-size: 40px;
-}
-
-.mysocialmedia {
-    height: 50px;
-    margin: 0 20px;
-}
-
-.mysocialmedia:hover {
-    opacity: 0.6;
-    transition: 0.3s ease-in-out;
-}
-
-
-
-
-
-/* -------  DESIGN page styles */
-
-.designtitle {
-    text-align: end;
-    color: var(--themeRose);
-}
-
-.design {
-    height: 180vh;
-}
-
-h4 {
-    font-family: 'Arima', cursive;
-}
-
-.portfolionav {
-    width: 20%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    justify-items: center;
-    padding: 20px 0;
-}
-
-.back>a>img {
-    height: 60px;
-}
-
-.next>a>img {
-    height: 60px;
-}
-
-
-/* -------  PORTFOLIO individual pages styles */
-
-.portfolio {
-    width: 70%;
-}
-
-/* Css Grid */
-
-.grid4 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 20px 20px;
-    font-size: 30px;
-    text-align: center;
-  }
-
-  .grid5 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    padding: 20px 20px;
-    font-size: 30px;
-    text-align: center;
-  }
-
-  .grid6 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    padding: 20px 20px;
-    font-size: 30px;
-    text-align: center;
-  }
-
-  .grid7 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    padding: 20px 20px;
-    font-size: 30px;
-    text-align: center;
-  }
-
-  .grid-item{
-    padding: 10px;
-  }
-
-  .imagefull {
-    width: 100%;
-    height: 100%;
-}
-
-h5 {
-    font-size: 26px;
-    font-family: 'Arima', cursive;
-    color: var(--themePurple);
-}
-
-/* Portfolio 1 - Independent Project page styles */
-
-.anyora .box1 {
-    grid-area: 2/1/4/4;
-    padding: 5px;
-}
-
-.anyora .box2 {
-    grid-area: 2/4/4/6;
-    padding: 5px;
- }
-
-.anyora .box3 {
-    grid-area: 4/1/5/3;
-    padding: 5px;
-}
-
-.anyora .box4 {
-    grid-area: 5/1/6/3;
-    padding: 5px;
- }
-
-.anyora .box5 {
-    grid-area: 4/3/6/6;
-    padding: 5px;
-}
-
-.anyora .box6 {
-    grid-area: 6/1/7/4;
-    padding: 5px;
- }
-
-.anyora .box7 {
-    grid-area: 7/1/8/4;
-    padding: 5px;
-}
-
-.anyora .box8 {
-    grid-area: 6/4/7/5;
-    padding: 5px;
- }
-
-.anyora .box9 {
-    grid-area: 6/5/7/6;
-    padding: 5px;
-}
-
-.anyora .box10 {
-    grid-area: 7/4/8/5;
-    padding: 5px;
-}
-
-.anyora .box11 {
-    grid-area: 7/5/8/6;
-    padding: 5px;
-}
-
-.anyora .box12 {
-    grid-area: 8/1/9/2;
-    padding: 5px;
- }
-
-.anyora .box13 {
-    grid-area: 8/2/9/3;
-    padding: 5px;
-}
-
-.anyora .box14 {
-    grid-area: 9/1/11/3;
-    padding: 5px;
-}
-
-.anyora .box15 {
-    grid-area: 8/3/11/6;
-    padding: 5px;
-}
-.anyora .box16 {
-    grid-area: 11/1/13/4;
-    padding: 5px;
-}
-
-.anyora .box17 {
-    grid-area: 11/4/13/6;
-    padding: 5px;
-}
-
-.anyora .box18 {
-    grid-area: 13/1/15/3;
-    padding: 5px;
-}
-
-.anyora .box19 {
-    grid-area: 13/3/15/5;
-    padding: 5px;
-}
-
-.anyora .box20 {
-    grid-area: 13/5/14/6;
-    padding: 5px;
-}
-
-.anyora .box21 {
-    grid-area: 14/5/15/6;
-    padding: 5px;
-}
-
-.anyora .box22 {
-    grid-area: 15/1/16/2;
-    padding: 5px;
-}
-
-.anyora .box23 {
-    grid-area: 16/1/17/2;
-    padding: 5px;
-}
-
-.anyora .box24 {
-    grid-area: 15/2/17/4;
-    padding: 5px;
-}
-
-.anyora .box25 {
-    grid-area: 15/4/17/6;
-    padding: 5px;
-}
-
-.anyora .box26 {
-    grid-area: 17/1/18/6;
-    padding: 5px;
-}
-
-/* Portfolio 2 - Be a Hero page styles */
-
-
-.hero .box1 {
-    grid-area: 1/1/3/3;
-    padding: 10px;
-}
-
-.hero .box2 {
-    grid-area:1/4/2/3;
-    padding: 10px;
-}
-
-.hero .box3 {
-    grid-area:2/4/3/3;
-    padding: 10px;
-}
-
-.hero .box4 {
-    grid-area:3/1/7/4;
-    padding: 10px;
-}
-
-.hero .box5 {
-    grid-column: 1/2;
-    grid-row: 7/9;
-    padding: 10px;
-}
-
-.hero .box6 {
-    grid-column: 2/3;
-    grid-row: 7/9;
-    padding: 10px;
-}
-
-.hero .box7 {
-    grid-column: 3/4;
-    grid-row: 7/9;
-    padding: 10px;
-}
-
-.hero .box8 {
-    grid-column: 1/4;
-    grid-row: 9/11;
-    padding: 20px;
-    font-size: 16px;
-    text-align: left;
-}
-
-.hero .box9 {
-    grid-column: 1/4;
-    grid-row: 11/13;
-    padding: 10px;
-}
-
-.hero .box10 {
-    grid-column: 1/4;
-    grid-row: 13/16;
-    padding: 10px;
-}
-
-/* Portfolio 3 - Whale Branding page styles */
-
-.whale .box1 {
-    grid-area: 1/1/3/3;
-    padding: 10px;
-}
-
-.whale .box2 {
-    grid-area: 1/3/3/4;
-    padding: 10px;
-}
-
-.whale .box3 {
-    grid-area: 3/1/5/4;
-    padding: 10px;
-}
-
-.whale .box4 {
-    grid-area: 5/1/7/4;
-    padding: 10px;
-}
-
-.whale .box5 {
-    grid-area: 7/1/9/2;
-    padding: 10px;
-}
-
-.whale .box6 {
-    grid-area: 7/2/9/3;
-    padding: 10px;
-}
-
-.whale .box7 {
-    grid-area: 7/3/9/4;
-    padding: 10px;
-}
-
-.whale .box8 {
-    grid-area: 9/1/10/4;
-    padding: 10px;
-}
-
-.whale .box9 {
-    grid-area: 10/1/12/3;
-    padding: 10px;
-}
-
-/* Portfolio 4 - Fitness page styles */
-
-.fitness .box1 {
-    grid-area: 1/1/3/4;
-    padding: 10px;
-}
-
-.fitness .box2 {
-    grid-area: 3/1/5/4;
-    padding: 10px;
-}
-
-.fitness .box3 {
-    grid-area: 5/1/8/4;
-    padding: 10px;
-}
-
-.fitness .box4 {
-    grid-area: 8/1/11/4;
-    padding: 10px;
-}
-
-.fitness .box5 {
-    grid-area: 11/1/12/2;
-    padding: 10px;
-}
-
-.fitness .box6 {
-    grid-area: 11/2/12/4;
-    padding: 10px;
-}
-
-.fitness .box7 {
-    grid-area: 12/1/13/2;
-    padding: 10px;
-}
-
-.fitness .box8 {
-    grid-area: 12/2/13/4;
-    padding: 10px;
-}
-
-/* Portfolio 4 - Cosmos page styles */
-
-.cosmos .box1 {
-    grid-area: 1/1/3/4;
-    padding: 10px;
-}
-
-.cosmos .box2 {
-    grid-area: 3/1/5/4;
-    padding: 10px;
-}
-
-.cosmos .box3 {
-    grid-area: 5/1/9/3;
-    padding: 10px;
-}
-
-.cosmos .box4 {
-    grid-area: 5/3/9/4;
-    padding: 10px;
-}
-
-.cosmos .box5 {
-    grid-area: 9/1/11/4;
-    padding: 10px;
-}
-
-
-/* Portfolio 5 - Tea Packaging page styles */
-
-.tea .box1 {
-    grid-area: 1/1/2/2;
-    padding: 10px;
-}
-
-.tea .box2 {
-    grid-area: 1/2/2/3;
-    padding: 10px;
-}
-
-.tea .box3 {
-    grid-area: 1/3/2/4;
-    padding: 10px;
-}
-
-.tea .box4 {
-    grid-area: 2/1/4/3;
-    padding: 10px;
-}
-
-.tea .box5 {
-    grid-area: 2/3/3/4;
-    padding: 10px;
-}
-
-.tea .box6 {
-    grid-area: 3/3/4/4;
-    padding: 10px;
-}
-
-.tea .box7 {
-    grid-area: 4/1/6/4;
-    padding: 10px;
-}
-
-.tea .box8 {
-    grid-area: 6/1/7/2;
-    padding: 10px;
-}
-
-.tea .box9 {
-    grid-area: 6/2/7/3;
-    padding: 10px;
-}
-
-.tea .box10 {
-    grid-area: 6/3/7/4;
-    padding: 10px;
-}
-
-
-/* Portfolio 6 - Album Release page styles */
-
-.album .box1 {
-    grid-area: 1/1/2/3;
-    padding: 10px;
-}
-
-.album .box2 {
-    grid-area: 1/3/2/5;
-    padding: 10px;
-}
-
-.album .box3 {
-    grid-area: 2/1/3/3;
-    padding: 10px;
-}
-
-.album .box4 {
-    grid-area: 2/3/3/5;
-    padding: 10px;
-}
-
-.album .box5 {
-    grid-area: 3/1/7/5;
-    padding: 10px;
-}
-
-.album .box6 {
-    grid-area: 7/1/11/5;
-    padding: 10px;
-}
-
-.album .box7 {
-    grid-area: 11/1/13/3;
-    padding: 10px;
-}
-
-.album .box8 {
-    grid-area: 11/3/13/5;
-    padding: 10px;
-}
-
-.album .box9 {
-    grid-area: 13/1/15/3;
-    padding: 10px;
-}
-
-.album .box10 {
-    grid-area: 13/3/15/5;
-    padding: 10px;
-}
-
-.album .box11 {
-    grid-area: 15/1/18/5;
-    padding: 10px;
-}
-
-.album .box12 {
-    grid-area: 18/1/20/3;
-    padding: 10px;
-}
-
-.album .box13 {
-    grid-area: 18/3/20/5;
-    padding: 10px;
-}
-
-.album .box14 {
-    grid-area: 20/1/22/3;
-    padding: 10px;
-}
-
-.album .box15 {
-    grid-area: 20/3/22/5;
-    padding: 10px;
-}
-
-.album .box16 {
-    grid-area: 22/1/26/5;
-    padding: 10px;
-}
-
-.album .box17 {
-    grid-area: 26/1/30/5;
-    padding: 10px;
-}
-
-
-/* ------- ILLUSTRATION page styles */
-
-.illustrationtitle {
-    text-align: start;
-    color: var(--themeRose);
-}
-
-.gallery {
-	display: flex;
-	flex-wrap: wrap;
-    width: 100%;
-    margin: auto;
-}
-
-
-.gallery-item {
-    margin: 5px;
-	overflow: hidden;
-    width: 100%;
-}
-
-.row3 {
-    margin: 5px;
-	overflow: hidden;
-    width: 100%;
-}
-
-.gallery-image {
-	display: block;
-	width: 100%;
-}
-
-.gallery-image:hover {
-	transform: scale(1.15);
-    transition: 1s ease-in-out;
-}
-
-.illustration .box1 {
-    grid-area: 1/1/4/3;
-    padding: 5px;
-}
-
-.illustration .box2 {
-    grid-area: 1/3/4/5;
-    padding: 5px;
-}
-
-.illustration .box3 {
-    grid-area: 1/5/4/7;
-    padding: 5px;
-}
-
-.illustration .box4 {
-    grid-area: 4/1/6/3;
-    padding: 5px;
-}
-
-.illustration .box5 {
-    grid-area: 4/3/6/5;
-    padding: 5px;
-}
-
-.illustration .box6 {
-    grid-area: 4/5/6/7;
-    padding: 5px;
-}
-
-.illustration .box7{
-    grid-area: 6/1/8/4;
-    padding: 5px;
-}
-
-.illustration .box8{
-    grid-area: 6/4/8/7;
-    padding: 5px;
-}
-
-.illustration .box9{
-    grid-area: 7/1/8/3;
-    padding: 5px;
-}
-
-.illustration .box10{
-    grid-area: 7/3/8/4;
-    padding: 5px;
-}
-
-.illustration .box11{
-    grid-area: 7/4/8/7;
-    padding: 5px;
-}
-
-
-
-/* Footer */
-
-footer {
-    background-color: var(--themePurple);
-    height: 15vh;
-    display: flex;
-    justify-content: space-between;
-    padding: 30px;
-}
-
-
-footer>div>a>img:hover {
-    opacity: 0.5;
-}
-
-footer>p {
-    text-decoration: none;
-    color: var(--themeRose);
-    font-family: 'Arima', cursive;
-    font-size: 20px;
-    margin-left: -230px;
-    padding-top: 10px;
-}
-
-
-
-/* Media Queries */
-
-
-@media screen and (max-width: 1400px) {
-    /* content */
-
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .design {
-        height: 600vh;
-    }
-
-    .imagebox{
-        width: 100%;
-        padding: 5px;
-    }
-
-    .grid7 {
-        display: block;
-        width: 100%;
-    }
-
-    .grid6 {
-        display: block;
-        width: 100%;
-    }
-
-    .grid5 {
-        display: block;
-        width: 100%;
-    }
-
-    .grid4 {
-        display: block;
-        width: 100%;
-    }
-
-}
-
-
-@media screen and (max-width: 1250px) {
-    /* content */
-    .biotitle {
-        position: relative;
-        color: var(--themeRose);
-        transform: none;
-        left: 30px;
-        top: 5px;
-        height: 200px;
-    }
-    .about {
-        height: 100%;
-    }
-
-    .rowadjust {
-        padding: 0 0px;
-        margin-top: 0px;
-    }
-
-    .design {
-        height: 550vh;
-    }
-}
-
-
-
-@media screen and (max-width: 850px) {
-    /* content */
-
-    .navbar{
-        color: var(--themeRed);
-    }
-
-    .container {
-        width: 90%;
-    }
-
-    .banner {
-        background-image: url(../images/bannersm.png);
-        height: 85vh;
-        background-size: cover;
-        margin-top: -170px;
-        width: 100%;
-    }
-
-    .himessage {
-        width: 300px;
-        height: 300px;
-        margin-left: 20px;
-        margin-top: 100px;
-    }
-
-    .textstyle {
-        -webkit-text-stroke: 3px;
-        -webkit-text-stroke-color: var(--themeRed);
-        font-size: 130px;
-        text-align: center;
-    }
-
-    .textstyle2{
-        font-size: 90px;
-        -webkit-text-stroke: 2px;
-        -webkit-text-stroke-color: var(--themeRed);
-    }
-
-    .design {
-        height: 250vh;
-    }
-
-    .gallery {
-        display: flex;
-        flex-wrap:nowrap;
-        width: 100%;
-        margin: auto;
-        flex-direction: column;
-    }
-
-    .gallery-item {
-        width: 100%;
-    }
-
-    .workimg>img {
-        width: 50%;
-        padding: 10px;
-    }
-    
-    .row {
-        display: block;
-        margin: auto;
-        flex-direction: column;
-    }
-
-    footer {
-        display: block;
-        height: 220px;
-        text-align: center;
-        margin: auto;
-    }
-
-    footer>p {
-        text-decoration: none;
-        color: var(--themeRose);
-        font-family: 'Arima', cursive;
-        font-size: 20px;
-        margin-left: 0;
-        padding-top: 20px;
-    }
-}
-