Make things look a little better on mobile

public/main.css

@@ -1,116 +0,0 @@
-* {
-  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.box {
-    background-color: #A9D0F5;
-    border-radius: 15px;
-    border-style: solid;
-    border-color: #FFFFFF;
-    text-align: center;
-    width: 50%;
-    padding: 1em;
-    -webkit-animation-name: from_top;
-    -webkit-animation-duration: 1.5s;
-    animation-name: from_top;
-    animation-duration: 1.5s;
-    position: absolute;
-    left: 25%;
-    top: 25%;
-    z-index: 10;
-}
-
-.modal.button {
-    border-radius: 5px;
-    border: solid;
-    color: #FFFFFF;
-    font-size: 1em;
-    padding: 15px 25px;
-    text-align: center;
-    transition-duration: 0.3s;
-}
-
-.modal.button:hover {
-    background-color: #FFFFFF;
-    border: solid;
-    color: #000000;
-    cursor: pointer;
-}
-
-.modal.button.accept {
-    /* background-color: #04B404; */
-}
-
-.modal.button.decline {
-    background-color: #FF4D4D;
-}
-
-#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.loader {
-    border: 16px solid #C9C9C9;
-    border-top: 16px solid #000000;
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-    margin: -4em auto auto -4em;
-    display: flex;
-    top: 50%;
-    left: 50%;
-    position: absolute;
-}
-
-@-webkit-keyframes from_top {
-    from {
-        top: -25%;
-        opacity: 0;
-    }
-
-    to {
-        top: 25%;
-        opacity: 1;
-    }
-}
-
-@keyframes from_top {
-    from {
-        top: -25%;
-        opacity: 0;
-    }
-
-    to {
-        top: 25%;
-        opacity: 1;
-    }
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}

public/willpower.css

@@ -16,6 +16,9 @@ html, body {
     height: 100%;
     width: 100%;
     position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .modal.box {
@@ -24,26 +27,31 @@ html, body {
     border-style: solid;
     border-color: #FFFFFF;
     text-align: center;
-    width: 50%;
+    width: 70%;
     padding: 1em;
     -webkit-animation-name: from_top;
     -webkit-animation-duration: 1.5s;
     animation-name: from_top;
     animation-duration: 1.5s;
     position: absolute;
-    left: 25%;
-    top: 25%;
     z-index: 10;
 }
 
+.modal.buttons {
+    display: flex;
+    gap: 2em;
+}
+
 .modal.button {
     border-radius: 5px;
     border: solid;
     color: #000000;
-    font-size: 1em;
+    padding: 15px 0;
-    padding: 15px 25px;
     text-align: center;
     transition-duration: 0.3s;
+    font-weight: bold;
+    font-size: 1em;
+    flex: 1;
 }
 
 .modal.button:hover {

views/index.erb

@@ -9,15 +9,16 @@
       automatically through cookies or similar technology.</p>
     <p>For further information please visit
       <a href="http://allaboutcookies.org">allaboutcookies.org</a>.</p>
+    <div class="modal buttons">
       <button class="modal button accept" onclick="acceptCookies();">
         Accept
       </button>
-    &nbsp;
       <button class="modal button decline" onclick="declineCookies();">
         Decline
       </button>
     </div>
   </div>
+</div>
 <div class="modal loader"></div>
 <div id="video"></div>
 <audio id="soundtrack" preload="auto" loop>