From 02d6ffa7a39538b8b2a5fa6d51098901089c63d1 Mon Sep 17 00:00:00 2001
From: CPetruzzo <facu03@gmail.com>
Date: Fri, 22 Nov 2024 19:52:15 -0300
Subject: [PATCH] feat(aasdasd): asdas

---
 DotDager/images/facebook.svg  |   4 +
 DotDager/images/linkedin.svg  |   5 +
 DotDager/images/messenger.svg |   4 +
 DotDager/images/twitter.svg   |   4 +
 DotDager/images/whatsapp.svg  |   5 +
 DotDager/index.html           |  78 +++++--
 DotDager/indexEN.html         |  62 +++++-
 DotDager/styles/side-bar.css  | 372 ++++++++++++++++++++++++++++++++++
 DotDager/styles/styles.css    |   2 +
 9 files changed, 511 insertions(+), 25 deletions(-)
 create mode 100644 DotDager/images/facebook.svg
 create mode 100644 DotDager/images/linkedin.svg
 create mode 100644 DotDager/images/messenger.svg
 create mode 100644 DotDager/images/twitter.svg
 create mode 100644 DotDager/images/whatsapp.svg
 create mode 100644 DotDager/styles/side-bar.css

diff --git a/DotDager/images/facebook.svg b/DotDager/images/facebook.svg
new file mode 100644
index 0000000..9faa624
--- /dev/null
+++ b/DotDager/images/facebook.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+                    <path
+                        d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
+                </svg>
\ No newline at end of file
diff --git a/DotDager/images/linkedin.svg b/DotDager/images/linkedin.svg
new file mode 100644
index 0000000..6841360
--- /dev/null
+++ b/DotDager/images/linkedin.svg
@@ -0,0 +1,5 @@
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+                    <path
+                        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
+                </svg>
diff --git a/DotDager/images/messenger.svg b/DotDager/images/messenger.svg
new file mode 100644
index 0000000..56834e4
--- /dev/null
+++ b/DotDager/images/messenger.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <path
+                        d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64h96v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z" />
+                </svg>
\ No newline at end of file
diff --git a/DotDager/images/twitter.svg b/DotDager/images/twitter.svg
new file mode 100644
index 0000000..d9b8069
--- /dev/null
+++ b/DotDager/images/twitter.svg
@@ -0,0 +1,4 @@
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                    <path
+                        d="M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zm-2.9 207c-6.6 18.6-24.4 32-45.3 32s-38.7-13.4-45.3-32c-1.8-5-2.7-10.4-2.7-16c0-26.5 21.5-48 48-48s48 21.5 48 48c0 5.6-1 11-2.7 16zM160 432c-20.9 0-38.7-13.4-45.3-32c-1.8-5-2.7-10.4-2.7-16c0-26.5 21.5-48 48-48s48 21.5 48 48c0 5.6-1 11-2.7 16c-6.6 18.6-24.4 32-45.3 32z" />
+                </svg>
diff --git a/DotDager/images/whatsapp.svg b/DotDager/images/whatsapp.svg
new file mode 100644
index 0000000..db7b305
--- /dev/null
+++ b/DotDager/images/whatsapp.svg
@@ -0,0 +1,5 @@
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+                    <path
+                        d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
+                </svg>
\ No newline at end of file
diff --git a/DotDager/index.html b/DotDager/index.html
index f731c50..d30527d 100644
--- a/DotDager/index.html
+++ b/DotDager/index.html
@@ -8,17 +8,19 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="styles/side-bar.css">
+
 </head>
 
 <body>
     <div class="container">
 
         <!-- Banner -->
-        <div class="banner">
+        <div class="banner" id="home">
             <h1 class="name">Dot Dager</h1>
             <p class="tagline">Creador de Contenido | Filántropo de la Programación | Crítico de Cine | Amante de
                 los Gatos | Guitarrista | Apasionado por los Pepinos</p>
-            <img src="images/dager3.jpg" alt="Banner de Dot Dager" class="banner-image">
+            <img style="border-radius: 15px;" src="images/dager3.jpg" alt="Banner de Dot Dager" class="banner-image">
         </div>
 
         <button id="toggle-music">
@@ -29,13 +31,14 @@ <h1 class="name">Dot Dager</h1>
             </svg>
         </button>
 
-        <section class="about">
+        <section class="about" id="about">
             <h2>Quién soy?</h2>
             <p style="max-width: 900px; align-items: center; text-align: center; margin: auto;">
                 ¡Hola! Mi nombre es Mariano Villa, y por más que mi background filosófico tenga unas ganas de ponerse a
                 divagar con esa pregunta voy a tratar de resumirles:
                 <br><br>Soy un creador de contenido con mucho interés en todo lo que te hace
-                pensar, apasionado por el <strong>dinero</strong>, digo... <strong>programación</strong>, con síndrome de impostor, con un gran gusto
+                pensar, apasionado por el <strong>dinero</strong>, digo... <strong>programación</strong>, autodidacta
+                con síndrome de impostor, con un gran gusto
                 por los
                 <strong>gatos</strong>,
                 las <strong>guitarras</strong>, los <strong>pepinos</strong> y la <strong>filosofía</strong>.
@@ -63,11 +66,11 @@ <h2>Quién soy?</h2>
                     I don't understand but I like pickles
 
                 </p>
-                <img class="icon serious-language" src="images/right-arrow.svg" alt="arrow-right">
+                <!-- <img class="icon serious-language" src="images/right-arrow.svg" alt="arrow-right"> -->
             </button>
         </div>
 
-        <section class="books">
+        <section class="books" id="books">
             <h2>Algunos libros que Recomiendo</h2>
             <div class="book-cards">
                 <div class="card">
@@ -99,31 +102,21 @@ <h3>El dinero</h3>
                             historia.</p>
                     </div>
                 </div>
-
-
-                <!-- Puedes agregar más tarjetas aquí -->
             </div>
         </section>
 
 
-        <section class="game">
+        <section class="game" id="game">
             <h2 style="font-size: 2rem;">¡Relajate un poco flaco!</h2>
             <p>
-                ¡Tómate un descanso y disfruta de este divertido juego, <strong>Lumberjack</strong>. Jugalo y mandame captura a este correo: <br><br>
-
-                Si estás en <strong>PC</strong>, puedes usar:<br>
-
-                <strong>Flecha Izquierda del Teclado</strong><br>
-                <strong>Flecha Derecha del Teclado</strong> <br><br>
-
-                ¡Así que todo se puede hacer con el teclado! 🔥 <br>(si no bueno, tampoco es tan dificil).
+                ¡Tómate un descanso y disfruta de este divertido juego, <strong>Lumberjack</strong>.
             </p>
 
             <iframe src="https://tbot.xyz/lumber/" width="100%" height="400" style="border: none;"
                 title="Lumberjack Bot"></iframe>
         </section>
 
-        <section class="community-stacks">
+        <section class="community-stacks" id="community">
             <h2>Programando Stacks Bizarros</h2>
             <p style="max-width: 900px; align-items: center; text-align: center; margin: auto;">
                 En mis streams, reunimos letras aleatorias propuestas por la comunidad y creamos stacks tecnológicos
@@ -217,6 +210,53 @@ <h2>¡Conéctate Conmigo!</h2>
             </ul>
         </section>
 
+
+        <div id="st-2" class=" st-sticky-share-buttons st-left st-toggleable st-has-labels ">
+            <div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
+                <a href="#home" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de facebook" class="icon">
+                </a>
+                <span class="st-label">Yo</span>
+            </div>
+
+            <div class="st-btn" data-network="twitter" style="display: inline-block;">
+                <a href="#about" style="text-decoration: none;">
+                    <img src="images/cucumber.webp" alt="Ícono de twitter" class="icon">
+                </a>
+                <span class="st-label">Quien</span>
+            </div>
+
+            <div class="st-btn" data-network="linkedin" style="display: inline-block;">
+                <a href="#books" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de linkedin" class="icon">
+                </a>
+                <span class="st-label">Libro</span>
+            </div>
+            <div class="st-btn" data-network="messenger" style="display: inline-block;">
+                <a href="#game" style="text-decoration: none;">
+                    <img src="images/cucumber.webp" alt="Ícono de messenger" class="icon">
+                </a>
+                <span class="st-label">Juego</span>
+            </div>
+            <div class="st-btn st-last" data-network="whatsapp" style="display: inline-block;">
+                <a href="#community" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de messenger" class="icon">
+                </a>
+                <span class="st-label">Raro</span>
+
+            </div>
+
+            <div class="st-toggle">
+                <div class="st-left">
+                    <a href="#home" style="text-decoration: none;">
+                        <img alt="arrow_left sharing button" src="https://platform-cdn.sharethis.com/img/arrow_left.svg">
+                    </a>
+                </div>
+                <div class="st-right">
+                    <img alt="arrow_right sharing button" src="https://platform-cdn.sharethis.com/img/arrow_right.svg">
+                </div>
+            </div>
+        </div>
         <footer class="footer">
             <p>Hecho con
                 <img src="images/pickle.svg" alt="Pepino" class="icon">por <a
diff --git a/DotDager/indexEN.html b/DotDager/indexEN.html
index 41ee95c..aaae466 100644
--- a/DotDager/indexEN.html
+++ b/DotDager/indexEN.html
@@ -8,17 +8,19 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="styles/side-bar.css">
+
 </head>
 
 <body>
     <div class="container">
 
         <!-- Banner -->
-        <div class="banner">
+        <div class="banner" id="home">
             <h1 class="name">Dot Dager</h1>
             <p class="tagline">Content Creator | Programming Philanthropist | Movie Reviewer | Cat Lover | Guitarist |
                 Passionate for Pickles</p>
-            <img src="images/dager5.jpg" alt="Banner de Dot Dager" class="banner-image">
+            <img style="border-radius: 15px;" src="images/dager5.jpg" alt="Banner de Dot Dager" class="banner-image">
         </div>
 
         <button id="toggle-music">
@@ -29,7 +31,7 @@ <h1 class="name">Dot Dager</h1>
             </svg>
         </button>
 
-        <section class="about">
+        <section class="about" id="about">
             <h2>About Me</h2>
             <p style="max-width: 900px; align-items: center; text-align: center; margin: auto;">
                 Hi! My name is Mariano Villa, and even though my philosophical background makes me want to delve into
@@ -63,7 +65,7 @@ <h2>About Me</h2>
             </button>
         </div>
 
-        <section class="books">
+        <section class="books" id="books">
             <h2>Some books I Recommend</h2>
             <div class="book-cards">
                 <div class="card">
@@ -96,7 +98,7 @@ <h3>El dinero</h3>
             </div>
         </section>
 
-        <section class="game">
+        <section class="game" id="game">
             <h2>Play a Game!</h2>
             <p>
                 Take a break and enjoy this fun game, <strong>Lumberjack Bot</strong>. Chop some wood while you're
@@ -115,7 +117,7 @@ <h2>Play a Game!</h2>
             </iframe>
         </section>
 
-        <section class="community-stacks">
+        <section class="community-stacks" id="community">
             <h2>Community Stack Ideas</h2>
             <p style="max-width: 900px; align-items: center; text-align: center; margin: auto;">
                 On my streams, I gather random letters proposed by the community and build tech stacks around them.
@@ -191,6 +193,54 @@ <h2>Connect with Me!</h2>
                 </li>
             </ul>
         </section>
+
+        <div id="st-2" class=" st-sticky-share-buttons st-left st-toggleable st-has-labels ">
+            <div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
+                <a href="#home" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de facebook" class="icon">
+                </a>
+                <span class="st-label">Yo</span>
+            </div>
+
+            <div class="st-btn" data-network="twitter" style="display: inline-block;">
+                <a href="#about" style="text-decoration: none;">
+                    <img src="images/cucumber.webp" alt="Ícono de twitter" class="icon">
+                </a>
+                <span class="st-label">Quien</span>
+            </div>
+
+            <div class="st-btn" data-network="linkedin" style="display: inline-block;">
+                <a href="#books" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de linkedin" class="icon">
+                </a>
+                <span class="st-label">Libro</span>
+            </div>
+            <div class="st-btn" data-network="messenger" style="display: inline-block;">
+                <a href="#game" style="text-decoration: none;">
+                    <img src="images/cucumber.webp" alt="Ícono de messenger" class="icon">
+                </a>
+                <span class="st-label">Juego</span>
+            </div>
+            <div class="st-btn st-last" data-network="whatsapp" style="display: inline-block;">
+                <a href="#community" style="text-decoration: none;">
+                    <img src="images/logo-dotdager.png" alt="Ícono de messenger" class="icon">
+                </a>
+                <span class="st-label">Raro</span>
+
+            </div>
+
+            <div class="st-toggle">
+                <div class="st-left">
+                    <a href="#home" style="text-decoration: none;">
+                        <img alt="arrow_left sharing button" src="https://platform-cdn.sharethis.com/img/arrow_left.svg">
+                    </a>
+                </div>
+                <div class="st-right">
+                    <img alt="arrow_right sharing button" src="https://platform-cdn.sharethis.com/img/arrow_right.svg">
+                </div>
+            </div>
+        </div>
+
         <footer class="footer">
             <p>Made with
                 <img src="images/pickle.svg" alt="Pepino" class="icon">by <a style="text-decoration: none; color: #ffffff;"
diff --git a/DotDager/styles/side-bar.css b/DotDager/styles/side-bar.css
new file mode 100644
index 0000000..d4253d4
--- /dev/null
+++ b/DotDager/styles/side-bar.css
@@ -0,0 +1,372 @@
+#st-2 {
+    font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
+    ;
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    backface-visibility: hidden;
+    display: block;
+    position: fixed;
+    opacity: 1;
+    text-align: left;
+    top: 160px;
+    z-index: 94034;
+  }
+  
+  #st-2.st-left {
+    left: 0px;
+  }
+  
+  #st-2.st-hidden.st-left {
+    left: -48px;
+  }
+  
+  #st-2.st-hidden {
+    width: 96px;
+  }
+  
+  #st-2>div {
+    clear: left;
+    float: left;
+  }
+  
+  #st-2 .st-btn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    font-size: NaNpx;
+    height: 48px;
+    line-height: 24px;
+    margin-bottom: 0;
+    opacity: 1;
+    overflow: hidden;
+    padding: 12px;
+    position: relative;
+    text-align: left;
+    top: 0;
+    vertical-align: top;
+    white-space: nowrap;
+    width: 48px;
+  }
+  
+  #st-2 .st-btn.st-first {
+    border-top: none;
+    border-top-right-radius: 10px;
+  }
+  
+  #st-2 .st-btn.st-last {
+    border-bottom: none;
+    border-bottom-right-radius: 10px;
+  }
+  
+  #st-2 .st-btn>svg {
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    height: 24px;
+    margin-left: 0;
+    vertical-align: top;
+    width: 24px;
+  }
+  
+  #st-2 .st-btn>img {
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    height: 24px;
+    margin-left: 0;
+    vertical-align: top;
+    width: 24px;
+  }
+  
+  #st-2 .st-btn>span {
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    color: #fff;
+    display: inline-block;
+    font-weight: 500;
+    left: -35px;
+    letter-spacing: 0.5px;
+    opacity: 0;
+    padding: 0 6px;
+    position: relative;
+    vertical-align: top;
+    filter: alpha(opacity=0);
+  }
+  
+  #st-2 .st-btn.st-hide-label>span {
+    display: none !important;
+  }
+  
+  #st-2 .st-total {
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    background: #fff;
+    color: #555;
+    display: inline-block;
+    font-weight: 500;
+    line-height: 18px;
+    margin-right: 0;
+    min-height: 34px;
+    max-width: 80px;
+    opacity: 1;
+    padding: 4px 0;
+    text-align: center;
+    width: 48px;
+  }
+  
+  #st-2 .st-total.st-hidden {
+    display: none;
+  }
+  
+  #st-2 .st-total>span {
+    display: block;
+    font-size: 18px;
+    line-height: 21px;
+    padding: 0;
+  }
+  
+  #st-2 .st-total>span.st-shares {
+    font-size: 11px;
+    line-height: 11px;
+  }
+  
+  #st-2 .st-toggle {
+    left: -48px;
+    -moz-transition: all 0.2s ease-in;
+    -ms-transition: all 0.2s ease-in;
+    -o-transition: all 0.2s ease-in;
+    -webkit-transition: all 0.2s ease-in;
+    transition: all 0.2s ease-in;
+    background: #ccc;
+    border-bottom-right-radius: 10px;
+    color: white;
+    cursor: pointer;
+    font-size: 24px;
+    line-height: 24px;
+    position: relative;
+    text-align: center;
+    width: 48px;
+  }
+  
+  #st-2.st-hidden .st-toggle {
+    border-top-right-radius: 10px;
+  }
+  
+  #st-2.st-left .st-toggle .st-left {
+    display: inline-block;
+  }
+  
+  #st-2.st-left.st-hidden .st-toggle .st-left {
+    display: none;
+  }
+  
+  #st-2.st-left .st-toggle .st-right {
+    display: none;
+  }
+  
+  #st-2.st-left.st-hidden .st-toggle .st-right {
+    display: inline-block;
+  }
+  
+  #st-2:hover .st-toggle {
+    left: 0;
+  }
+  
+  #st-2.st-hidden:hover .st-toggle {
+    left: 48px;
+  }
+  
+  #st-2.st-toggleable:hover .st-btn.st-last {
+    border-bottom-right-radius: 0;
+  }
+  
+  #st-2.st-toggleable:hover .st-btn.st-last:hover {
+    border-bottom-right-radius: 10px;
+  }
+  
+  #st-2 .st-btn:hover {
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  
+  #st-2.st-has-labels .st-btn:hover {
+    width: 120px;
+  }
+  
+  #st-2:not(.st-has-labels) .st-btn:hover {
+    width: 62px;
+  }
+  
+  #st-2 .st-btn.st-hide-label:hover {
+    width: 62px;
+  }
+  
+  #st-2 .st-btn:hover>svg {
+    margin-left: 5px;
+  }
+  
+  #st-2 .st-btn:hover>img {
+    margin-left: 5px;
+  }
+  
+  #st-2 .st-btn:hover>span {
+    opacity: 1;
+    display: inline-block;
+    left: 0;
+    filter: alpha(opacity=100);
+  }
+  
+  @media (max-width: 1024px) {
+    #st-2 .st-btn:hover>svg {
+      margin-left: 0;
+    }
+  
+    #st-2 .st-btn:hover>span {
+      display: none;
+    }
+  }
+  
+  @media (max-width: 1024px) {
+    #st-2 {
+      bottom: 0;
+      display: flex;
+      left: 0;
+      right: 0;
+      top: auto;
+      width: 100%;
+    }
+  
+    #st-2.st-hidden {
+      bottom: -48px;
+      width: 100%;
+    }
+  
+    #st-2.st-hidden.st-left {
+      left: 0;
+    }
+  
+    #st-2.st-hidden.st-right {
+      right: 0;
+    }
+  
+    #st-2>div {
+      -moz-flex: 1;
+      -ms-flex: 1;
+      -webkit-flex: 1;
+      clear: none;
+      flex: 1;
+      float: none;
+    }
+  
+    #st-2 .st-total {
+      background: #fff;
+      padding: 6px 8px;
+    }
+  
+    #st-2 .st-btn {
+      -moz-border-radius: 0 !important;
+      -webkit-border-radius: 0 !important;
+      border-radius: 0 !important;
+      text-align: center;
+      width: auto;
+    }
+  
+    #st-2 .st-btn>span {
+      display: none;
+    }
+  
+    #st-2 .st-toggle {
+      display: none;
+    }
+  
+    body {
+      padding-bottom: 48px;
+    }
+  }
+  
+  #st-2 .st-btn[data-network='facebook'] {
+    background-color: #6f8c64
+  }
+  
+  #st-2 .st-btn[data-network='facebook'] img {
+    filter: none
+  }
+  
+  #st-2 .st-btn[data-network='facebook']>span {
+    color: #fff
+  }
+  
+  #st-2 .st-btn[data-network='twitter'] {
+    background-color: #6f8c64
+  }
+  
+  #st-2 .st-btn[data-network='twitter'] img {
+    filter: none
+  }
+  
+  #st-2 .st-btn[data-network='twitter']>span {
+    color: #fff
+  }
+  
+  #st-2 .st-btn[data-network='linkedin'] {
+    background-color: #6f8c64
+  }
+  
+  #st-2 .st-btn[data-network='linkedin'] img {
+    filter: none
+  }
+  
+  #st-2 .st-btn[data-network='linkedin']>span {
+    color: #fff
+  }
+  
+  #st-2 .st-btn[data-network='messenger'] {
+    background-color: #6f8c64
+  }
+  
+  #st-2 .st-btn[data-network='messenger'] img {
+    filter: none
+  }
+  
+  #st-2 .st-btn[data-network='messenger']>span {
+    color: #fff
+  }
+  
+  #st-2 .st-btn[data-network='whatsapp'] {
+    background-color: #6f8c64
+  }
+  
+  #st-2 .st-btn[data-network='whatsapp'] img {
+    filter:none
+  }
+  
+  #st-2 .st-btn[data-network='whatsapp']>span {
+    color: #fff
+  }
+  
+  #st-2 .st-btn[data-network='snapchat']>span {
+    color: #333
+  }
+  
+  
\ No newline at end of file
diff --git a/DotDager/styles/styles.css b/DotDager/styles/styles.css
index fd16204..87c2f3c 100644
--- a/DotDager/styles/styles.css
+++ b/DotDager/styles/styles.css
@@ -3,6 +3,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -534,3 +535,4 @@ iframe {
 #toggleButton:hover {
   background-color: #36c9aa;
 }
+