Springy

style.css

@@ -5,13 +5,18 @@ body {
 
 .wrapper {
   max-width: 70em;
+  height: 100%;
   margin: 0 auto;
   background-color: #FFC63F;
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px;
 }
 
 .items {
   list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 .items > li {
@@ -19,19 +24,20 @@ body {
 }
 
 .items > li a {
-  width: 8em;
-  height: 8em;
+  width: 120px;
+  height: 120px;
   background: #D66C00;
-  margin: 2em;
-  border-radius: 4em;
+  border-radius: 60px;
   display: block;
 }
 
 .items > li a:hover {
-  background: #f39a3f;
+  background-color: #f39a3f;
+  z-index: 1;
 }
 
 .items > li.face-up a {
+  background-size: cover;
   background-color: #ed8112;
 }
 
@@ -48,8 +54,10 @@ body {
 }
 .fullview > div {
   background-color: #858c8f;
-  width: 20em;
-  margin: 5em auto;
-  position: relative;
-  height: 30em;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 40em;
+  min-height: 30em;
 }