Adjust curtain margins

1 files changed, 67 insertions, 59 deletions

diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 57ebccc..8f31726 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -425,11 +425,11 @@ body > footer {
     .media #gfx {
 	background: rgba(191, 138, 112,0.7);
 	transform: rotate(-4deg);
-	margin: 0 -3vw 0 0;
+	margin: 0 -3vw 0 -2vw;
 	left: 0;
 
 	h3 {
-	    transform: rotate(4deg) translateX(1vw);
+	    transform: rotate(4deg) translateX(3vw);
 	    font-size: 5rem;
 	}
 
@@ -443,7 +443,7 @@ body > footer {
 	&:hover {
 	    background: rgba(191, 138, 112, 0.9);
 	    transform: rotate(0);
-	    margin: 0;
+	    margin: 1vw 0 0 0;
 	    color: black;
 	    padding: 1rem;
 
@@ -471,23 +471,29 @@ body > footer {
 
     .media #txt {
 	background: rgba(166, 191, 112, 0.7);
-	transform: rotate(6deg);
-	margin: 0 -3vw 0 0;
+	transform: rotate(6deg) translateX(-1.5vw);
+	margin: 1vw -3vw 0 0;
 	color: transparent;
+
+	h3 {
+	    transform: rotate(-6deg) translateX(1.5vw) translateY(-1.2rem);
+	    margin-left: -1vw;
+	}
+
+	&:hover {
+	    background: rgba(166, 191, 112, 0.9);
+	    transform: rotate(0);
+	    margin: 1vw 0 0 0;
+	    color: black;
+	    padding: 1rem;
+
+	    h3 {
+		transform: rotate(0) translateX(0) translateY(-4rem);
+		margin-left: 0;
+	    }
+	}
     }
-    .media #txt h3 {
-	transform: rotate(-6deg) translateX(-3vw) translateY(-0.1rem);
-    }
-    .media #txt:hover {
-	background: rgba(166, 191, 112, 0.9);
-	transform: rotate(0);
-	margin: 0;
-	color: black;
-	padding: 1rem;
-    }
-    .media #txt:hover h3 {
-	transform: rotate(0) translateX(0) translateY(-4.1rem);
-    }
+
     .media section h3 a {
 	position: relative;
 	display: block;
@@ -512,52 +518,54 @@ body > footer {
     .media #vda {
 	left: 0;
 	background: rgba(112, 166, 191, 0.5);
-	transform: rotate(-5deg);
-	margin: 0 0 0 -2vw;
-	width: 10vw;
+	transform: rotate(-2.5deg) translateX(1vw);
+	margin: 0 0 0 -3vw;
+	width: 12.5vw;
+
+	h3 {
+	    padding-left: 1.5vw;
+	    transform: rotate(2.5deg) translateX(-1vw);
+	    font-size: 5rem;
+	}
 
 	p, h4 {
 	    display: none;
 	}
-    }
-    .media #vdo video,
-    .media #vda video {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	min-width: 100%;
-	min-height: 100%;
-	width: auto;
-	height: auto;
-	transform: translate(-50%, -50%);
-	z-index: -101;
-	opacity: 0.1;
-    }
-    .media #vdo:hover video,
-    .media #vda:hover video {
-	opacity: 1;
-    }
-    .media #vdo:hover,
-    .media #vda:hover {
-	background: rgba(112, 166, 191, 0.9);
-	margin: 0;
-	transform: rotate(0);
-	width: 40vw;
-    }
-    .media #vdo h3,
-    .media #vda h3 {
-	transform: rotate(5deg) translateX(-2vw);
-    }
-    .media #vdo:hover h3,
-    .media #vda:hover h3 {
-	transform: rotate(0) translateX(0) translateY(-5rem);
-	color: rgba(109, 144, 162, 0.7);
-	font-size: 18vw;
+    
+	video {
+	    position: absolute;
+	    top: 50%;
+	    left: 50%;
+	    min-width: 100%;
+	    min-height: 100%;
+	    width: auto;
+	    height: auto;
+	    transform: translate(-50%, -50%);
+	    z-index: -101;
+	    opacity: 0.2;
+	}
 
-	a {
-	    display: block;
-	    height: 100%;
-	    width: 100%;
+	&:hover {
+	    background: rgba(112, 166, 191, 0.9);
+	    margin: 0;
+	    transform: rotate(0);
+	    width: 40vw;
+
+	    h3 {
+		transform: rotate(0) translateX(0) translateY(-4rem);
+		color: rgba(109, 144, 162, 0.7);
+		font-size: 18vw;
+
+		a {
+		    display: block;
+		    height: 100%;
+		    width: 100%;
+		}
+	    }
+
+	    video {
+		opacity: 1;
+	    }
 	}
     }