diff --git a/public/style.css b/public/style.css
index ef5f17c..335019c 100644
--- a/public/style.css
+++ b/public/style.css
@@ -16,7 +16,7 @@ a {
 
 .content {
   text-align: center;
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: auto;
   width: 40%;
@@ -75,6 +75,9 @@ a {
   box-shadow: 18px 8px 0px black;
 }
 
+.linkimg img {
+  max-height: 25px;
+}
 [class*="content-social-link"]:hover .linkimg{
     filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
 }
@@ -102,9 +105,9 @@ a {
   width: 100%;
   background: white;
   text-align: center;
-  position: fixed;
   height: 28px;
   bottom: 0;
+  display: fixed;
 }
 
 .footer .copyleft {
@@ -141,6 +144,96 @@ p {
 }
 
 .emptybox {
-  height: 30vw;
+  height: 10vw;
   width: 100%;
 }
+
+/* Rules for mobile devises */
+
+@media (pointer:coarse) {
+  .content {
+    width: 100%;
+  }
+
+  .content-social-profile img {
+    margin-top: 80px;
+    border-radius: 50%;
+    z-index: 1;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100%;
+    position: relative;
+  }
+
+  [class*="content-social-link"] {
+    background: white;
+    color: black;
+    padding: 2px;
+    margin-bottom: 15px;
+    border-style: solid;
+    border-color: black;
+    box-shadow: 8px 8px 0px black;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .content {
+    text-align: center;
+    font-family: sans;
+    text-transform: uppercase;
+  }
+
+  [class*="content-social-link"] {
+    height: 100px;
+    width: 90%;
+  }
+
+  .linktxt {
+    color: black;
+    line-height: 100px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: xxx-large;
+  }
+
+  .content-social-name {
+    font-weight: bold;
+    font-family: sans;
+    text-transform: uppercase;
+    font-size: xxx-large;
+    margin-top: 40px;
+  }
+
+  .content-social-desc {
+    font-weight: bold;
+    font-family: sans;
+    font-size: xx-large;
+    text-transform: uppercase;
+  }
+
+  .emptybox {
+    height: 10vw;
+    width: 100%;
+  }
+
+  .linkimg img{
+    max-height: 80px;
+    filter: invert(20%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
+  }
+  
+  .footer {
+    height: 100px;
+  }
+  
+  a2 {
+    font-size: xx-large;
+  }
+  
+  .footer .copyleft {
+  margin: auto;
+  width: 80%;
+  line-height: 100px;
+  }
+}
diff --git a/static/style.css b/static/style.css
index ef5f17c..335019c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,7 +16,7 @@ a {
 
 .content {
   text-align: center;
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: auto;
   width: 40%;
@@ -75,6 +75,9 @@ a {
   box-shadow: 18px 8px 0px black;
 }
 
+.linkimg img {
+  max-height: 25px;
+}
 [class*="content-social-link"]:hover .linkimg{
     filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
 }
@@ -102,9 +105,9 @@ a {
   width: 100%;
   background: white;
   text-align: center;
-  position: fixed;
   height: 28px;
   bottom: 0;
+  display: fixed;
 }
 
 .footer .copyleft {
@@ -141,6 +144,96 @@ p {
 }
 
 .emptybox {
-  height: 30vw;
+  height: 10vw;
   width: 100%;
 }
+
+/* Rules for mobile devises */
+
+@media (pointer:coarse) {
+  .content {
+    width: 100%;
+  }
+
+  .content-social-profile img {
+    margin-top: 80px;
+    border-radius: 50%;
+    z-index: 1;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100%;
+    position: relative;
+  }
+
+  [class*="content-social-link"] {
+    background: white;
+    color: black;
+    padding: 2px;
+    margin-bottom: 15px;
+    border-style: solid;
+    border-color: black;
+    box-shadow: 8px 8px 0px black;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .content {
+    text-align: center;
+    font-family: sans;
+    text-transform: uppercase;
+  }
+
+  [class*="content-social-link"] {
+    height: 100px;
+    width: 90%;
+  }
+
+  .linktxt {
+    color: black;
+    line-height: 100px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: xxx-large;
+  }
+
+  .content-social-name {
+    font-weight: bold;
+    font-family: sans;
+    text-transform: uppercase;
+    font-size: xxx-large;
+    margin-top: 40px;
+  }
+
+  .content-social-desc {
+    font-weight: bold;
+    font-family: sans;
+    font-size: xx-large;
+    text-transform: uppercase;
+  }
+
+  .emptybox {
+    height: 10vw;
+    width: 100%;
+  }
+
+  .linkimg img{
+    max-height: 80px;
+    filter: invert(20%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
+  }
+  
+  .footer {
+    height: 100px;
+  }
+  
+  a2 {
+    font-size: xx-large;
+  }
+  
+  .footer .copyleft {
+  margin: auto;
+  width: 80%;
+  line-height: 100px;
+  }
+}
diff --git a/templates/index.html b/templates/index.html
index df8807a..7269ddc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,7 +39,7 @@
                 <a href="{{ links.link }}"></a>
               </div>
               <div class="{{ links.title }}-img">
-                <a class="linkimg" href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 25px; filter: invert(75%)"</img></a>
+                <a class="linkimg" href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 100%; filter: invert(75%)"</img></a>
               </div>
               <div class="{{ links.title }}-txt">
                 <a class="linktxt" href="{{ links.link }}"> {{ links.title }}</a><br>