Implement basic modal animation

public/main.css

@@ -1,25 +1,70 @@
+* {
+  box-sizing: border-box;
+}
+
 html, body {
     margin: 0px;
     height: 100%;
 }
 
+.modal.background {
+    background-image: url('/tip.jpg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+
+.modal.content {
+    width: 95%;
+}
+
+.modal.box {
+    background-color: #A9D0F5;
+    border-radius: 15px;
+    text-align: center;
+    margin: 6em auto;
+    width: 50%;
+    -webkit-animation-name: from_top;
+    -webkit-animation-duration: 1.5s;
+    animation-name: from_top;
+    animation-duration: 1.5s;
+}
+
 #video {
     background-image: url('/willpower.gif');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 100%;
+    width: 100%;
+    z-index: 255;
+    position: absolute;
+    display: none;
 }
 
-.modal.background {
+@-webkit-keyframes from_top {
-    z-index: 10;
+    from {
-    background-image: url('/tip.jpg');
+        margin: -6em auto;
-    background-position: center;
+        opacity: 0;
-    background-repeat: no-repeat;
+    }
-    background-size: cover;
+
-    height: 100%;
+    to {
+        margin: 6em auto;
+        opacity: 1;
+    }
 }
 
-.modal.content {
+@keyframes from_top {
+    from {
+        margin: -6em auto;
+        opacity: 0;
+    }
 
+    to {
+        margin: 6em auto;
+        opacity: 1;
+    }
 }

views/index.erb

@@ -1,4 +1,8 @@
-<div class="modal background"></div>
+<div class="modal background">
+  <div class="modal box">
+    <p>Ayy... lmao</p>
+  </div>
+</div>
 <div id="video"></div>
 <audio id="soundtrack" preload="auto" loop>
   <source src="/willpower.mp3" type="audio/mpeg">