First Commit

assets/css/style.css

@@ -0,0 +1,80 @@
+html { scroll-behavior: smooth; font-family: ubuntu; }
+*{ box-sizing: border-box; margin:0; padding:0;}
+
+.main-container{
+  padding:20px;
+  background-color: rgb(186, 186, 186);
+  width:100vw;
+  height:100vh;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.alert-container{
+  margin-bottom:10px;
+  border: 2px solid black;
+  width:fit-content;
+  padding:8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: #3380c8;
+}
+
+.alert-container:first-of-type{ margin-top:15px;}
+.alert-container:last-of-type{ margin-bottom: 15px;}
+
+.alert-info{
+  display:grid;
+  grid-template-columns: 200px 400px auto auto;
+}
+
+.alert-info > div {
+  margin: 5px auto 3px auto;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  
+}
+
+.alert-container div{
+  text-align: left;
+  min-width: 200px;
+  
+}
+
+.alert-details{
+  display:none;
+  padding:10px;
+  border:1px solid black;
+  border-radius: 10px;
+  margin:5px;
+  background-color: rgba(255, 255, 255, 0.774);
+  color:black;
+  
+  justify-content: space-between;
+  flex-wrap: wrap;
+  
+}
+
+.alert-details > div{
+  margin:10px;
+}
+
+.details-show{
+  display:flex;
+}
+
+.alert_red{
+  background-color: #df1414;
+  color:#ff9175;
+  box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
+  animation: bumping_red_bg 4s linear 2s infinite;
+}
+
+.alert_green{
+  background-color: #1f991b;
+  color:#c3ffb4;
+  box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;;
+  animation: bumping_green_bg 4s linear 2s infinite;
+}