Initial (reset)

static/site.css

@@ -0,0 +1,105 @@
+.eyecatcher {
+  height: 100vh;
+  min-height: 500px;
+  /* background-image: url('/static/pictures/test.png'); */
+  background: cyan;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* pricing */
+section.pricing {
+  background: #007bff;
+  background: linear-gradient(to right, #0062E6, #33AEFF);
+}
+
+.pricing .card {
+  border: none;
+  border-radius: 1rem;
+  transition: all 0.2s;
+  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.pricing hr {
+  margin: 1.5rem 0;
+}
+
+.pricing .card-title {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  letter-spacing: .1rem;
+  font-weight: bold;
+}
+
+.pricing .card-price {
+  font-size: 3rem;
+  margin: 0;
+}
+
+.pricing .card-price .period {
+  font-size: 0.8rem;
+}
+
+.pricing ul li {
+  margin-bottom: 1rem;
+}
+
+.pricing .text-muted {
+  opacity: 0.7;
+}
+
+.pricing .btn {
+  font-size: 80%;
+  border-radius: 5rem;
+  letter-spacing: .1rem;
+  font-weight: bold;
+  padding: 1rem;
+  opacity: 0.7;
+  transition: all 0.2s;
+}
+
+.bg-special{
+  background-color: #eae9e9;
+}
+
+.hover-to-75:hover *{
+  opacity: 0.75;
+  display: unset;
+}
+
+.footer-el{
+  float: left;
+  color: rgba(255,255,255,.5);
+}
+
+/* Hover Effects on Card */
+
+@media (min-width: 992px) {
+  .pricing .card:hover {
+    margin-top: -.25rem;
+    margin-bottom: .25rem;
+    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
+  }
+  .pricing .card:hover .btn {
+    opacity: 1;
+  }
+}
+
+.special-header{
+  font-weight: 900 !important;
+  color: rgba(255,255,255,.9);
+  font-size: 6vw;
+}
+
+.special-sub-header{
+  font-weight: bold;
+  color: rgba(255,255,255,.5);
+  font-size: 4rem;
+  display: none;
+}
+
+.pic-disabled{
+    opacity: 0.6;
+    background-color: black;
+}