Initial commit

html/style.css

@@ -0,0 +1,176 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #2c2d42;
+    font-size: 1.1em;
+    font-family: Roboto, sans-serif;
+}
+
+#flash {
+    display: none;
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    background-color: #FFFFFF;
+    z-index: 9999;
+}
+
+#titleBox {
+    text-align: center;
+    font-size: 2.2em;
+    margin-top: -2.8%;
+    color: #FFFFFF;
+    font-family: Rachana, serif;
+}
+
+#imageBox {
+    display: block;
+    position: fixed;
+    top:10%;
+    left:1%;
+    right:20%;
+    bottom: 10%;
+    text-align: center;
+
+}
+
+#buttonBox {
+    display: block;
+    position: fixed;
+    top: 8%;
+    right: 1%;
+    left: 79%;
+    width: 20%;
+    height: 85%;
+    text-align: center;
+}
+#buttonBox h2 {
+    margin-left: -5%;
+    color: white;
+    margin-bottom: -2%;
+}
+
+#imageElement {
+    width: 90%;
+    height: 85%;
+    box-shadow: 8px 8px #1B1B23;
+    margin-top: -0.5%;
+    border: 1px solid gray;
+}
+
+
+
+#lastImages {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 2%;
+    width: 98%;
+    overflow: hidden;
+    height: 17%;
+    display: grid;
+    text-align: center;
+    grid-template-columns: repeat(7, calc(100% / 7));
+    grid-template-rows: 100%;
+    grid-column-gap: 2%;
+    direction: rtl;
+}
+
+.lastImage {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.slowFadeInAnimation {
+    animation: fadeIn 1s linear forwards;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+
+}
+
+.lastImageImg {
+    width: 100%;
+    height: 79%;
+    display: block;
+}
+
+
+.lastImageLock {
+    position: absolute;
+    width: 10%;
+    top: 65%;
+    left: 92%;
+}
+
+#countdown {
+    display: inline;
+    position: fixed;
+    top:10%;
+    left:1%;
+    right:20%;
+    bottom: 10%;
+    text-align: center;
+    font-size: 10em;
+    z-index: 99;
+    color: white;
+    font-weight: 600;
+}
+
+.button {
+    width: 80%;
+}
+
+
+/* Modal */
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 70%;
+    text-align: center;
+    font-size: 1.3em;
+    font-family: "Roboto Light", sans-serif;;
+    border-radius: 15px;
+}
+
+/* The Close Button */
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}