first commit

style.css

@@ -0,0 +1,115 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: black;
+  font-family: VT323;
+  color:white;
+}
+
+p, li {
+  font-size: large;
+}
+
+@font-face {
+  font-family: VT323;
+  src: url(VT323-Regular.ttf);
+}
+
+.box {
+  border: solid 2px #3f3f3f;
+  border-radius: 2px;
+  padding: 10px;
+  margin: 10px;
+  display: block;
+  box-sizing: border-box;
+  background: black;
+}
+
+#page {
+  display: flex;
+  height: calc(100vh - 30px);
+  gap: 10px;
+}
+
+#content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+#sideBar {
+  width: 200px;
+  flex-shrink: 0;
+}
+
+#cool-stuff {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#all {
+  padding:2% 20%;
+}
+
+#header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  color: #bbbbbb;
+}
+
+#headerContent {
+  width:100%;
+  text-align: center;
+}
+
+/* background animation */
+
+.grid {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    pointer-events: none;
+    z-index: -1; /* behind everything */
+    background-image: 
+      linear-gradient(90deg, rgba(255, 0, 0, 0.3) 10%, transparent 10%),
+      linear-gradient(rgba(255, 0, 0, 0.3) 10%, transparent 10%);
+    background-size: 50px 50px;
+    animation: moveGrid 10s linear infinite;
+  }
+
+  @keyframes moveGrid {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(-300px, -300px);
+    }
+  }
+
+  .content {
+    position: relative;
+    padding: 50px;
+    text-align: center;
+  }
+
+/* Align header and icon */
+.header-with-icon {
+  display: flex;
+  align-items: center;   
+  justify-content: space-between; 
+  background: linear-gradient(90deg, #df2929, rgba(0,0,0,0));
+}
+
+.header-with-icon h2 {
+  margin: 0; 
+}
+
+.header-with-icon .icon {
+  cursor: pointer;
+  font-size: 1.2em;
+}