From 6e0ba79501826a90ef766ae00f1fc0fc9f42530a Mon Sep 17 00:00:00 2001
From: EntranceJew <EntranceJew@gmail.com>
Date: Fri, 9 Aug 2019 03:13:04 -0400
Subject: [PATCH] fix border box perspective + indentation

if you add the .area-container class to everything that's green you could reuse the parts that define the border box

if you made the units 1em you could change everything in proportion to the `font-size` defined on that element even if it isn't using any text
---
 src/css/styles.css | 140 ++++++++++++++++++++++++---------------------
 1 file changed, 74 insertions(+), 66 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index e1280bc..bac8aa6 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -12,7 +12,7 @@
     border: 1px solid;
     border-radius: 200px;
     background-color: lightgrey;
-    box-shadow: -10px -20px 1px darkgrey, -12px -22px 1px black;
+    box-shadow: 0px 20px 1px darkgrey, 0px 24px 0px black;
 }
 
 .butt {
@@ -73,7 +73,7 @@
     border: 2px solid;
     border-radius: 200px;
     background-color: lightblue;
-    box-shadow: -10px -10px 1px #68828a, -13px -13px 1px black;
+    box-shadow: 0px 10px 1px #68828a, 0px 14px 1px black;
 }
 
 #Abuttonimg {
@@ -123,7 +123,7 @@
     top: 20%;
     background-color: lightgreen;
     z-index: -100;
-    box-shadow: -10px -10px 1px darkseagreen, -11px -11px 1px black;
+    box-shadow: 0px 16px 1px darkseagreen, 0px 20px 1px black;
 }
 
 .small{
@@ -179,94 +179,102 @@ display: flex;
     25%{
         transform: translate(-50px, -100px);
     }
-        100%{
+    100%{
       transform: translate(10px, 1000px);  
+    }    
+}
+
+@keyframes failure2{
+    0%{
+        transform: translate(0px, 0px);
     }
-    
+    25%{
+        transform: translate(50px, -100px);
     }
-    @keyframes failure2{
-        0%{
-            transform: translate(0px, 0px);
-        }
-        25%{
-            transform: translate(50px, -100px);
-        }
-            100%{
-          transform: translate(-30px, 1000px);  
-        }
-        
-        }
-        
-    @keyframes failure3{
-        0%{
-            transform: translate(0px, 0px);
-        }
-        25%{
-            transform: translate(-50px, -100px);
-        }
-            100%{
-          transform: translate(60px, 1000px);  
-        }
+    100%{
+      transform: translate(-30px, 1000px);  
+    }
+}
         
-        }
+@keyframes failure3{
+    0%{
+        transform: translate(0px, 0px);
+    }
+    25%{
+        transform: translate(-50px, -100px);
+    }
+    100%{
+      transform: translate(60px, 1000px);  
+    }        
+}
+
 .animated:nth-of-type(1n){
-animation-name: failure;
-animation-duration: 1s;
-animation-iteration-count: 1;
-transition: ease;
+    animation-name: failure;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    transition: ease;
 }
+
 .animated:nth-of-type(2n){
-animation-name:failure2;
-animation-duration: 1s;
-animation-iteration-count: 1;
-transition: ease;
+    animation-name:failure2;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    transition: ease;
 }
+
 .animated:nth-of-type(3n){
     animation-name:failure3;
     animation-duration: 1s;
     animation-iteration-count: 1;
     transition: ease;
 }
+
 body{
     overflow: hidden;
 }
+
 #gamemenu{
     z-index: 1;
     padding: 25px;
-height: 100px;
-width: 750px;
-position: absolute;
-border: 1px solid;
-border-radius: 50px;
-left: 5%;
-bottom: 5%;
-background-color: lightgreen;
-box-shadow: -10px -10px 1px darkseagreen, -11px -11px 1px black;
+    height: 100px;
+    width: 750px;
+    position: absolute;
+    border: 1px solid;
+    border-radius: 50px;
+    left: 5%;
+    bottom: 5%;
+    background-color: lightgreen;
+    box-shadow: 0px 16px 1px darkseagreen, 0px 20px 1px black;
+}
+
+.area-container {
+    background-color: lightgreen;
+    box-shadow: 0px 16px 1px darkseagreen, 0px 20px 1px black;
 }
+
 .btn{
-height: 50px;
-width:125px;
-border-radius: 20px;
-font-weight: bold;
-margin-left: 75px;
-box-shadow: -5px -5px 1px darkseagreen, -5px -5px 1px black;
+    height: 50px;
+    width:125px;
+    border-radius: 20px;
+    font-weight: bold;
+    margin-left: 75px;
+    box-shadow: 0px 5px 1px darkseagreen, 0px 7px 1px black;
 }
 .emptyheart{
-background-image: url("./../media/heartempty.png");
-height: 50px;
-width: 50px;
-background-size: contain;
-background-repeat: no-repeat;
-display: inline-block;
+    background-image: url("./../media/heartempty.png");
+    height: 50px;
+    width: 50px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
 }
 .heartcontainers{
-height: 100px;
-width: 300px;
-background-size: stretch;
-
+    height: 100px;
+    width: 300px;
+    background-size: stretch;
 }
 .heartfull{
-height: 50px;
-width: 50px;  
-background-image: url("./../media/heartfull.png");  
-}
\ No newline at end of file
+    height: 50px;
+    width: 50px;  
+    background-image: url("./../media/heartfull.png");  
+}