Changes for Kovok

6 files changed, 228 insertions, 153 deletions

diff --git a/exampleSite/data/homepage.yml b/exampleSite/data/homepage.yml
index 8f7f3c1..1bc5132 100644
--- a/exampleSite/data/homepage.yml
+++ b/exampleSite/data/homepage.yml
@@ -29,4 +29,4 @@ projects:
   card3:
     title: "Graysx"
     text: "Place Cons Rerum Provide SuntSin Incid Fac Nonse Mollitia Quia Itaque! Iusto Necessi Ullam Recusand Nobi Quo Nequ Inulla Beatae Recusand Suscipit Ip Autem Rep Dol Quoquis Inu Rer Odiorem Suscipi Praes Accusant Quia Quosqu Anim Incidunt Nobis Odio Omnis"
-    img: "assets/img/demo-image-02.jpg"
\ No newline at end of file
+    img: "assets/img/demo-image-02.jpg"
diff --git a/layouts/index.html b/layouts/index.html
index 0c222ff..cb42436 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,12 +5,12 @@
 {{- partial "header.html" . -}}
         <!-- Masthead-->
         <header class="masthead">
-            <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
+            <div class="container main px-4 px-lg-5 py-lg-5 d-flex h-100 align-items-end justify-content-center">
                 <div class="d-flex justify-content-center">
                     <div class="text-center">
                         {{ with site.Data.homepage.main }}
                         <h1 class="mx-auto my-0 text-uppercase">{{ .header.title }}</h1>
-                        <h2 class="text-white-50 mx-auto mt-2 mb-5">{{ .header.description }}</h2>
+                        <h2 class="text-white-75 mx-auto mt-2 mb-2 text-uppercase">{{ .header.description }}</h2>
                         <a class="btn btn-primary" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
                         {{ end }}
                     </div>
@@ -23,131 +23,125 @@
             <div class="container px-4 px-lg-5">
                 <div class="row gx-4 gx-lg-5 justify-content-center">
                     <div class="col-lg-8">
-                        <h2 class="text-white mb-4">{{ .title }}</h2>
-                        <p class="text-white-50">{{ .desc }}</p>
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75">{{ .desc }}</p>
                         {{ if .button.enable }}
                         <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
                         {{ end }}
                     </div>
+                    <div class="about-row">
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image0.src }}" alt="A live picture of {{ .image0.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image0.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image1.src }}" alt="A live picture of {{ .image1.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image1.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image2.src }}" alt="A live picture of {{ .image2.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image2.text }}</figcaption>
+                        </figure>
+                        <figure class="column text-center">
+                            <img class="about-img" src="{{ .image3.src }}" alt="A live picture of {{ .image3.text }}"/>
+                            <figcaption class="text-white-75 mx-auto mt-2 mb-3 text-uppercase">{{ .image3.text }}</figcaption>
+                        </figure>
+                    </div>
                 </div>
-                <img class="img-fluid" src="{{ .image }}" alt="..." />
             </div>
         </section>
         {{ end }}
-        <!-- Projects-->
-        {{ with site.Data.homepage.projects }}
-        <section class="projects-section bg-light" id="projects">
+        {{ with site.Data.homepage.musicvideo }}
+        <!-- Listen-->
+        <section class="watch-section">
             <div class="container px-4 px-lg-5">
-                <!-- Featured Project Row-->
-                <div class="row gx-0 mb-4 mb-lg-5 align-items-center">
-                    <div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="{{ .card1.img }}" alt="..." /></div>
-                    <div class="col-xl-4 col-lg-5">
-                        <div class="featured-text text-center text-lg-left">
-                            <h4>{{ .card1.title }}</h4>
-                            <p class="text-black-50 mb-0">{{ .card1.text }}</p>
-                        </div>
-                    </div>
-                </div>
-                <!-- Project One Row-->
-                <div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
-                    <div class="col-lg-6"><img class="img-fluid" src="{{ .card2.img }}" alt="..." /></div>
-                    <div class="col-lg-6">
-                        <div class="bg-black text-center h-100 project">
-                            <div class="d-flex h-100">
-                                <div class="project-text w-100 my-auto text-center text-lg-left">
-                                    <h4 class="text-white">{{ .card2.title }}</h4>
-                                    <p class="mb-0 text-white-50">{{ .card2.text }}</p>
-                                    <hr class="d-none d-lg-block mb-0 ms-0" />
-                                </div>
-                            </div>
-                        </div>
+                <div class="d-flex justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75 h2">{{ .desc }}</p>
                     </div>
                 </div>
-                <!-- Project Two Row-->
-                <div class="row gx-0 justify-content-center">
-                    <div class="col-lg-6"><img class="img-fluid" src="{{ .card3.img }}" alt="..." /></div>
-                    <div class="col-lg-6 order-lg-first">
-                        <div class="bg-black text-center h-100 project">
-                            <div class="d-flex h-100">
-                                <div class="project-text w-100 my-auto text-center text-lg-right">
-                                    <h4 class="text-white">{{ .card3.title }}</h4>
-                                    <p class="mb-0 text-white-50">{{ .card3.text }}</p>
-                                    <hr class="d-none d-lg-block mb-0 me-0" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
+                    <video class="musicvideo mx-auto" controls preload="metadata" id="watch" alt="Music video for Path of Emotions">
+                        <source src='{{ .src }}' type="audio/ogg">
+                    </video>
                 </div>
             </div>
         </section>
         {{ end }}
-        <!-- Signup-->
-        <section class="signup-section" id="signup">
+        {{ with site.Data.homepage.listen }}
+        <!-- Listen-->
+        <section class="listen-section" id="listen">
             <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5">
-                    <div class="col-md-10 col-lg-8 mx-auto text-center">
-                        <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
-                        <h2 class="text-white mb-5">Subscribe to receive updates!</h2>
-                        <form class="form-signup" id="contactForm" data-sb-form-api-token="{{ site.Params.sbtoken }}">
-                            <div class="row input-group-newsletter">
-                                <div class="col"><input class="form-control" id="emailAddress" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
-                                <div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Notify Me!</button></div>
-                            </div>
-                            <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is required.</div>
-                            <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.</div>
-                            <div class="d-none" id="submitSuccessMessage">
-                                <div class="text-center mb-3 mt-2 text-white">
-                                    <div class="fw-bolder">Form submission successful!</div>
-                                </div>
-                            </div>
-                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
-                        </form>
+                <div class="d-flex justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                        <p class="text-white-75 h2">{{ .desc }}</p>
                     </div>
                 </div>
+                <div class="text-center mx-auto mt-2 mb-2">
+                    <img class="listen-img" src="{{ .image }}" alt="Workart for our EP Take Away"/>
+                </div>
+                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
+                    <section class="text-white-75 text-uppercase"> {{ .audio0.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio0.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio1.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio1.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio2.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio2.src }}' type="audio/ogg">
+                    </audio>
+
+                    <section class="text-white-75 text-uppercase"> {{ .audio3.title }} </section>
+                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
+                        <source src='{{ .audio3.src }}' type="audio/ogg">
+                    </audio>
+                </div>
             </div>
         </section>
+        {{ end }}
         <!-- Contact-->
-        <section class="contact-section bg-black">
+        {{ with site.Data.homepage.contact }}
+        <section class="contact-section bg-black" id="contact">
+            <div class="d-flex justify-content-center">
+                <div class="col-lg-8 text-center">
+                    <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                </div>
+            </div>
             <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5">
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-map-marked-alt text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Address</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50">{{ site.Params.address }}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-envelope text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Email</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50"><a href="#!">{{ site.Params.email }}</a></div>
-                            </div>
+                <div class="row gx-4 gx-lg-5 justify-content-center">
+                    <div class="btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
+                            <a  href="mailto:{{ .email }}">
+                            <i class="fas fa-envelope text-primary mb-2"></i>
+                            <h4 class="text-uppercase m-4 text-white-75">Email</h4>
+                            <div class="small my-4 text-white-75">{{ .email }}</div>
+                        </a>
                         </div>
-                    </div>
-                    <div class="col-md-4 mb-3 mb-md-0">
-                        <div class="card py-4 h-100">
-                            <div class="card-body text-center">
-                                <i class="fas fa-mobile-alt text-primary mb-2"></i>
-                                <h4 class="text-uppercase m-0">Phone</h4>
-                                <hr class="my-4 mx-auto" />
-                                <div class="small text-black-50">{{ site.Params.phone }}</div>
-                            </div>
+                    <div class="column btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
+                            <a href="xmpp:{{ .xmpp }}?message">
+                            <i class="fas fa-envelope text-primary mb-2"></i>
+                            <h4 class="text-uppercase m-4 text-white-75">XMPP</h4>
+                            <div class="small my-4 text-white-75">{{ .xmpp }}</div>
+                        </a>
                         </div>
-                    </div>
                 </div>
+                {{ with site.Data.homepage.social }}
                 <div class="social d-flex justify-content-center">
-                    <a class="mx-2" href="{{ site.Params.twitter }}"><i class="fab fa-twitter"></i></a>
-                    <a class="mx-2" href="{{ site.Params.facebook }}"><i class="fab fa-facebook-f"></i></a>
-                    <a class="mx-2" href="{{ site.Params.github }}"><i class="fab fa-github"></i></a>
+                    <a class="mx-2" href="{{ .fediverse.url }}"><img class="social-img" src="{{ .fediverse.src }}" alt="{{ .fediverse.altext }}"/></a>
+                    <a class="mx-2" href="{{ .instagram.url }}"><img class="social-img" src="{{ .instagram.src }}" alt="{{ .instagram.altext }}"/></a>
+                    <a class="mx-2" href="{{ .youtube.url }}"><img class="social-img" src="{{ .youtube.src }}" alt="{{ .youtube.altext }}"/></a>
+                    <a class="mx-2" href="{{ .peertube.url }}"><img class="social-img" src="{{ .peertube.src }}" alt="{{ .peertube.altext }}"/></a>
                 </div>
+                {{ end }}
             </div>
         </section>
+        {{ end }}
 {{- partial "footer.html" . -}}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f4d5ef5..d69f4df 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,11 +1,2 @@
 <!-- Footer-->
-<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; {{ .Name }} {{ now.Format "2006"}}</div></footer>
-<!-- Bootstrap core JS-->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
-<!-- Core theme JS-->
-<script src="js/scripts.js"></script>
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
-<!-- * *                               SB Forms JS                               * *-->
-<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
-<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
\ No newline at end of file
+<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; {{ site.Params.Author }} {{ now.Format "2006"}}</div></footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ed7800a..68df436 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,14 +4,9 @@
     <meta name="description" content="" />
     <meta name="author" content="" />
     <link rel="icon" href="{{ site.Params.favicon }}" />
-    <!-- Font Awesome icons (free version)-->
-    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
-    <!-- Google fonts-->
-    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="css/styles.css" rel="stylesheet" />
     {{ $title := print .Site.Title " | " .Title }}
     {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
     <title>{{ $title }}</title>
-</head>
\ No newline at end of file
+</head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a210045..6d4bf3e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,12 +1,13 @@
 <!-- Navigation-->
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
     <div class="container px-4 px-lg-5">
-        <a class="navbar-brand" href="#page-top"><img src="{{ .Site.Params.logo }}"></a>
-        <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+        <a class="navbar-brand" href="#page-top"><img class="navbar-brand logo" src="{{ .Site.Params.logo }}"></a>
+        <label for="menu-btn-checkbox" class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
             Menu
             <i class="fas fa-bars"></i>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarResponsive">
+        </label>
+        <input id="menu-btn-checkbox" type="checkbox"/>
+        <div class="collapse navbar-collapse" id="mobile-menu">
             <ul class="navbar-nav ms-auto">
                 {{ range site.Menus.main }}
                 <li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name }}</a></li>
@@ -14,4 +15,4 @@
             </ul>
         </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/static/css/styles.css b/static/css/styles.css
index 860f557..58d9675 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -34,7 +34,7 @@
   --bs-gray-700: #495057;
   --bs-gray-800: #343a40;
   --bs-gray-900: #212529;
-  --bs-primary: #64a19d;
+  --bs-primary: #cb261c;
   --bs-secondary: #7464a1;
   --bs-success: #67c29c;
   --bs-info: #1cabc4;
@@ -83,7 +83,7 @@
 
 body {
   margin: 0;
-  font-family: var(--bs-body-font-family);
+  font-family: Arial;
   font-size: var(--bs-body-font-size);
   font-weight: var(--bs-body-font-weight);
   line-height: var(--bs-body-line-height);
@@ -3000,7 +3000,7 @@ textarea.form-control-lg {
   display: inline-block;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
+  color: #cb261c;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
@@ -3035,13 +3035,13 @@ textarea.form-control-lg {
 
 .btn-primary {
   color: #fff;
-  background-color: #64a19d;
-  border-color: #64a19d;
+  background-color: #971b15;
+  border-color: #971b15;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #558985;
-  border-color: #50817e;
+  background-color: #5e110d;
+  border-color: #5e110d;
 }
 .btn-check:focus + .btn-primary, .btn-primary:focus {
   color: #fff;
@@ -4057,9 +4057,10 @@ textarea.form-control-lg {
 .nav-link {
   display: block;
   padding: 0.5rem 1rem;
-  color: #64a19d;
+  color: rgba(0, 0, 0, 1);
   text-decoration: none;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  text-transform: uppercase;
 }
 @media (prefers-reduced-motion: reduce) {
   .nav-link {
@@ -4628,7 +4629,7 @@ textarea.form-control-lg {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #6c757d;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5648,6 +5649,10 @@ textarea.form-control-lg {
   outline: 0;
 }
 
+.logo {
+  max-height: 60px;
+}
+
 .modal-dialog {
   position: relative;
   width: auto;
@@ -7963,6 +7968,11 @@ textarea.form-control-lg {
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
+.text-white-75 {
+  --bs-text-opacity: 1;
+  color: rgba(255, 255, 255, 0.75) !important;
+}
+
 .text-reset {
   --bs-text-opacity: 1;
   color: inherit !important;
@@ -11474,8 +11484,9 @@ body {
 }
 
 #mainNav {
-  min-height: 3.5rem;
-  background-color: #000;
+  min-height: 3.0rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%);
+  padding-bottom: 2.5rem;
 }
 #mainNav .navbar-toggler {
   font-size: 80%;
@@ -11515,7 +11526,7 @@ body {
   #mainNav .nav-link {
     transition: none;
     padding: 2rem 1.5rem;
-    color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.9);
   }
   #mainNav .nav-link:hover {
     color: rgba(255, 255, 255, 0.75);
@@ -11547,6 +11558,10 @@ body {
   }
 }
 
+.main {
+  padding-bottom: 2rem;
+}
+
 .btn {
   box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
   padding: 1.25rem 2rem;
@@ -11562,13 +11577,24 @@ body {
   width: 100%;
   height: auto;
   min-height: 35rem;
-  padding: 15rem 0;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
+  padding: 15rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 90%, #000 100%), url("/header2.webp");
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-size: cover;
 }
+
+@media (min-width: 768px) {
+  .masthead {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 90%, #000 100%), url("/header.webp");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-size: cover;
+  }
+}
+
 .masthead h1, .masthead .h1 {
   font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 2.5rem;
@@ -11589,24 +11615,31 @@ body {
     line-height: 4rem;
   }
 }
-@media (min-width: 992px) {
-  .masthead {
-    height: 100vh;
-    padding: 0;
-  }
-  .masthead h1, .masthead .h1 {
-    font-size: 6.5rem;
-    line-height: 6.5rem;
-    letter-spacing: 0.8rem;
-  }
-  .masthead h2, .masthead .h2 {
-    max-width: 30rem;
-    font-size: 1.25rem;
-  }
+
+.masthead {
+  height: 100vh;
+  padding: 0;
+}
+.masthead h1, .masthead .h1 {
+  font-size: 6.5rem;
+  line-height: 6.5rem;
+  letter-spacing: 0.8rem;
+}
+.masthead h2, .masthead .h2 {
+  max-width: 30rem;
+  font-size: 1.25rem;
 }
 
+  .musicvideo {
+    max-width: 80%;
+    text-align: justify;
+    max-width: 90%;
+    max-height: 600px;
+  }
+
 .about-section {
-  padding-top: 10rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%);
 }
 .about-section p {
@@ -11660,7 +11693,7 @@ body {
 }
 
 .contact-section {
-  padding-top: 5rem;
+  padding-top: 2rem;
 }
 .contact-section .card {
   border: 0;
@@ -11673,7 +11706,7 @@ body {
   letter-spacing: 0.15rem;
 }
 .contact-section .card hr {
-  border-color: #64a19d;
+  border-color: #6c757d;
   border-width: 0.25rem;
   width: 3rem;
 }
@@ -11705,4 +11738,65 @@ body {
 .about-btn {
   margin-top: -50px;
   margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+.about-el {
+  display: block;
+}
+
+.about-img {
+  text-align: justify;
+  max-width: 100%;
+}
+
+.column {
+  display: table-cell;
+}
+
+.about-row {
+  display: table;
+  width: 100%; /*Optional*/
+  table-layout: fixed; /*Optional*/
+}
+
+.listen-section {
+  padding-top: 0;
+  padding-bottom: 1.5rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 95%, #000 100%);
+}
+
+.listen-img {
+  text-align: justify;
+  max-width: 90%;
+  max-height: 600px;
+}
+
+.watch-section {
+  padding-top: 0;
+  padding-bottom: 1.5rem;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.social-img {
+  width: 2rem;
+  height: 2rem;
+}
+
+#menu-btn-checkbox {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .hide-in-mobile,
+  .site-nav.hide-in-mobile {
+    display: none; }
+  #menu-btn {
+    display: inline-block; }
+  label[for=menu-btn-checkbox] {
+    cursor: pointer; }
+  #menu-btn-checkbox:not(:checked) ~ #mobile-menu {
+    display: none; }
+  #mobile-menu {
+    display: inline-block;
+  }
+}