1 files changed, 29 insertions, 5 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 901d135..d3b78c9 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -36,9 +36,33 @@ body {
   padding: 20px;
   background: white;
   z-index: 2;
+  overflow: hidden;
+}
+.back {
+  position: absolute;
+  top: 0; left: -60px;
+  padding: 20px;
+  text-decoration: none;
+  background-color: #8b8b8f;
+  color: white;
+  transition: left 400ms;
+}
+.back a {
+  color: white;
+  font-size: 24px;
+}
+.inner {
+  margin-left: 0;
+  transition: margin-left 400ms;
+}
+.inModal .back {
+  left: 0px;
+}
+.inModal .inner {
+  margin-left: 60px;
 }
 
-/* body */
+/* paintings */
 
 .cell {
   display: flex;
@@ -51,9 +75,6 @@ body {
 .cell:nth-child(6n+4) { background-color: hsl(190, 10%, 99%); }
 .cell:nth-child(6n+5) { background-color: hsl(260, 10%, 98%); }
 .cell:nth-child(6n+6) { background-color: hsl(310, 10%, 99%); }
-.scroller {
-  transition: transform 400ms;
-}
 .painting {
   display: flex;
   align-items: center;
@@ -85,7 +106,7 @@ body.inModal {
   top: 0; left: 0;
   width: 100vw;
   height: 100vh;
-  background: hsl(0, 10%, 98%);
+  background: hsl(0, 10%, 99%);
   transform: translate3d(100%,0,0);
   transition: transform 400ms;
   overflow: hidden;
@@ -133,6 +154,9 @@ a {
 }
 
 @media (max-width: 700px) {
+  .inModal .inner {
+    margin-left: 0px;
+  }
   .header {
     width: 100%;
     text-align: center;