Fix the css on the verify page.

views/verifyPage/verify.css

@@ -1,7 +1,337 @@
+*{margin:0;padding:0;}
+
 body{
     align-items: center;
 }
 
+#bannerContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    position: absolute;
+    margin-top: 15px;
+    pointer-events: none;
+    z-index: 100;
+}
+
+    .banner{
+        display: flex;
+        width: 75%;
+        height: 65px;
+        margin: 10px auto;
+        box-shadow: 0 0 10px black;
+        border: 2px solid black;
+        background: white;
+    }
+
+        .banner > div{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 25%;
+            color: white;
+        }
+
+        .banner > p{
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            font-weight: bold;
+            width: 75%;
+            padding-left: 10px;
+        }
+
+        .banner > button{
+            background: none;
+            border: none;
+            height: 20px;
+            position: relative;
+            top: -10px;
+            right: -10px;
+            cursor: pointer;
+            color: white;
+            pointer-events: all;
+        }
+
+.header{
+    display: flex;
+    justify-content: space-between;
+    background: #001b2d;
+    width: 100%;
+    height: 75px;
+}
+
+    .headerStart{
+        display: flex;
+        align-items:center;
+        text-decoration: none;
+        margin-left: 25px;
+        width: 275px;
+    }
+
+        .headerStart img{
+            max-height: 75%;
+        }
+
+        .headerLogo{
+            color: white;
+            font-size: 25px;
+            margin-left: 10px;
+        }
+
+        .mobileHomeButton{
+            display: none;
+        }
+
+    .headerEnd{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 25px;
+        
+    }
+
+        .headerEnd > *{
+            margin-left: 20px;
+        }
+
+        .headerEnd a{
+            color: rgb(255, 99, 107);
+        }
+
+#loaderContainer{
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 27, 45, 0.5);
+    z-index: 2;
+    position: fixed;
+}
+
+.loader{
+    margin-bottom: 200px;
+    margin-right: 100px;
+}
+
+.loader .outer{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(255, 99, 107, 0.8);
+    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+    animation: spin1 2s infinite;
+    position: absolute;
+}
+
+.loader .mid{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-right: 10px solid rgba(0, 27, 45, 0.8);
+    border-left: 10px solid rgba(0, 27, 45, 0.8);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    margin: 10px 0 0 10px;
+    animation: spin2 2s infinite;
+    position: absolute;
+}
+
+.loader .inner{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(179, 191, 209, 0.8);
+    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    margin: 20px 0 0 20px;
+    animation: spin3 2s infinite;
+    position: absolute;
+}
+
+.loader img{
+    margin: 10px 0 0 10px;
+    height: 70px;
+    width: 80px;
+    position: absolute;
+    z-index: -1;
+    animation: imgSpin 3s linear infinite;
+}
+
+@keyframes spin1{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes spin2{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(720deg); }
+}
+
+@keyframes spin3{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(1080deg); }
+}
+
+@keyframes imgSpin{
+    0% { 
+        transform: rotateY(0deg);
+    }
+
+    100% { 
+        transform: rotateY(360deg);
+    }
+}
+
+h1 {
+    text-align: center;
+    padding-bottom: 13px;
+}
+
+h3 {
+    text-align: center;
+    font-weight: 500;
+    font-size: 20px;
+}
+
+button{
+    outline: 0;
+}
+
+button::-moz-focus-inner{
+    border: 0;
+}
+
+.link{
+    cursor: pointer;
+    color: gray;
+    text-decoration: underline;
+    text-align: center;
+    font-size: 20px;
+}
+
+    .link:hover {
+        color: #ff636b;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+.button{
+    background: rgb(0, 27, 45);
+    border: none;
+    text-decoration: none;
+    padding: 10px 25px;
+    color: rgb(255, 99, 107);
+    cursor: pointer;
+    text-align: center;
+    font-size: 15px;
+    min-width: 100px;
+    margin: 5px;
+    max-height: 52px;
+}
+
+    .button:hover{
+        background: rgb(179, 191, 209);
+    }
+
+    .button:active{
+        background: rgb(240, 252, 255);
+    }
+
+.dangerButton{
+    display: initial;
+    background: rgb(255, 99, 107);
+    border: none;
+    text-decoration: none;
+    padding: 10px 25px;
+    color: black;
+    cursor: pointer;
+    text-align: center;
+    font-size: 15px;
+    min-width: 100px;
+    margin: 5px;
+    max-height: 52px;
+}
+
+    .dangerButton:hover{
+        background: rgb(255, 129, 137);
+    }
+
+    .dangerButton:active{
+        background: rgb(240, 252, 255);
+    }
+
+.linkButton{
+    background: none;
+    border: none;
+    text-decoration: underline;
+    color: white;
+    cursor: pointer;
+    margin: 5px;
+    font-size: 15px;
+}
+
+.public-buttons {
+    position: inherit;
+    align-self: center;
+    margin-right: 39px;
+}
+
+.buttonDisabled{
+    background: gray;
+    text-decoration: none;
+    border-radius: 10px;
+    padding: 10px 5px;
+    color: rgb(0, 27, 45);
+    cursor: default;
+    font-size: 25px;
+    text-align: center;
+}
+
+.line-break{
+    border: 1px solid rgb(255, 99, 107);
+    margin: 30px 0;
+}
+
+@media screen and (max-width: 1400px){
+    .button{
+        font-size: 15px;
+    }
+
+    .header{
+        height: 30px;
+    }
+
+        .headerStart{
+            margin-left: 10px;
+        }
+
+        .headerEnd{
+            font-size: 8px;
+        }
+
+        .headerLogo{
+            white-space: nowrap;
+            font-size: 10px;
+        }
+
+    .truncateLong{
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .mobileHide{
+        display: none !important;
+    }
+
+    .headerStart{
+        width: 0;
+    }
+}
+
 .title{
     margin-top: 25px;
     font-size: 40px;