diff --git a/src/thsf/static/css/wemakeporn.css b/src/thsf/static/css/wemakeporn.css
index 2a936f7..2349d1f 100644
--- a/src/thsf/static/css/wemakeporn.css
+++ b/src/thsf/static/css/wemakeporn.css
@@ -1,27 +1,58 @@
-.wemakeporn {
-  background-color: #FFD036;
-  color: #000000;
-  font-family: Arial, Helvetica, sans-serif;
-  border-radius: 1em;
-  border-width: 1em;
-  border-style: solid;
-  display: flex;
-  flex-direction: column;
-  padding: 0.5em;
-  transform: rotate(-20deg) translate(2em, -6em);
-  visibility: hidden;
-  position: fixed;
-}
-.wemakeporn:hover{
-  cursor: default;
-}
+@media screen and (min-width: 45em) {
+  .wemakeporn {
+    background-color: #FFD036;
+    color: #000000;
+    font-family: Arial, Helvetica, sans-serif;
+    border-radius: 1em;
+    border-width: 1em;
+    border-style: solid;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+    transform: rotate(-20deg) translate(2em, -6em);
+    visibility: hidden;
+    position: fixed;
+  }
+  .wemakeporn:hover{
+    cursor: default;
+  }
 
-.wemake {
-  font-size: 7em;
-  font-weight: bold;
-}
+  .wemake {
+    font-size: 7em;
+    font-weight: bold;
+  }
 
-.porn {
-  font-size: 12em;
-  font-weight: bold;
+  .porn {
+    font-size: 12em;
+    font-weight: bold;
+  }
+}
+@media screen and (max-width: 44em) {
+  .wemakeporn {
+    background-color: #FFD036;
+    color: #000000;
+    font-family: Arial, Helvetica, sans-serif;
+    border-radius: 1em;
+    border-width: 1em;
+    border-style: solid;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+    transform: rotate(-20deg) translate(2em, -6em);
+    visibility: hidden;
+    position: fixed;
+  }
+  .wemakeporn:hover{
+    cursor: default;
+  }
+
+  .wemake {
+    font-size: 3.5em;
+    font-weight: bold;
+  }
+
+  .porn {
+    font-size: 6em;
+    font-weight: bold;
+  }
 }