Add style to warning modal

css/style.css

@@ -519,57 +519,114 @@ footer .icon-row{
 footer img {
     width: auto;
 }
-
+#ml-modal-open{
+    cursor: pointer;
+}
+#ml-modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 120px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  text-align: center;
+}
+.modal-header {
+  padding: 2px 16px;
+  background-color: #dc3545;
+  color: white;
+}
+.modal-header h2{
+  padding: 10px;
+}
+.modal-body {
+  padding: 16px;
+}
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0}
+  to {
+    top: 0;
+    opacity: 1}
+}
+.close {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  padding-top: 5px;
+}
+.close:hover, .close:focus {
+  text-decoration: none;
+  cursor: pointer;
+}
 @media screen and (max-width: 1000px){
-    .presentation{
-        flex-direction: column-reverse;
-        height: auto;
-    }
-    .intro-text p{
-        width: auto;
-    }
-    .cover{
-        width: 90%;
-    }
-    .cover img{
-        width: 100%;
-        height: auto;
-    }
-    .about-section{
-        flex-direction: column;
-    }
-    .task-tech{
-        flex-direction: column;
-    }
-    .about-cover img{
-        min-width: auto;
-    }
-    .icon-row{
-        width: 80%;
-    }
-    .page, .expectations{
-        display: flex;
-        flex-direction: column;
-        margin: 0 auto 10vh auto;
-        width: 90%;
-    }
-    .reg_form{
-        display: flex;
-        height: 100vh;
-    }
-    .footer-icon-row{
-        flex-direction: column;
-        justify-content: center;
-        margin: auto;
-        align-items: center;
-    }
-    .footer-icon-row a{
-        margin: 20px auto;
-    }
-    #coc{
-        width: 90%;
-    }
-    .deco-box {
-        flex-direction: column;
-    }
+  .presentation{
+    flex-direction: column-reverse;
+    height: auto;
+  }
+  .intro-text p{
+    width: auto;
+  }
+  .cover{
+    width: 90%;
+  }
+  .cover img{
+    width: 100%;
+    height: auto;
+  }
+  .about-section{
+    flex-direction: column;
+  }
+  .task-tech{
+    flex-direction: column;
+  }
+  .about-cover img{
+    min-width: auto;
+  }
+  .icon-row{
+    width: 80%;
+  }
+  .page, .expectations{
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto 10vh auto;
+    width: 90%;
+  }
+  .reg_form{
+    display: flex;
+    height: 100vh;
+  }
+  .footer-icon-row{
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    align-items: center;
+  }
+  .footer-icon-row a{
+    margin: 20px auto;
+  }
+  #coc{
+    width: 90%;
+  }
+  .deco-box {
+    flex-direction: column;
+  }
 }