From 0b8966a8894edc15eb8a24e46121dccf03b57d51 Mon Sep 17 00:00:00 2001
From: Xsivax <alexandra.hosp@protonmail.com>
Date: Thu, 23 Sep 2021 12:05:51 +0200
Subject: [PATCH] sept23

---
 Cargo.toml                          |    1 -
 src/build_rocket/get.rs             |    8 +-
 src/build_rocket/templates.rs       |   20 +-
 src/main.rs                         |    2 +-
 templates/assets/css/home.css       |  107 -
 templates/assets/css/index.css      | 3025 +--------------------------
 templates/assets/css/navigation.css |    8 +-
 templates/assets/js/main.js         |   24 +-
 templates/home.html.tera            |   20 -
 templates/index_de.html.tera        |   21 +
 10 files changed, 134 insertions(+), 3102 deletions(-)
 delete mode 100644 templates/assets/css/home.css
 delete mode 100644 templates/home.html.tera
 create mode 100644 templates/index_de.html.tera

diff --git a/Cargo.toml b/Cargo.toml
index 3795e23..6941f9e 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,7 +13,6 @@ default-features = false
 serde = "1.0.130"
 serde_json = "1.0.67"
 lazy_static = "1.4.0"
-askama_rocket = "0.10.0"
 
 [dependencies.rocket_dyn_templates]
 version = "0.1.0-rc.1"
diff --git a/src/build_rocket/get.rs b/src/build_rocket/get.rs
index 434b18d..a1e4338 100644
--- a/src/build_rocket/get.rs
+++ b/src/build_rocket/get.rs
@@ -12,11 +12,11 @@ use rocket_dyn_templates::Template;
 // generate routes, set attributes
     // set http method
     // set uri
-    #[get("/")]
+    #[get("/de")]
     // if success call handler
-    pub fn index() -> Template {
-        let context = templates::TplIndex::new();
-        Template::render("home", &context)
+    pub fn index_de() -> Template {
+        let context = templates::TplIndexDe::new();
+        Template::render("index_de", &context)
 }
     
     // serve other pages (html GET)
diff --git a/src/build_rocket/templates.rs b/src/build_rocket/templates.rs
index 99ddf9a..471d04b 100644
--- a/src/build_rocket/templates.rs
+++ b/src/build_rocket/templates.rs
@@ -1,17 +1,27 @@
 use rocket::serde::Serialize;
 
-// context Template index
+use serde_json::Value;
+use serde_json::json;
+
+
+// context Template index 
 #[derive(Serialize)]
-pub struct TplIndex {
+pub struct TplIndexDe {
     pub title: String,
+    pub hemp: Value,
 }
 
-impl TplIndex {
-    pub fn new() -> TplIndex {
-        TplIndex { 
+// (prototype languages)
+impl TplIndexDe {
+    pub fn new() -> TplIndexDe {
+        // transform to JSON value array/object
+        TplIndexDe { 
             title: String::from("Cannabinieri CBD"),
+            // how to include several objects ?
+            hemp : json!({"de" : "Uns interessieren Informationen. "}),
         }
     }
+
 }
 
 // context privacy-policy
diff --git a/src/main.rs b/src/main.rs
index e382566..12ddf50 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -26,7 +26,7 @@ async fn main() -> Result<(), rocket::Error> {
             // catch errors
         .mount("/",
             routes![ 
-                get::index, get_static_files::fileserver, 
+                get::index_de, get_static_files::fileserver, 
                 get::hemp, get::spider, get::permapp, get::cyber, get::offgrid, get::about, get::meet, get::privacy ])
         .mount("/hemp",
             routes! [ get::oil, get::flower])
diff --git a/templates/assets/css/home.css b/templates/assets/css/home.css
deleted file mode 100644
index 6151ec5..0000000
--- a/templates/assets/css/home.css
+++ /dev/null
@@ -1,107 +0,0 @@
-@font-face {
-    font-family: 'Lato', sans-serif;
-        src: url('fonts/Lato-Thin.ttf') format('truetype');
-        font-style: normal; 
-        font-weight: 100;
-}
-
-.content {
-    height: 120vh !important;
-    width: 100vw;
-}
-
-.content .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(8, 1fr);
-    margin-top: .2rem;
-    font-family: 'Lato', sans-serif;;
-}
-
-.container img {
-    height: 100%;
-    z-index: 0;
-    max-width: 100vw;
-    grid-column: 1/3;
-    grid-row: 1/9;
-    justify-self: center;
-}
-
-.link button {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    border: .1rem solid hsl(300, 100%, 50%);
-    background-color: hsl(300, 100%, 50%);
-    transition: all .5s ease-in-out;
-}
-
-#hemp button:active {
-    box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
-}
-
-.link button a {
-    color: #fff;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 1.25rem;
-    transition: all .4s ease-in-out;
-}
-
-.link button a:active {
-    color: #999;
-}
-
-.link h6 {
-    text-transform: uppercase;
-    font-size: .85rem;
-    letter-spacing: .25rem;
-}
-
-.link p {
-    font-size: .65rem;
-    text-align: center;
-    background-color: #333;
-    color: #eee;
-    line-height: 2.25vh;
-}
-
-#hemp {
-    grid-column: 1/3;
-    grid-row: 1;
-    z-index: 2;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(3, 1fr)
-}
-
-#hemp button {
-    grid-column: 2;
-    grid-row: 2;
-    justify-self: start;
-    align-self: end;
-    margin-left: 2.4rem;
-    margin-bottom: .2rem;
-}
-
-
-#hemp h6 {
-    grid-column: 1;
-    grid-row: 1;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-}
-
-#hemp p {
-    grid-column: 1;
-    grid-row: 2;
-}
-
-@media (min-width: 768px) {
-    .content {
-        height: 250vh !important;
-        margin-top: 5rem;
-    }
-    
-}
\ No newline at end of file
diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css
index 28504a5..ff5fff8 100644
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -1,2961 +1,102 @@
-    @font-face {
-        font-family: 'Lato', sans-serif;
+@font-face {
+    font-family: 'Lato', sans-serif;
         src: url('fonts/Lato-Thin.ttf') format('truetype');
-        font-style: normal;
+        font-style: normal; 
         font-weight: 100;
-    }
-
-    @font-face {
-        font-family: 'IBM Plex Sans', sans-serif;
-        src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype');
-        font-style: normal;
-    }
-    
-    *{
-    	margin:0;
-        padding:0;
-        box-sizing:border-box;
-    } 
-
-    :root {
-        --top_padding:5px;
- 
-        --gradient1: linear-gradient(
-            45deg,
-            hsl(160, 51%, 49%), 
-            hsl(160, 51%, 59%), 
-            hsl(160, 51%, 79%),
-            hsl(160, 51%, 89%),
-            #fff
-        );
-
-        --gradient2: radial-gradient(
-            #000, 
-            #333, 
-            #999,
-            #eee,
-            #fff
-        );
-
-        --gradient3: radial-gradient(
-            hsl(160, 51%, 79%),
-            #fff,
-            #eee
-        );
-    };
-
-    html,
-    body {
-    	width: 100%;
-        height: 100%;
-    }
-
-    /* Adjust Media Queries ! */
-
-    @media (min-width: 1024px){
-
-    .wrapper {
-        display:grid;
-        height:100vh;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        grid-template-rows: 10% 22% auto 40%;
-        grid-template-areas: 
-        "top-bar top-bar top-bar top-bar"
-        "main-bar main-bar main-bar main-bar"
-        "main main main main"
-        "footer footer footer footer";
-        font-family: 'Lato', sans-serif;
-        font-weight: 100;
-        -webkit-font-smoothing: antialiased;
-        overflow-x: hidden;
-    }
-
-    .top-bar {
-        background-color:white;
-        grid-area: top-bar;
-        display: flex;
-        align-items: center;   
-    }
-
-    .languages a:hover {
-        color:  rgb(62, 190, 147);
-    }
-
-    #main-bar {
-        background-color: black;
-        grid-area: main-bar;
-        z-index:1;
-        display: flex;
-        align-items: center;
-        border-top: 1px solid rgb(62, 190, 147); 
-        border-bottom: 3px solid rgb(62, 190, 147);
-        box-sizing: border-box;
-        min-width: 100vw;
-        height: 80%;
-        font-weight:100 !important;
-    }
-
-    #logo-container {
-        margin-top: 6em;
-    }
-
-    .logo {
-        z-index:3;
-        width: 20vh;
-        margin-left: 5vh;
-    }
-
-    .main-navigation-bar {
-        z-index: 2;
-        display:flex;
-        align-items:center;
-        position: relative;
-        margin-left:5%;
-    }
-
-    .main-navigation-bar ul {
-        list-style:none;
-        position:relative;
-        align-items:center;
-        padding-top: 2%;
-    }
-
-
-    .main-navigation-bar ul li {
-        position:relative;
-        width:100%;
-        text-align: left;
-        padding-right: 4%;
-    }
-
-    .main-navigation-bar ul li a:hover {
-    	color:  rgb(0, 255, 170);
-    } 
-
-    .main-navigation-bar ul li a {
-        color:white;
-        text-decoration: none;
-        justify-content: space-between;
-        padding: 10px 1.5em;
-        line-height: 50px;
-    }
-
-    .main-navigation-bar ul li  #edit {
-        text-decoration: none;
-        justify-content: space-between;
-        padding: 10px 1em;
-        line-height: 50px;
-    }
-
-    .main-navigation-bar ul #learn {
-        width:10em;
-    }
-    
-
-    .main-navigation-bar ul ul {
-        border-top: 3px solid rgb(62, 190, 147); 
-        position: absolute;
-        top: 90%;
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    .main-navigation-bar ul li li {
-        position: relative;
-        float:left;
-        display: list-item; 
-    }
-
-    .main-navigation-bar ul li:hover > ul {
-    	opacity: 1;
-    	visibility: visible;
-    }
-
-    main{
-        grid-area: main;
-    }
-
-/*Footer*/
-
-    footer {
-        grid-area:footer;
-    }
-
-    #footer-wrapper  {
-        color: white;
-        border-top: solid 3px  rgb(62, 190, 147);
-        border-bottom: solid 1px rgb(62, 190, 147);
-        background-color: black;
-        height:100%;
-        display: grid;
-        grid-template-columns: 1fr 0.8fr 1fr 1fr;
-        grid-template-rows: 2fr 1fr;
-        padding: 10vh 5vh 5vh 5vh ;
-        font-family: 'Lato', sans-serif;
-        font-weight: 300;
-        min-height: 60vh;
-        min-width: 100vw;
-     }
-
-        #column1 {
-            background-color: black;
-            display:none;
-        }
-
-
-        #footer-logo {
-            height: auto;
-            width: 100%;
-            text-align: center;
-            padding-left: 20%;
-            padding-top: 5%;
-            padding-bottom:5%;
-            padding-right: 20%;
-        }
-        
-    #column2 {
-        display:flex;
-        flex-direction: column;
-        text-align: center;
-        grid-column: 1;
-    }
-
-        #column2 ul {
-            list-style: none;
-            text-align: center;
-        }
-        
-    #column2 ul li p a {
-        text-decoration:none;
-        color:white;
-        font-weight: 400;
-        font-size: 2.25vh;
-    }
-        
-    #column2 ul li {
-        margin: 4.4vh
-    }
-        
-    h6 {
-        font-size: 2.85vh;
-        text-transform: uppercase;
-        font-weight: 300;
-    }
-        
-    #column2 ul li a:hover {
-        color: hsl(160, 100%, 90%);
-    }
-
-    #column3 {
-        display:flex;
-        flex-direction: column;
-    }
-
-    #column3 h6 {
-        text-align: center;
-    }
-        
-    #column3 ul {
-        list-style: none;
-        text-align: center;
-    }
-        
-    #column3 ul li p a {
-        text-decoration:none;
-        color:white;
-        font-weight: 400;
-        font-size: 2.35vh;
-    }
-        
-    #column3 ul li {
-        text-align: center;
-        margin: 4.5vh;
-    }
-        
-        #column3 ul li a:hover {
-            color:  hsl(160, 100%, 90%);
-        }
-
-    #column4 {
-        display:flex;
-        flex-direction: column;
-        text-align: center;
-    }
-
-    #column4 p {
-        font-size: 2.35vh;
-        font-weight: 300;
-        line-height: 4vh;
-        margin-top: 4.5vh;
-        text-align: center;
-    }
-
-    #column5 {
-        display:flex;
-        flex-direction: column;
-        text-align: center;
-    }
-        
-    #social-media ul {
-        margin-top: 4.5vh
-    }
-
-        #social-media ul li {
-            display:inline;
-            list-style-type: none;
-            padding-left: 9%;
-        }
-
-        #social-media ul li .youtube {
-            padding-left: 0;
-        }
-
-        .follow {
-            margin-left:10%;
-
-        }
-        
-        #youtube {
-            height: auto;
-            width: 2vw;
-        }
-        
-        #instagram {
-            height:auto;
-            width: 3vw;
-        }
-
-        #gitea {
-            height:auto;
-            width: 3vw;
-        }
-        
-        #row2 {
-            color: white;
-            grid-column: 2/4;
-            margin-top:5%;
-        }
-        
-        #row2 p {
-            text-align: center;
-            padding-top:2%;
-            cursor: pointer;
-        }
-
-        .arrow .down {
-            display:none;
-        }
-    
-        #dropdown {
-            display:none;
-        }
-    
-        .ham-btn {
-            display:none;
-        }
-    
-        .hamburger {
-            display: none;
-        }
-    
-        .hamburger-icon {
-            display: none;
-        }
-    
-        #mobile-dropdown-container {
-            display: none;
-        }
-
-        #name {
-            display:none;
-        }
-
-/*Content-section*/
-
-    #content {
-        display: grid;
-        grid-template-columns: 100%; 
-        grid-template-rows: auto auto auto auto auto auto;
-        grid-template-areas: 
-        "elevator"
-        "experiments"
-        "spider"
-        "permaculture"
-        "greentech"
-        "about"
-        "news";
-        font-family: 'Lato', sans-serif;
-        font-weight: 400;
-        grid-gap: 0.2em;
-        width: 100%;
-    }
-
-    .section1 {
-        grid-area: elevator;
-        color: white;
-        display:grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 25% 25% 25% 25%;
-        height: 65vh;
-        width: 100vw;
-    }
-
-    .section1 #title {
-        grid-column: 1;
-        grid-row: 1/4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .section1 #title h3 {
-        height:auto;
-        color: #000;
-        font-size: 5vw;
-        padding-left:.1em;
-        text-shadow: 5px 5px #fff;
-        text-transform: uppercase;
-        font-family: 'IBM Plex Sans', sans-serif;
-    }
-
-    .section1 #slogan {
-        grid-column: 1;
-        grid-row: 3/4;
-        margin-bottom: 0;
-        margin-top: 5vh;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        cursor: pointer;
-    }
-
-    .section1 #slogan:hover {
-        opacity: 60%;
-    }
-
-    .section1 #slogan h2 {
-        font-size: 6vh;
-        text-transform: uppercase;
-        z-index:2;
-        color: transparent;
-        -webkit-text-stroke-width: 2px;
-        -webkit-text-stroke-color: #000;
-        font-family: 'IBM Plex Sans', sans-serif;
-        text-align: center;
-        padding-top: 5vh;
-        transition: ease-in-out 2s;
-    }
-
-    .section1 #slogan a {
-        text-decoration: none;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .section1 #slogan h2:hover {
-        color: hsl(160, 51%, 49%);
-    }
-
-    .section1 #slogan .fa-caret-down {
-        color: #000;
-        font-size: 6vh;
-        align-self: center;
-        cursor: pointer;
-        transition: ease .2s;
-    }
-
-    .section1 #slogan .fa-caret-down:hover {
-        opacity:50%;
-    }
-
-    .section1 #product {
-        grid-column: 2;
-        grid-row: 1/5;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
-
-    #product a {
-        padding-top: 10vh;
-    }
-
-    #product img {
-    min-height: 50vh;
-    opacity: 85%;
-    }
-
-
-    .section1 #image {
-        grid-column: 1/5;
-        grid-row: 1/5;
-        display:flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        margin-top:0;
-        z-index: -1;
-        width: 120vw;
-    }
-
-    .section1 #image #leaves {
-        width: 100%;
-        height: auto;
-        opacity:1;
-        z-index:-1;
-        opacity: 50%;
-    }
-
-    .section1 #about {
-        grid-column:1;
-        grid-row: 3/4;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        padding-top: 5vh;
-        display:none;
-    }
-
-    .section1 #about a {
-        text-decoration: none;
-        color: #fff;
-        padding: 5px 5px 5px 5px;
-        font-size: 2.5em;
-        text-shadow: 1px 1px rgb(0, 255, 170); 
-        font-weight:600;
-        transition: .5s;
-        text-transform: uppercase;
-    }
-
-        .section1 #about a:hover{
-            color:magenta;
-            opacity: 50%;
-        }
-
-        .section1 #about a:active{
-            color:magenta;
-            opacity: 50%;
-        }
-
-    .section1 #about .fas {
-        color: magenta;
-    }
-
-    .pages-container {
-        background-color: #333;
-        padding-top: 2.5vh;
-    }
-
-    .strip {
-        background-color: white;
-        border-radius: 25px;
-        z-index: 10000;
-        margin: 5vh;
-    }
-
-    .section2 {
-        grid-area:experiments;
-        color:#333;
-        display: grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 25% 25% 25% 25%;
-        min-height: 90vh;
-        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
-        border-radius: 25px;
-        padding: 1.5vh 0;
-    }
-
-    .section2 .image-slider {
-        grid-column: 2;
-        grid-row: 1/5;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-
-    .slider-items {
-
-        align-self: center;
-        padding-top: 1em;
-    }
-
-    .section2 .slider-items .item img {
-        max-width: 100%;
-        display: block;
-        border: .5em solid white;
-        margin: 1em;
-    }
-
-    .item #sample{
-        max-width: 30vh;
-    } 
-
-    .section2 .slider-items .item {
-        display: none;
-    }
-
-    .section2 .slider-items .item.active {
-        display: block;
-    }
-
-    .section2 .image-slider .left-slide {
-        background-color: transparent;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        left: 10%;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-
-    #dark{
-        font-size: 2em;
-        color: #333;
-    }
-
-    .section2 .image-slider .left-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section2 .image-slider .right-slide {
-        background-color: transparent;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        right:10%;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-
-    .fas.fa-angle-right {
-        font-size: 2em;
-        color: #333;
-    }
-
-    .section2 .image-slider .right-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section2 h1 {
-        grid-column: 1;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 10vh;
-        line-height: 80px;
-        letter-spacing: .5px;
-        padding: 6vh 0 4vh 8vh;
-        text-transform: uppercase;
-        font-weight: 800;
-        display: flex;
-        align-self: center;
-        color: white;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: black;
-    }
-
-    .section2 p {
-        grid-column: 1;
-        grid-row: 2/3;
-        font-size: 2.65vh;
-        padding: 1.75rem 3.5rem;
-        color: rgb(62, 190, 147);
-        line-height: 6vh;
-        text-align: center;
-    }
-
-    .section2 .page-button {
-        grid-column:1 ;
-        grid-row: 4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        padding-bottom: 5vh;
-    }
-
-    .section2 .page-button a {
-        text-decoration: none;
-        background-color: #fff;
-        color: #000;
-        border: .01em solid #000;
-        padding: .35em 1.5em;
-        border-radius: 25px;
-        text-align: center;
-        font-size: 1.45rem;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 390;
-        text-transform: uppercase;
-        transition: all .5s ease;
-        align-self: center;
-    }
-
-    .section2 .page-button a:hover {
-        opacity: 50%;
-        color: hsl(160, 51%, 80%);
-    }
-
-    #black {
-        background-color: black;
-        border-radius: 25px;
-        z-index: 10000;
-        min-height: 90vh;
-        margin: 5vh;
-    }
-
-
-    .section3 {
-        grid-area:spider;
-        color: #eee;
-        display: grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 25% 25% 25% 25%;
-        min-height: 95vh;
-        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
-        border-radius: 25px;
-        padding: 1.5vh 0;
-    }
-
-    .section3 .spider-slider {
-        grid-column: 2;
-        grid-row: 1/5;
-        max-width: 700px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-
-
-    .section3 .spider-items .item img {
-        max-width: 35vw;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-    }
-
-    .section3 .spider-items .item {
-        display: none;
-    }
-
-    .section3 .spider-items .item.active {
-        display: block;
-    }
-
-    .section3 .spider-slider #spider-left {
-        background-color: transparent;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        left: 3%;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-
-    .fas.fa-angle-left {
-        font-size: 2em;
-        color: #eee;
-    }
-
-    .section3 .spider-slider #spider-left:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section3 .spider-slider #spider-right {
-        background-color: transparent;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        right: 3%;
-        cursor: pointer;
-        transition: all .5s ease;
-        /*SlideShow Javascript!!!*/
-    }
-
-    .fas.fa-angle-right {
-        font-size: 2em;
-        color: #eee;
-    }
-
-    .section3 .spider-slider #spider-right:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section3 h1 {
-        grid-column: 1;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 10vh;
-        line-height: 80px;
-        letter-spacing: .5px;
-        text-transform: uppercase;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-        padding: 6vh 0 4vh 8vh;
-        color: #000;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: #fff;
-    }
-
-    .section3 p {
-        grid-column: 1;
-        grid-row: 2/3;
-        font-size: 1.25rem;
-        padding: 2vh 5vh;
-        color: hsl(160, 51%, 60%);
-        line-height: 6vh;
-        font-weight: 400;
-        text-align: center;
-    }
-    
-    .section3 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        padding-top: 3.5rem;
-        padding-bottom: 5vh;
-    }
-    
-    .section3 .page-button a {
-        text-decoration: none;
-        background-color: #000;
-        border: .01em solid #fff;
-        color: #fff;
-        padding: .35em 1em;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 1.5em;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 390;
-        text-transform: uppercase;
-        transition: ease .5s ;
-        align-self: center;
-    }
-
-    .section3 .page-button a:hover {
-        color: hsl(160, 51%, 80%);
-    }
-
-    .section4 {
-        grid-area: permaculture;
-        color: #333;
-        display: grid;
-        grid-template-columns: 40% 60%;
-        grid-template-rows: 25% 25% 25% 25%;
-        min-height: 95vh;
-        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
-        border-radius: 25px;
-        padding: 1.5vh 0;
-    }
-
-    .section4 .image-slider {
-        grid-column: 1;
-        grid-row: 1/5;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-
-    .section4 .slider-items .item img {
-        max-height: 60vh;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-    }
-
-    .section4 .slider-items .item {
-        display: none;
-    }
-
-    .section4 .slider-items .item.active {
-        display: block;
-    }
-
-    .section4 .image-slider .left-slide {
-        background-color:black;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        left:15%;
-        cursor: pointer;
-        transition: all .5s ease;
-        display:none; /*SlideShow Javascript!!!*/
-    }
-
-    .fas.fa-angle-left {
-        font-size: 2em;
-    }
-
-    .section4 .image-slider .left-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section4 .image-slider .right-slide {
-        background-color:black;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        right:15%;
-        cursor: pointer;
-        transition: all .5s ease;
-        display:none; /*SlideShow Javascript!!!*/
-    }
-
-    .fas.fa-angle-right {
-        font-size: 2em;
-    }
-
-    .section4 .image-slider .right-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section4 h1 {
-        grid-column: 2;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 9.5vh;
-        line-height: 80px;
-        letter-spacing: .5px;
-        padding: 6vh 6vh 4vh 0;
-        text-transform: uppercase;
-        font-weight: 800;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-        color: white;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: black;
-    }
-
-
-    .section4 p {
-        grid-column: 2;
-        grid-row: 2/3;
-        font-size: 1.25rem;
-        line-height: 6vh;
-        padding: 2em;
-        color: rgb(62, 190, 147);
-        font-weight: 300;
-        text-align: center;
-        justify-self: center;
-    }
-
-    .section4 .page-button {
-        grid-column:1 ;
-        grid-row:3;
-        display:flex;
-        align-items: center;
-        grid-column: 2;
-        grid-row: 4;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 5vh;
-    }
-
-    .section4 .page-button a {
-        text-decoration: none;
-        background-color: #fff;
-        color: #000;
-        border: 0.01em solid #000;
-        padding: .25em 1em;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 1.5em;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 390;
-        text-transform: uppercase;
-        margin-top: 6vh;
-        transition: ease .5s ;
-    }
-
-    .section4 .page-button a:hover {
-        opacity: 90%;
-        background-color:hsl(160, 50%, 90%)
-    }
-
-
-    .section5 {
-        grid-area:greentech;
-        color: #eee;
-        display:grid;
-        grid-template-columns: 40% 60%;
-        grid-template-rows: 25% 25% 25% 25%;
-        min-height: 90vh;
-        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
-        border-radius: 25px;
-        padding: 1.5vh 0;
-    }
-
-    .section5 .image-slider {
-        grid-column: 1;
-        grid-row: 1/5;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        position: relative;
-        align-self: center;
-    }
-
-    .section5 .slider-items .item img {
-        max-height: 60vh;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-    }
-
-    .section5 .slider-items .item {
-        display: none;
-    }
-
-    .section5 .slider-items .item.active {
-        display: block;
-    }
-
-    .section5 .image-slider .left-slide {
-        background-color:black;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        left:10%;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-
-    .fas.fa-angle-left {
-        font-size: 2em;
-    }
-
-    .section5 .image-slider .left-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section5 .image-slider .right-slide {
-        background-color:black;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        right:10%;
-        cursor: pointer;
-        transition: all .5s ease;
-        /*SlideShow Javascript!!!*/
-        display: none;
-    }
-
-    .fas.fa-angle-right {
-        font-size: 2em;
-    }
-
-    .section5 .image-slider .right-slide:hover {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-
-    .section5 h1 {
-        grid-column: 2;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 10vh;
-        line-height: 80px;
-        letter-spacing: .5px;
-        text-transform: uppercase;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-        padding:  6vh 6vh 4vh 0;
-        color: #000;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: #fff;
-    }
-
-        .section5 p {
-            grid-column: 2;
-            grid-row: 2/3;
-            font-size: 1.25rem;
-            line-height: 6vh;
-            padding: 3.25rem 3.5rem 3rem 0;
-            color: hsl(160, 51%, 60%);
-            font-weight: 400;
-            text-align: center;
-            justify-self: center;
-        }
-    
-    .section5 .page-button {
-        grid-column:2 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content:center;
-        padding-bottom: 6vh;
-        padding-right: 1.5em;
-    }
-    
-    .section5 .page-button a {
-        text-decoration: none;
-        background-color: #000;
-        color: #fff;
-        border: 0.01em solid #fff;
-        padding: .35em 1.5em;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 1.35em;
-        font-family: 'IBM Plex Sans', sans-serif;
-        text-transform: uppercase;
-        font-weight: 390;
-        margin: 1em;
-        transition: ease .5s ;
-    }
-
-    .section5 .page-button a:hover {
-        opacity: 90%;
-        color: hsl(160, 100%, 90%);
-    }
-
-    .section6 {
-        grid-area: about;
-        color: #eee;
-        display: grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 25% 25% 25% 25%;
-        min-height: 90vh;
-        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
-        border-radius: 25px;
-        padding: 5vh 0 0 0;
-    }
-
-    .section6 .image-slider {
-        grid-column: 2;
-        grid-row: 1/4;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-
-    .section6 .slider-items .item img {
-        max-height: 60vh;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-    }
-
-    .section6 h1 {
-        grid-column: 1;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 10vh;
-        line-height: 80px;
-        letter-spacing: .5px;
-        padding: 1em 0 .5em 0;
-        margin-left: .1em;
-        text-transform: uppercase;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-        padding-top: 4rem;
-        color: #000;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: #fff;
-    }
-
-    .section6 p {
-        grid-column: 1;
-        grid-row: 2/3;
-        font-size: 1.25rem;
-        padding: 2.5em 3.5rem 1.5rem 3.5rem;
-        color: hsl(160, 51%, 60%);
-        line-height: 6vh;
-        font-weight: 400;
-        text-align: center;
-        justify-self: center;
-    }
-
-    .section6 .page-button {
-        grid-column: 1 ;
-        grid-row: 4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        padding-bottom: 5vh;
-    }
-
-    .section6 .page-button a {
-        text-decoration: none;
-        background-color:#000;
-        color:#fff;
-        border: 0.01em solid #fff;
-        padding: .25em 1em;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 1.5em;
-        font-family: 'IBM Plex Sans', sans-serif;
-        margin: 1em;
-        font-weight: 390;
-        text-transform: uppercase;
-        transition: ease .5s;
-    }
-
-    .section6 .page-button a:hover {
-        opacity: 90%;
-        color: hsl(160, 51%, 80%);
-    }
-
-    .section7 {
-        grid-area: news;
-        color:black;
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-rows: .2fr 1fr;
-        padding: 2vh 5vh 5vh 5vh;
-        height: 105vh;
-    }
-
-    .section7 h1 {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        grid-row:1;
-        margin-left: 5rem;
-        color: #fff;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: #000;
-        font-size: 7vh;
-        font-weight: 200;
-    }
-
-    .section7 .news {
-        grid-row: 2/4;
-        max-width: 85vw;
-    }
-
-    .news h3 {
-        font-size: 2.5rem;
-        line-height: 3rem;
-        color: rgb(62, 190, 147);
-        margin: 2.5rem 0 3rem 1.5rem;
-        text-transform: uppercase;
-        font-family:'IBM Plex Sans', sans-serif;
-        grid-row: 1;
-        font-weight: 100;
-    }
-
-    .news img {
-        width: 45vh;
-        margin-bottom: 3vh;
-    }
-
-
-    .news p {
-        text-align: center;
-        margin: 1rem;
-    }
-
-    #insta {
-        padding: 0;
-        background-color:transparent;
-        border: none;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 0;
-        margin-left: 0;
-        transition: .5s;
-    }
-
-    #you {
-        padding: 0;
-        background-color:transparent;
-        border: none;
-        font-weight: 600;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 0;
-        margin-left: 0;
-        transition: .5s;
-    }
-
-    .social {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr ;
-        grid-template-rows: .5fr .5fr .5fr .5fr;
-        align-items: center;
-        box-shadow: 1px 1px 3px 5px #999;
-        min-height: 80vh;
-        grid-gap: 2.5vh;
-        box-shadow: 1px 1px 5px 3px hsl(160, 100%, 90%);
-        padding: 2rem;
-        height: 80vh;
-        border-radius: 25px;
-    }
-
-    #post_1 {
-
-        grid-column: 1;
-        grid-row: 2;
-        max-width: 25vw;
-    }
-
-    #post_2 {
-
-        grid-column: 2;
-        grid-row: 2;
-        max-width: 25vw;
-    }
-
-    #post_3 {
-
-        grid-column: 3;
-        grid-row: 2;
-        max-width: 25vw;
-    }
-
-    .social h5 {
-        grid-column: 1/3;
-        grid-row: 1;
-        justify-self: flex-start;
-        font-size: 5vh;
-        font-family:'IBM Plex Sans', sans-serif;
-        text-transform: uppercase;
-        padding: 1vh;
-        font-weight: 200;
-
-    }
-
-    .social .instagram {
-        grid-column: 1/3;
-        grid-row: 3;
-        display: flex;
-        padding-left: 2vh;
-    }
-
-    .social .instagram a {
-        display:flex;
-        text-decoration: none;
-        color: #333;
-    }
-
-    #gram {
-        width: 8vh;
-        margin-right: 5vh;
-        transition: all 0.5s ease;
-        margin-bottom: 0 !important;
-        filter: opacity(0.5);
-    }
-
-    #gram:hover, #gram:active {
-        background-color: hsl(160, 100%, 80%) !important;
-        border-radius: 50%;
-        filter:opacity(1);
-    }
-
-    .social .instagram #account {
-        font-size: 1.75rem;
-        align-self: center;
-        text-shadow: none;
-        font-weight: 100;
-    }
-
-    .social .instagram #account:hover {
-        opacity: 50%;
-    }
-
-    .social .youtube {
-        grid-column: 1/3;
-        grid-row: 4;
-        display: flex;
-        padding-left: 2vh;
-        margin: 0;
-    }
-
-    .social .youtube a {
-        display:flex;
-        text-decoration: none;
-        color: #333;
-    }
-
-    #tube {
-        width: 7vh;
-        margin-right: 5vh;
-        transition: all 0.5s ease;
-        filter: opacity(0.5)
-    }
-
-    #tube:hover {
-        background-color: hsl(300, 100%, 80%);
-        border-radius: 50%;
-        filter: opacity(1);
-    }
-
-
-    .social .youtube #account {
-        font-size: 1.75rem;
-        align-self: center;
-        text-shadow: none;
-        font-weight: 100;
-    }
-
-    .social .youtube #account:hover {
-        opacity: 50%;
-    }
-
-    .social button {
-        padding: .5rem 1.25rem;
-        background-color: transparent;
-        border: none;
-        font-size: 1.25rem;
-        font-family:'Fira Sans', sans-serif;
-        line-height: 1rem;
-        border-radius: 50%;
-        font-weight: 600;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 1rem;
-        margin-left: .25rem;
-        transition: .5s;
-    }
-
-    .social button a {
-        text-decoration: none;
-        color: white;
-    }
-}
-
-/* Adjust Media Queries ! */
-
-@media (max-width: 768px) {
-
-    body {
-        background-color: white;
-    }
-
-    .top-bar {
-        display: none;
-        }
-
-    .main-navigation-bar {
-        display: none;
-    }
-
-    .wrapper {
-        grid-template-columns: 100%; 
-        grid-template-rows: auto auto auto;
-        grid-template-areas: 
-        "main-bar"
-        "main"
-        "footer";
-        font-family: 'Fira Sans', sans-serif;
-        font-weight:500;
-        display:grid;
-    }
-    
-    #main-bar {
-        grid-area: main-bar;
-        background-color: black;
-        display: flex;
-        justify-content: flex-start;
-        border-bottom: 3px solid  rgb(62, 190, 147);
-        padding: 0 0;
-    }
-
-    .logo {
-        width: auto;
-        height: 17.5vh;
-        padding: 1vh 0 0 .5vh;
-    }
-
-    #main-bar h3 {
-            color: white;
-            text-transform: uppercase;
-            padding-top:0;
-            font-size: 13px;
-            margin-left:10%;
-            margin-bottom: 10%;
-            font-weight: 300;
-            display: none;
-    }
-
-    .hamburger-wrap {
-        float: right;
-        padding-top:0;;
-        width: 80vw;
-        margin-right: 1vh;
-        align-self: center;
-    }
-                    
-                .hamburger {
-                    padding: 25px 25px !important;
-                    display:block;
-                    float:right;
-                    cursor:pointer;
-                }
-            
-            .hamburger .hamburger-icon {
-                width: 7.5vw;
-                height: 2.5px;
-                background-color:white;
-                display: block;
-                position:relative;
-            }
-                            
-                .hamburger .hamburger-icon::before,
-                .hamburger .hamburger-icon::after {
-                    content:'';
-                    width:100%;
-                    height:100%;
-                    background-color: white;
-                    display: block;
-                    position:absolute;
-                }
-            
-                    .hamburger .hamburger-icon::after {
-                        top: -7px;
-                    } 
-                                    
-                    .hamburger .hamburger-icon::before {
-                        top: 7px;
-                    } 
-            
-                .ham-btn {
-                    display:none;
-                }
-                             
-                    .ham-btn:checked .hamburger .hamburger-icon {
-                        transform: rotate(45deg); 
-                    }
-
-    #mobile-dropdown-container {
-        background-color: black;
-        position: absolute;
-        width: 100%;
-        display: block;
-        z-index: 2;
-        padding-bottom: 0;
-        margin-left:0;
-    }
-                        
-    #mobile-dropdown {
-        margin: 1em;
-        display: none;
-    }
-                        
-    #mobile-dropdown ul {
-        list-style:none;
-    }
-                        
-    #mobile-dropdown ul li {
-        margin: 2vh 0 5vh 0;
-        display:flex;
-        flex-direction: column;
-    }
-                    
-    #mobile-dropdown ul li a {
-        color :white;
-        text-decoration:none;
-        font-size: 3vh;
-        font-weight: 700;
-        line-height: 1.8em;
-        justify-self: center;
-        align-self: center;
-    }
-
-    #mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active {
-        color:  rgb(0, 255, 170);
-    }
-                        
-    #mobile-dropdown ul li ul li a {
-        color: white;
-    }
-
-    .drop {
-        display: flex;
-        justify-self: center;
-        align-self: center;
-    }
-                        
-    #down li {
-        margin: 1vh 0 2vh 0 !important;
-    }
-                        
-    #down li a {
-        margin-bottom: 0 !important;
-    }
-                    
-    .languages a {
-        color: white;
-        font-size: 10px;
-    }
-
-    .languages a:active {
-        color:  rgb(0, 255, 170);
-    }
-                    
-                    .arrow {
-                        border: solid white;
-                        border-width: 0 2px 2px 0;
-                        display: inline-block;
-                        padding: 3px;
-                        cursor: pointer;
-                        transition: .1s;
-                    }
-                            
-                            .down {
-                                transform: rotate(45deg);
-                            }
-
-                            
-    main {
-        grid-area: main;        
-    }
-            
-    footer {
-        grid-area:footer;
-        background-color: yellow;
-    }
-
-        #footer-wrapper {
-            grid-template-columns: 50% 50%;
-            grid-template-rows: .5fr 0.1fr 0.1fr 0.1fr 0.1fr;
-            display: grid;
-            background-color:black;
-        }
-
-            #column1 {
-                grid-row: 1;
-                grid-column: 1;
-                display: flex;
-                justify-content: center;
-            }
-
-            #footer-logo {
-                width:80%;
-                height:auto;
-                text-align: center;
-                padding-left: 20%;
-                padding-top: 1%;
-                padding-right: 20%;
-                padding-bottom:1%;
-            }
-            
-            #column1 a {
-                color: white;
-                text-decoration: none;
-                text-transform: uppercase;
-                margin-left: 0;
-                font-size:100%;
-                padding-top:5%;
-                padding-bottom:5%;
-                display:flex;
-            }
-            
-            #column1 a:hover {
-                color: #4dff88;
-            }
-
-    #column2 {
-        grid-column:1/3;
-        grid-row: 2;
-        margin-top:0;
-        border-top:1px solid white;
-        padding: 5% 7.5% 5% 5%;
-        border-bottom:1px solid white;
-    }
-
-    #column2 ul {
-        display:none;
-        position: relative;
-        width:100%; 
-        overflow:auto;
-        z-index: 1;
-        list-style : none;
-        flex-direction: column;
-        text-align: center;
-        box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%);
-        border-radius: 25px;
-        padding: .9em;
-    }
-
-    #column2 ul li p a {
-        text-decoration:none;
-        color:white;
-    }
-
-    #column2 ul li p a:active {
-        color: hsl(160, 100%, 50%);
-        filter: blur(1px);
-    }
-                
-    #column2 ul li {
-        margin: .5em 0;
-    }
-                
-    h6 {
-        font-size: 2vh;
-        padding-bottom: 6%;
-        text-transform: uppercase;
-        color:white;
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .arrow {
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        display: inline-block;
-        padding: 3px;
-        transition: .2s;
-    }
-                
-    .down {
-        transform: rotate(45deg);
-        position: relative;
-        margin-left: 55%;        
-    }
-                
-    .down2 {
-        transform: rotate(45deg);
-        position: relative;
-        margin-left:73%;
-    }            
-
-    #column3 {
-        grid-column: 1/3;
-        grid-row: 3;
-        margin-top:0;
-        border-top:1px solid white;
-        padding-top:5%;
-        padding-bottom:4%;
-        padding-left: 5%;
-        padding-right: 5%;
-        border-bottom:1px solid white;
-    }
-
-    #column3 ul {
-        display:none;
-        position: relative;
-        width:100%; 
-        overflow:auto;
-        z-index: 1; 
-        list-style : none;
-        box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%);
-        border-radius: 25px;
-        padding: .5em;
-        text-align: center;
-        justify-content: space-evenly;
-    }
-
-    #column3 ul li {
-        margin: .5em 0;
-    }
-        
-    #column3 ul li p a {
-        text-decoration:none;
-        color:white;
-    }
-
-            #column4 {
-                grid-column: 1/3;
-                grid-row:4;
-                border-bottom: solid white 1px;
-            }
-
-            #column4 p {
-                display:flex;
-                align-items: center;
-                justify-content: space-evenly;
-                padding-bottom: 1%;
-                padding-top: 1%;
-                color:white;
-                font-size:100%;
-            }
-            
-            #column4 h6 {
-                display:none;
-            }
-
-            #column5 {
-                grid-column:2;
-                grid-row: 1;
-                margin-top:15%;
-                padding-bottom: 10%;
-                display:flex;
-                align-items: center;
-            }
-
-    #social-media ul li {
-        display:inline;
-        list-style-type: none;
-        padding-left: 2.5vh;
-        padding-bottom: 5%;
-    }
-                
-    #column5 h6 {
-        display:none;
-    }
-                
-    #gitea {
-        width: 5vh;
-        height:auto;
-    }
-
-    #gitea:active, #gitea:hover {
-        filter: blur(.75px);
-    }
-
-    #youtube {
-        height: auto;
-        width: 4vh;
-    }
-
-    #youtube:active, #youtube:hover {
-        filter: blur(.75px);
-    }
-                
-    #instagram {
-        height:auto;
-        width: 5vh;
-    }
-
-    #instagram:active, #instagram:hover {
-        filter: blur(.75px);
-    }
-
-                #row2 {
-                    grid-column:1;
-                    grid-row:5;
-                    display:flex;
-                    align-items:center;
-                    justify-content:center;
-                    margin-top:0;
-                    margin-bottom:5%;
-                    margin-top:5%;
-                    background-color: black;
-                }
-
-                #row2 p {
-                    align-items: center;
-                    padding-top:0;
-                    font-size: 50%;
-                    color:white;
-                }
-
-    #row3 {
-        grid-column: 2;
-        grid-row: 5;
-    }
-
-    /*Content Section*/
-
-    #content {
-        display: grid;
-        grid-template-columns: 100%; 
-        grid-template-rows: auto auto auto auto auto auto;
-        grid-template-areas: 
-        "elevator"
-        "experiments"
-        "spider"
-        "permaculture"
-        "greentech"
-        "about"
-        "news";
-        font-family: 'Fira Sans', sans-serif;
-        font-weight:500;
-        grid-gap: 0.2em;
-        width: 100%;
-    }
-
-        .section1 {
-            grid-area: elevator;
-            color: white;
-            border-top: 3px solid white;
-            display:grid;
-            grid-template-columns: 50% 50%;
-            grid-template-rows: 20% 25% 25% 30%;
-            grid-gap: 0.2em;
-            width: 100%;
-            height: 75vh;
-        }
-        
-        .section1 #title {
-            grid-column: 1/3;
-            grid-row: 1/3;
-            display:flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .section1 #title h3 {
-            height:auto;
-            color: #000;
-            font-size: 6.5vh;
-            font-family: 'IBM Plex Sans', sans-serif;
-            text-shadow: 5px 5px hsl(300, 100%, 80%);
-            text-transform: uppercase;
-        }
-        
-        .section1 #slogan {
-            grid-column: 1/3;
-            grid-row: 3/5;
-            margin-bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            margin-top: 7.5vh;
-            cursor: pointer;
-        }
-
-        .section1 #slogan a {
-            display: flex;
-            flex-direction: column;
-            text-decoration: none;
-            align-items: center;
-        }
-
-        .section1 #slogan h2 {
-            font-size: 4.5vh;
-            text-transform: uppercase;
-            padding-right: .1em;
-            padding-bottom:1vh;
-            color: #000;
-            font-family: 'IBM Plex Sans', sans-serif;
-            text-align: center;
-            padding-top: 5vh;
-            transition: ease;
-        }
-
-        .section1 #slogan h2:active {
-            -webkit-text-stroke-width: 1px;
-            -webkit-text-stroke-color: hsl(160, 51%, 60%);
-        }
-
-        .section1 #slogan a .fa-caret-down {
-            color: #000;
-            font-size: 7vh;
-            justify-self: center;
-        }
-
-        .section1 #slogan a .fa-caret-down:active {
-            color: hsl(160, 51%, 49%);
-        }
-
-        
-        .section1 #image {
-            grid-column: 1/3;
-            grid-row:1/5;
-            display:flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            margin-top:0;
-            z-index: -1;
-        }
-        
-    .section1 #image #leaves {
-        width: auto;
-        height: 85vh;
-        z-index:-1;
-        opacity: 35%;
-    }
-
-        .section1 #about {
-            grid-column:1;
-            grid-row: 4;
-            align-self: center;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            padding-bottom: 1.5em;
-            display: none;
-        }
-
-
-    .section1 #about a {
-        text-decoration: none;
-        color: hsl(300, 100%, 80%);
-        padding: 5px 5px 5px 5px;
-        font-size: 3.5vh;
-        text-shadow: .75px .75px #000; 
-        font-weight:600;
-        text-transform: uppercase;
-        margin-left: 1.5vh;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .section1 #about a .svg-inline--fa.fa-w-14 {
-        color: hsl(300, 100%, 80%);
-        cursor: pointer;
-    }
-
-    .section1 #about a .svg-inline--fa.fa-w-14:active  {
-            filter: blur(.5px);
-            color: hsl(160, 100%, 80%);
-        }
-
-        .section1 #about a:active {
-            filter : blur(.5px)
-        }   
-
-    .section1 #product {
-        grid-column: 1/3;
-        grid-row: 3/4;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-top: 7.5vh;
-    }
-
-    .section1 #product a {
-        cursor: pointer;
-    }
-
-    .section1 #product img {
-        max-height: 40vh;
-    }
-
-    .pages-container {
-        background-color: #000;
-        padding-top: 2vh;
-        overflow-x: hidden;
-    }
-    
-    .strip {
-        background-color: white;
-        border-radius: 25px;
-        z-index: 10000;
-        min-height: 90vh;
-        margin: 5vh;
-    }
-    
-    
-    .section2 {
-        grid-area:experiments;
-        display:grid;
-        grid-template-columns: 100%;
-        grid-template-rows:auto auto auto auto;
-        padding-top: 2vh;
-        margin-bottom: .5em;
-        width: 100%;
-        min-height: 95vh;
-        color: rgb(62, 190, 147);
-        font-weight: 600;
-    }
-
-    .section2 .image-slider {
-        grid-column: 1;
-        grid-row: 1;
-        display: flex;
-        justify-content: center;
-        position: relative;
-        width: 25vh;
-        height: 35vh;
-        justify-self: center;
-    }
-
-    
-    .section2 .slider-items .item img {
-        max-width: 100%;
-        display: flex;
-        position: absolute;
-    }
-
-    .section2 .slider-items .item #sample {
-        max-width: 30vw;
-        padding-top: 10vh;
-    }
-    
-    .section2 .slider-items .item {
-        display: none;
-    }
-    
-    .section2 .slider-items .item.active {
-        display: flex;
-        justify-self: center;
-        align-self: center;
-        justify-content: center;
-    }
-    
-    .section2 .image-slider .left-slide {
-        background-color: transparent;
-        border-radius: 50%;
-        position:absolute;
-        height: 45px;
-        width: 45px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        right: 23vh;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-    
-    .fas.fa-angle-left {
-        font-size: 2em;
-        color: #fff;
-    }
-    
-    .section2 .image-slider .left-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section2 .image-slider .right-slide {
-        background-color:transparent;
-        border-radius: 50%;
-        height: 45px;
-        width: 45px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        left: 23vh;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-    
-    .fas.fa-angle-right {
-        font-size: 2em;
-        color: #fff;
-    }
-    
-    .section2 .image-slider .right-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section2 h1 {
-        grid-column: 1;
-        grid-row: 2;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 5vh;
-        letter-spacing: .5px;
-        padding-top: 1vh;
-        text-transform: uppercase;
-        text-align: center;
-        color: #000;
-    }
-    
-    
-    .section2 p {
-        grid-column: 1;
-        grid-row: 3;
-        font-size:2.5vh;
-        padding: .5vh 3vh;
-        padding-bottom: 0;
-        text-align: center;
-        line-height: 1.5;
-        font-weight: 200;
-    }
-
-    #desktop {
-        display: none;
-    }
-    
-    .section2 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        margin: 2.5vh 0 5vh 0;
-        transition: all .5s ease;
-    }
-    
-    .section2 .page-button a {
-        text-decoration: none;
-        background-color: #000;
-        color:white;
-        padding: .75vh 2.75vh;
-        margin-left: 1vh;
-        border-radius: 27px;
-        margin-right: 4%;
-        text-align: center;
-        font-size: 3.5vh;
-        font-family: 'IBM Plex Sans', sans-serif;
-        text-transform: uppercase;
-        font-weight: 390;
-    }
-
-    .section2 .page-button a:active {
-        opacity: 50%;
-        background-color: hsl(160, 51%, 80%);
-        color: #333;
-    }
-
-    .strip2 {
-        background-color: #fff;
-        border-radius: 25px;
-        z-index: 10000;
-        min-height: 90vh;
-        margin: 5vh;
-    }
-
-    .section3 {
-        grid-area:spider;
-        display:grid;
-        grid-template-columns: 100%;
-        grid-template-rows:auto auto auto auto;
-        padding-top: 2vh;
-        margin-bottom: .5em;
-        color: #0000;
-        width: 100%;
-        min-height: 95vh;
-    }
-
-    .section3 .spider-slider {
-        grid-column: 1;
-        grid-row: 1;
-        display: flex;
-        justify-content: center;
-        position: relative;
-        width: 40vh;
-        height: 30vh;
-        justify-self: center;
-    }
-    
-    .section3 .spider-items .item img {
-        max-width: 100%;
-        display: flex;
-        position: absolute;
-    }
-    
-    .section3 .spider-items .item {
-        display: none;
-    }
-    
-    .section3 .spider-items .item.active {
-        display: flex;
-        justify-self: center;
-        align-self: center;
-        justify-content: center;
-    }
-
-    #pic1 {
-        height: 35vh;
-        width: 40vh;
-    }
-    
-    .section3 .spider-slider #spider-left {
-        background-color: transparent;
-        border-radius: 50%;
-        position:absolute;
-        height: 45px;
-        width: 45px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        left: -3.5vh;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-    
-    .fas.fa-angle-left {
-        font-size: 2em;
-        color: #999;
-    }
-
-    .fas.fa-angle-left:active {
-        opacity: 50%;
-        color: rgb(0, 255, 170);
-    }
-    
-    .section3 .spider-slider #spider-left:active {
-        box-shadow: 0px 0px 10px magenta;
-    }
-    
-    .section3 .spider-slider #spider-right {
-        background-color: transparent;
-        border-radius: 50%;
-        height:45px;
-        width: 45px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        right: -5vh;
-        cursor: pointer;
-        transition: all .5s ease;
-    }
-    
-    .fas.fa-angle-right {
-        font-size: 2em;
-        color:#999;
-    }
-
-    .fas.fa-angle-right:active {
-        opacity: 50%;
-        color: rgb(62, 190, 147);
-    }
-    
-    .section3 .spider-slider #spider-right:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section3 h1 {
-        grid-column: 1;
-        grid-row: 2;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 5.5vh;
-        letter-spacing: .5px;
-        padding-top: 2vh;
-        text-transform: uppercase;
-        text-align: center;
-        color: #000;
-    }
-    
-    .section3 p {
-        grid-column: 1;
-        grid-row: 3;
-        font-size:2.5vh;
-        padding: .5vh 3vh;
-        padding-bottom: 0;
-        text-align: center;
-        color: rgb(62, 190, 147);
-        font-weight: 600;
-        line-height: 1.5;
-    }
-    
-    .section3 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        margin:1.5vh 0;
-    }
-    
-    .section3 .page-button a {
-        text-decoration: none;
-        background-color:#000;
-        color:white;;
-        padding: .75vh 2vh;
-        margin-left: 1vh;
-        border-radius: 27px;
-        margin-right: 4%;
-        text-align: center;
-        font-size: 3.5vh;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 800;
-        text-transform: uppercase;
-    }
-    
-    .section4 {
-        grid-area:permaculture;
-        display:grid;
-        grid-template-columns: 100%;
-        grid-template-rows:auto auto auto auto;
-        padding-top: 2.5vh;
-        margin-bottom: .5em;
-        color:#000;
-        width: 100%;
-        height: 98vh;
-    }
-
-    .section4 .image-slider {
-        grid-column: 1;
-        grid-row: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        width: 22.5vh;
-        height: auto;
-       justify-self: center;
-    }
-    
-    .section4 .slider-items .item img {
-        max-width: 100%;
-        display: flex;
-    }
-    
-    .section4 .slider-items .item {
-        display: none;
-    }
-    
-    .section4 .slider-items .item.active {
-        display: block;
-    }
-    
-    .section4 .image-slider .left-slide {
-        background-color:black;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        right:30vh;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-    
-    .fas.fa-angle-left {
-        font-size: 2em;
-    }
-    
-    .section4 .image-slider .left-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section4 .image-slider .right-slide {
-        background-color:black;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        left: 35vh;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-    
-    .fas.fa-angle-right {
-        font-size: 2em;
-    }
-    
-    .section4 .image-slider .right-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section4 h1 {
-        grid-column: 1;
-        grid-row: 2;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 4.5vh;
-        letter-spacing: .5px;
-        padding: 2.5vh 0 2vh 0;
-        text-transform: uppercase;
-        text-align: center;
-        font-weight: 800;
-    }
-    
-    .section4 p {
-        grid-column: 1;
-        grid-row: 3;
-        font-size:2.5vh;
-        padding: .5vh 3vh;
-        padding-bottom: 0;
-        text-align: center;
-        color: rgb(62, 190, 147);
-        font-weight: 600;
-        line-height: 1.5;
-    }
-
-    .section4 p span {
-        display: none;
-    }
-    
-    .section4 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        margin: 2vh 0 2.5vh 0;
-    }
-    
-    .section4 .page-button a {
-        text-decoration: none;
-        background-color: #000;
-        color:white;;
-        padding: .75vh 2vh;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 3.5vh;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 800;
-        text-transform: uppercase;
-    }
-    
-
-    .section5 {
-        grid-area:greentech;
-        display:grid;
-        grid-template-columns: 100%;
-        grid-template-rows:auto auto auto auto;
-        padding-top: 2vh;
-        margin-bottom: .5em;
-        color: #000;
-        width: 100%;
-        height: 98vh;
-    }
+}
 
-    .section5 .image-slider {
-        grid-column: 1;
-        grid-row: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        width: 22.5vh;
-        height: auto;
-        justify-self: center;
-    }
-    
-    .section5 .slider-items .item img {
-        max-width: 100%;
-        display: flex;
+.content {
+    height: 120vh !important;
+    width: 100vw;
+}
 
-    }
-    
-    .section5 .slider-items .item {
-        display: none;
-    }
-    
-    .section5 .slider-items .item.active {
-        display: flex;
-    }
-    
-    .section5 .image-slider .left-slide {
-        background-color:black;
-        border-radius: 50%;
-        position:absolute;
-        height:50px;
-        width:50px;
-        top:50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -20px;
-        right:30vh;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-    
-    .fas.fa-angle-left {
-        font-size: 2em;
-    }
-    
-    .section5 .image-slider .left-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section5 .image-slider .right-slide {
-        background-color:black;
-        border-radius: 50%;
-        height:50px;
-        width:50px;
-        top: 50%;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        position:absolute;
-        margin-top: -20px;
-        left: 35vh;
-        cursor: pointer;
-        transition: all .5s ease;
-        display: none;
-    }
-    
-    
-    .section5 .image-slider .right-slide:active {
-        box-shadow: 0px 0px 10px rgb(0, 255, 170);
-    }
-    
-    .section5 h1 {
-        grid-column: 1;
-        grid-row: 2;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 5vh;
-        letter-spacing: .5px;
-        padding-top: 1.5vh;
-        text-transform: uppercase;
-        text-align: center;
-        font-weight: 800;
-        display: flex;
-        align-self: center;
-        justify-self: center;
-    }
-    
-    .section5 p {
-        grid-column: 1;
-        grid-row: 3;
-        font-size: 2.5vh;
-        padding: .5vh 3vh;
-        padding-bottom: 0;
-        color: rgb(62, 190, 147);
-        font-weight: 600;
-        line-height: 1.5;
-        text-align: center;
-    }
+.content .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(8, 1fr);
+    margin-top: .2rem;
+    font-family: 'Lato', sans-serif;;
+}
 
-    .section5 p span {
-        display: none;
-    }
-    
-    .section5 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        margin:1vh 0;
-        margin-bottom: 3vh;
-    }
-    
-    .section5 .page-button a {
-        text-decoration: none;
-        background-color:#000;
-        color:white;;
-        padding: .75vh 2vh;
-        border-radius: 27px;
-        text-align: center;
-        font-size: 3.5vh;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 800;
-        text-transform: uppercase;
-    }
-    
+.container img {
+    height: 100%;
+    z-index: 0;
+    max-width: 100vw;
+    grid-column: 1/3;
+    grid-row: 1/9;
+    justify-self: center;
+}
 
-    .section6 {
-        grid-area:about;
-        display:grid;
-        grid-template-columns: 100%;
-        grid-template-rows:auto auto auto auto;
-        padding-top: 2vh;
-        margin-bottom: .5em;
-        color: #000;
-        width: 100%;
-        height: 100vh;
-    }
+.link {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr)
+}
 
-    .section6 .image-slider {
-        grid-column: 1;
-        grid-row: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        width:30vh;
-        height: auto;
-        justify-self: center;
-    }
-    
-    .section6 .slider-items .item img {
-        max-width: 100%;
-        display: flex;
-    }
-    
-    .section6 .slider-items .item {
-        display: none;
-    }
-    
-    .section6 .slider-items .item.active {
-        display: flex;
-    }
-    
-    .section6 h1 {
-        grid-column: 1;
-        grid-row: 2;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 5vh;
-        letter-spacing: .5px;
-        padding-top: 1vh;
-        text-transform: uppercase;
-        text-align: center;
-        color: rgb(62, 190, 147);
-    }
-    
-    .section6 p {
-        grid-column: 1;
-        grid-row: 3;
-        font-size:2.5vh;
-        padding: .5vh 3vh 0 3vh;
-        text-align: center;
-        font-weight: 600;
-        color: #000;
-        line-height: 1.5;
-    }
+.link button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: .1rem solid hsl(300, 100%, 50%);
+    background-color: hsl(300, 100%, 50%);
+}
 
-    .section6 p span {
-        display: none;
-    }
-    
-    .section6 .page-button {
-        grid-column:1 ;
-        grid-row:4;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        margin:1vh 0 3vh 0;
-    }
-    
-    .section6 .page-button a {
-        text-decoration: none;
-        background-color:rgb(62, 190, 147);
-        color:white;;
-        padding: .75vh 2vh;
-        margin-left: 1vh;
-        border-radius: 27px;
-        margin-right: 4%;
-        text-align: center;
-        font-size: 3.5vh;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-weight: 800;
-        text-transform: uppercase;
-    }
-    
+.link a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.25rem;
+    transition: all .5s ease-in-out;
+}
 
-    .section7 {
-        grid-area: news;
-        color: black;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows:.25fr 1fr 1fr 1fr;
-    }
+.link button:active {
+    box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
+}
 
-    .section7 h1 {
-        color:#333;
-        display: flex;
-        justify-content: center;
-        margin: 2.5vh;
-        grid-column: 1;
-        grid-row: 1;
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 6vh;
-        text-transform: uppercase;
-    }
+.link .sub_container {
+    display: none;
+}
 
-    .news {
-        grid-row: 2/5;
-    }
+.link .sub_container p {
+    font-size: .65rem;
+    text-align: center;
+    color: #333;
+    line-height: 2.25vh;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: .03rem;
+}
 
-    .news h3 {
-        font-size: 1.5rem;
-        line-height: 3rem;
-        color: rgb(62, 190, 147);
-        margin: 1rem 0 0 1.5rem;
-        text-transform: uppercase;
-        font-family:'IBM Plex Sans', sans-serif;
-    }
-    
-    .news img {
-        width: 25vh;
-        margin: 0 0 1rem 3rem;
-    }
-    
-    .news h5 {
-        color: black;
-        text-shadow: 1.5px 3px rgb(62, 190, 147);
-        font-size: 1.5rem;
-        font-family:'IBM Plex Sans', sans-serif;
-        text-transform: uppercase;
-        margin-bottom: .5rem;
-    }
-    
-    .news p {
-        text-align: center;
-        margin: .75rem;
-    }
-    
-    .social {
-        display: grid;
-        grid-template-columns: 40% 60%;
-        grid-template-rows: .75fr .5fr .75fr .75fr;
-        align-items: center;
-        box-shadow: 1px 1px 5px 3px magenta;
-        padding: 1rem;
-        min-height: 80vh;
-        border-radius: 25px;
-    }
-    
-    .social h5 {
-        grid-column: 1/3;
-        grid-row: 1;
-        justify-self: center;
-    }
-    
-    .social .blog {
-        grid-column: 1/3;
-        grid-row: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .social .blog #blog {
-        margin: 0;
-    }
-    
-    .social .instagram {
-        grid-column: 1/3;
-        grid-row: 3;
-        display: flex;
-        justify-content: space-around;
-    }
+#hemp {
+    grid-column: 1/3;
+    grid-row: 1;
+    z-index: 2;
+}
 
-    #insta {
-        padding: 0;
-        background-color:transparent;
-        border: none;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 0;
-        margin-left: 0;
-    }
-    
-    #gram {
-        width: 5vh;
-        margin: 0;
-        transition: .7s all ease;
-    }
+#hemp button {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    align-self: end;
+    margin-left: 2.4rem;
+    margin-bottom: .2rem;
+}
 
-    #gram:active, #gram:hover {
-        border-radius: 50px;
-        background-color: hsl(160, 100%, 80%)
-    }
-    
-    #you {
-        padding: 0;
-        background-color:transparent;
-        border: none;
-        font-weight: 600;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 0;
-        margin-left: 0;
-    }
-    
-    #gram {
-        width: 9vh;
-       
-    }
-    
-    .social .instagram #account {
-        font-size: 2vh;
-        align-self: center;
-        text-shadow: none;
-    }
-    
-    .social .youtube {
-        grid-column: 1/3;
-        grid-row: 4;
-        display: flex;
-        justify-content: space-around;
-    }
-    
-    #tube {
-        width: 8vh;
-        margin: 0;
-        transition: .7s all ease;
-    }
+#hemp .sub_container {
+    grid-column: 1;
+    grid-row: 2;
+}
 
-    #tube:active, #tube:hover {
-        border-radius: 50px;
-        background-color: hsl(300, 100%, 80%);
-    }
-    
-    .social .youtube #account {
-        font-size: 2vh;
-        align-self: center;
-        text-shadow: none;
-    }
-    
-    
-    .social button {
-        padding: .5rem 1.25rem;
-        background-color: black;
-        border: none;
-        font-size: 1.25rem;
-        font-family:'Fira Sans', sans-serif;
-        line-height: 1rem;
-        border-radius: 25px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: .3s;
-        margin-top: 1rem;
-        margin-left: .25rem;
-        transition: .5s;
-    }
-    
-    .social button a {
-        text-decoration: none;
-        color: white;
-    }
-    
-    .social button a:active {
-        opacity: 50%;
-        color: rgb(0, 255, 170);
-    }
-    
-    .social #post {
-        width: 40vh;
+@media (min-width: 992px) {
+    .content {
+        height: 250vh !important;
+        margin-top: 5rem;
     }
 
-    .desktop {
-        display: none;
+    #hemp {
+        z-index: 0;
     }
-}
-
     
-    
-
-             
-            
-          
-            
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/templates/assets/css/navigation.css b/templates/assets/css/navigation.css
index 774b9b2..1c2b529 100644
--- a/templates/assets/css/navigation.css
+++ b/templates/assets/css/navigation.css
@@ -115,16 +115,15 @@
     transition: all .7 ease;
 }
 
-#down_5 {
-    bottom: 24%;
-    max-height: 40vh !important;
+#down_3 {
+   margin-top: 4rem;
 }
 
 .desktop_navigation {
     display: none;
 }
 
-@media (min-width:768px) {
+@media (min-width: 992px) {
     .main_bar {
         z-index: 1;
         display: flex;
@@ -203,6 +202,7 @@
 
    #broader {
         min-width: 15vw;
+        z-index: 1;
     }
 
     .desktop_navigation ul li li {
diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js
index ebefeb6..e12de6c 100644
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@@ -10,7 +10,7 @@ document.getElementById("icon").addEventListener("click", function menu() {
     }
 )
 
-// show experiments submenu
+// show hemp submenu
 
 document.getElementById("chevron_1").addEventListener("click", function menu() {
     var x= document.getElementById("down_1");
@@ -22,7 +22,7 @@ document.getElementById("chevron_1").addEventListener("click", function menu() {
     }
 )
 
-// permaculture submenu
+// spider submenu
 
 document.getElementById("chevron_2").addEventListener("click", function menu() {
     var x= document.getElementById("down_2");
@@ -34,7 +34,7 @@ document.getElementById("chevron_2").addEventListener("click", function menu() {
     }
 )
 
-// greentech submenu
+// offgrid submenu
 
 document.getElementById("chevron_3").addEventListener("click", function menu() {
     var x= document.getElementById("down_3");
@@ -46,22 +46,10 @@ document.getElementById("chevron_3").addEventListener("click", function menu() {
     }
 )
 
-// spiderpi submenu
+// index 
 
-document.getElementById("chevron_4").addEventListener("click", function menu() {
-    var x= document.getElementById("down_4");
-    if (x.style.display === "none") {
-        x.style.display = "flex";}
-        else {
-            x.style.display ="none";
-        }
-    }
-)
-
-// about submenu
-
-document.getElementById("chevron_5").addEventListener("click", function menu() {
-    var x= document.getElementById("down_5");
+document.getElementById("click").addEventListener("click", () => {
+    var x = document.getElementById("show");
     if (x.style.display === "none") {
         x.style.display = "flex";}
         else {
diff --git a/templates/home.html.tera b/templates/home.html.tera
deleted file mode 100644
index e8d3d6a..0000000
--- a/templates/home.html.tera
+++ /dev/null
@@ -1,20 +0,0 @@
-{%extends "base"%}
-{%block title %}Cannabinieri CBD{%endblock title %}
-{%block head%}
-{{super()}}
-<link rel="stylesheet" type="text/css" href="css/home.css" />
-{%endblock head%}
-{{super()}}
-{%block content%}
-<div class="container">
-    <img type="image/png" src="img/hero.png">
-    <div class="link" id="hemp">
-        <button>
-            <a href="/hemp">i</a>
-        </button>
-        <h6>Hanf</h6>
-            <p>We experiment with hemp <br>to understand our ecosystem <br>and produce 100% organic<br> CBD oils and flower</p>
-    </div>
-</div>
-{%endblock content%}
-
diff --git a/templates/index_de.html.tera b/templates/index_de.html.tera
new file mode 100644
index 0000000..5510e98
--- /dev/null
+++ b/templates/index_de.html.tera
@@ -0,0 +1,21 @@
+{%extends "base"%}
+{%block title %}Cannabinieri CBD{%endblock title %}
+{%block head%}
+{{super()}}
+<link rel="stylesheet" type="text/css" href="css/index.css" />
+{%endblock head%}
+{{super()}}
+{%block content%}
+<div class="container">
+    <img type="image/png" src="img/hero.png">
+    <div class="link" id="hemp">
+        <button id="click">
+            <a href="#">i</a>
+        </button>
+        <div class ="sub_container" id ="show">
+            <p>{{ hemp["de"] }}<br><b>Hanf </b>ist unglaublich vielseitig.<br> Deshalb bauen wir ihn an. <br>Konsequent biologisch.</p>
+        </div>
+    </div>
+</div>
+{%endblock content%}
+