initial upload

docs/assets/css/index_page_style.css

@@ -0,0 +1,152 @@
+.extended-content-container {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    top: -70px;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    background-color:#68A5F3;
+    padding-bottom: 15px;
+    padding-top: 15px;
+}
+
+@media only screen and (max-width: 960px) {
+  .extended-content-container {
+    top: -70px;
+  }
+}
+    
+.extended-content {
+    width: 100%;
+    background-color:#68A5F3;
+    text-align:center;
+    color: white;
+    font-size: 25pt;
+}
+
+/*
+    Button Styles
+    Inspired by 'CSS Button Animations' by Alex Loomer
+    
+    https://codepen.io/atloomer/pen/JEaRWX
+*/
+
+.button {
+    display: inline-flex;
+    height: 40px;
+    width: 165px;
+    /*border: 2px solid #BFC0C0;*/
+    margin: 20px 20px 20px 20px;
+    color: #BFC0C0;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-size: 10pt;
+    letter-spacing: 1.5px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+    
+/* Third Button */
+
+#button-3 {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid white;
+    background: #3570B3;
+}
+
+#button-3 a {
+  position: relative;
+  transition: all .45s ease-Out;
+  color: white;
+  text-decoration: none;
+}
+
+#circle {
+    width: 0%;
+    height: 0%;
+    opacity: 0;
+    line-height: 40px;
+    border-radius: 50%;
+    background: #F0D451;
+    position: absolute;
+    transition: all .5s ease-Out;
+    top: 20px;
+    left: 70px;
+}
+
+#button-3:hover #circle {
+    width: 200%;
+    height: 500%;
+    opacity: 1;
+    top: -70px;
+    left: -70px;
+}
+
+#button-3:hover a {
+    color: #2D3142;
+    text-decoration: none;
+}
+
+/* Fourth Button */
+
+#button-4 {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+#button-4 a {
+    position: relative;
+    transition: all .45s ease-Out;
+    color: white;
+}
+
+#underline {
+    width: 100%;
+    height: 2.5px;
+    margin-top: 15px;
+    align-self: flex-end;
+    left: -200px;
+    background: #F0D451;
+    position: absolute;
+    transition: all .3s ease-Out;
+    bottom: 0;
+}
+
+#button-4:hover #underline {
+    left: 0;
+}
+
+#button-4:hover a {
+    text-decoration: none;
+}
+
+.accordion-item input {
+  display: none;
+}
+
+.accordion-header {
+  display: block;
+  cursor: pointer;
+  padding: 10px;
+  #background-color: #f1f1f1;
+  border: 1px solid #ddd;
+  font-weight: bold;
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  padding: 0 10px;
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+}
+
+.accordion-item input:checked ~ .accordion-content {
+  max-height: 800px; /* Set a reasonable max-height */
+}