1 files changed, 146 insertions, 0 deletions
diff --git a/react-frontend/src/css/Modal.css b/react-frontend/src/css/Modal.css
new file mode 100644
index 0000000..96f9066
--- /dev/null
+++ b/react-frontend/src/css/Modal.css
@@ -0,0 +1,146 @@
+.modal {
+    background-color: aqua;
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* 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: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+
+.m{
+    border: 7px solid rgb(7, 94, 12);
+    border-radius: 5px;
+    background-color: white;
+    color: black;
+    position: fixed;
+    height: fit-content;
+    width: 20vw;
+    padding: .5%;
+}
+
+.modal0{
+    top: 30vh;
+    left: 40vw;
+}
+.modal1{
+    top: 7vh;
+    right: 29vw;
+}
+@media (max-width: 750px) {
+    .modal1{
+        top: 7vh;
+        right: 0vw;
+    }
+}
+.modal2{
+    bottom: 20vh;
+    left: 5vw;
+}
+.modal3{
+    top: 35vh;
+    left: 45vw;
+}
+.modal4{
+    top: 30vh;
+    left: 37vw;
+    padding: 2%;
+}
+
+.restart-modal:after{
+    z-index: 101;
+    border: 7px solid rgb(7, 94, 12);
+    border-radius: 15px;
+    background-color: white;
+    color: black;
+    position: fixed;
+    height: 25px;
+    width: 30px;
+    bottom: 30px;
+    right: 3vw;
+    content:'?';
+}
+.restart-modal:hover:after{
+    content:'Restart Orientation';
+    width: 150px;
+}
+
+.span {
+    font-weight: bold;
+    color:rgba(10, 9, 71);
+}
+
+.arrow {
+    border: solid black;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+  }
+  
+  .right {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+  
+  .left {
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+  }
+  
+  .up {
+    transform: rotate(-135deg);
+    -webkit-transform: rotate(-135deg);
+  }
+  
+  .down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+  }
+
+  .align-right{
+    text-align: right;
+    margin-right: 15px;
+  }
+
+  .align-center{
+    text-align: center;
+  }
+
+  .align-left{
+    text-align: left;
+    margin-left: 15px;
+  }
+
+  .next{
+    background-color: rgb(206, 206, 206);
+    color: black;
+    border: 2px solid rgba(10, 9, 71);
+    border-radius: 5px;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+  }
+
+  .next:hover {
+    background-color: rgb(7, 94, 12);
+    color: white;
+  }
+
+  .skip{
+      background-color: white;
+      border: none;
+      color:rgb(119, 119, 119);
+  }
+
+  .skip:hover{
+      color: black;
+  }
+
+