1 files changed, 79 insertions, 85 deletions

diff --git a/style/style.css b/style/style.css
index 0b0ef38..0a4257c 100644
--- a/style/style.css
+++ b/style/style.css
@@ -32,6 +32,16 @@ h1, #header {
 @media only screen and (max-width: 75em) {
   #searchbox input[type=text] { width: 45vw !important; }
 }
+@media only screen and (max-width: 950px) {
+  #wallmaster #wallpaperinfo, #wallmaster #bwallpaperview {
+    width: inherit;
+    height: auto;
+    padding: 0 !important;
+    margin: 0 !important;
+    div, details { padding: 5px 10px 5px 10px; }
+  }
+  #wallmaster #wallpaperinfo { margin: 25px 0 0 0 !important; }
+}
 
 #searchbox {
   text-align: center;
@@ -95,85 +105,86 @@ h1, #header {
   overflow: auto;
   background-color: #1a1a1a;
   color: #fff;
-}
 
-#uploader { text-align: center; }
-#uploader span[title='Owner/Developer'] {
-  font-weight: bold;
-  color: var(--owner-color-1);
-  text-shadow: 0 0 2px var(--owner-color-1), 0 0 5px var(--owner-color-2);
-}
-#uploader span[title=Developer] {
-  font-weight: bold;
-  color: var(--developer-color-1);
-}
-#uploader span[title=Administrator] {
-  font-weight: bold;
-  color: var(--admin-color-1);
-}
-#uploader span[title=User] { color: var(--user-color-1); }
-#uploader span[title=deleted] {
-  color: var(--deleted-color-1);
-  text-decoration: line-through;
-}
+  #uploader { text-align: center; }
+  #uploader span[title='Owner/Developer'] {
+    font-weight: bold;
+    color: var(--owner-color-1);
+    text-shadow: 0 0 2px var(--owner-color-1), 0 0 5px var(--owner-color-2);
+  }
+  #uploader span[title=Developer] {
+    font-weight: bold;
+    color: var(--developer-color-1);
+  }
+  #uploader span[title=Administrator] {
+    font-weight: bold;
+    color: var(--admin-color-1);
+  }
+  #uploader span[title=User] { color: var(--user-color-1); }
+  #uploader span[title=deleted] {
+    color: var(--deleted-color-1);
+    text-decoration: line-through;
+  }
 
-a#similar {
-  text-decoration: underline;
-  color: inherit;
-  float: right;
-}
+  a#similar {
+    text-decoration: underline;
+    color: inherit;
+    float: right;
+  }
 
-#tags span {
-  white-space: nowrap;
-  line-height: 1.8;
-}
-#tags span a { color: #000; }
-#tags span[id=sfw], #properties span[id=sfw] {
-  color: #000;
-  background-color: var(--sfw-color-1);
-  border: 3px solid var(--sfw-color-2);
-}
-#tags span[id=sketchy], #properties span[id=sketchy] {
-  color: #000;
-  background-color: var(--sketchy-color-1);
-  border: 3px solid var(--sketchy-color-2);
-}
-#tags span[id=nsfw], #properties span[id=nsfw] {
-  color: #000;
-  background-color: var(--nsfw-color-1);
-  border: 3px solid var(--nsfw-color-2);
-}
+  #tags span {
+    white-space: nowrap;
+    line-height: 1.8;
+  }
+  #tags span a { color: #000; }
+  #tags span[id=sfw], #properties span[id=sfw] {
+    color: #000;
+    background-color: var(--sfw-color-1);
+    border: 3px solid var(--sfw-color-2);
+  }
+  #tags span[id=sketchy], #properties span[id=sketchy] {
+    color: #000;
+    background-color: var(--sketchy-color-1);
+    border: 3px solid var(--sketchy-color-2);
+  }
+  #tags span[id=nsfw], #properties span[id=nsfw] {
+    color: #000;
+    background-color: var(--nsfw-color-1);
+    border: 3px solid var(--nsfw-color-2);
+  }
 
-#properties p { color: #ccf; }
-#tags a, summary { user-select: none; }
-#properties span {
-  color: #fff;
-  float: right;
+  #properties p { color: #ccf; }
+  #tags a, summary { user-select: none; }
+  #properties span {
+    color: #fff;
+    float: right;
+  }
 }
 
+
 #bwallpaperview {
-  float: left;
+  float: right;
   width: 75%;
   height: 100%;
   overflow: scroll;
-}
 
-#bwallpaperview img {
-  cursor: zoom-in;
-  max-width: 75%;
-  max-height: 78vh;
-  width: auto;
-  height: auto;
-  display: block;
-  margin: 0 auto auto auto;
-  inset: 0;
-}
+  img {
+    cursor: zoom-in;
+    max-width: 75%;
+    max-height: 78vh;
+    width: auto;
+    height: auto;
+    display: block;
+    margin: 0 auto auto auto;
+    inset: 0;
+  }
 
-#bwallpaperview input[type=checkbox]:checked~img {
-  cursor: zoom-out;
-  max-height: 100000000%;
-  max-width: 100000000%;
-  width: 150%;
+  input[type=checkbox]:checked~img {
+    cursor: zoom-out;
+    max-height: 100000000%;
+    max-width: 100000000%;
+    width: 150%;
+  }
 }
 
 #footer {
@@ -231,28 +242,11 @@ input[id=General]:checked + label:hover,
 input[id=Anime]:checked + label:hover,
 input[id=People]:checked + label:hover { border: 3px solid #afafaf; }
 
-/* search box */
-input[type=text] {
-  padding: 5px;
-  width: 42vw;
-  box-sizing: border-box;
-  border: 3px solid #ccc;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-  outline: none;
-}
-input[type=text]:focus {
-  border: 3px solid #555;
-}
-
 a {
   text-decoration: none;
   color: #fff;
 }
-
-a:hover {
-  font-style: italic;
-}
+a:hover { font-style: italic; }
 
 #error { color: var(--nsfw-color-1); }
 #warn { color: var(--sketchy-color-1); }