first commit

styles/button.css

@@ -0,0 +1,72 @@
+.imageButton:hover img,
+.imageButton:focus img {
+  animation: 700ms hoverAnimation forwards;
+}
+
+.imageButton img {
+  transition: all 50ms;
+}
+
+@keyframes hoverAnimation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  1% {
+    transform: rotate(40deg) scale(2.1, 1.1);
+  }
+  20% {
+    transform: rotate(-20deg) scale(1.1, 2.1);
+  }
+  60% {
+    transform: rotate(10deg) scale(1.7, 1.5);
+  }
+  70% {
+    transform: rotate(-5deg) scale(1.4, 1.6);
+  }
+  80% {
+    transform: rotate(4deg) scale(1.6, 1.4);
+  }
+
+  90% {
+    transform: scale(1.4, 1.6);
+  }
+
+  100% {
+    transform: rotate(0deg) scale(1.5);
+  }
+}
+
+.bouncy:focus,
+.bouncy:hover {
+  border-bottom: inset;
+  animation: 700ms borderBounce forwards;
+  border-radius: 0px;
+}
+
+@keyframes borderBounce {
+  0% {
+    border-bottom-width: 0px;
+  }
+  10% {
+    border-bottom-width: 24px;
+  }
+
+  40% {
+    border-bottom-width: 2px;
+  }
+
+  60% {
+    border-bottom-width: 15px;
+  }
+
+  70% {
+    border-bottom-width: 7px;
+  }
+  80% {
+    border-bottom-width: 13;
+  }
+  100% {
+    border-bottom-width: 10px;
+  }
+}

styles/color.css

@@ -0,0 +1,53 @@
+:root {
+  --text: #f1edff;
+  --highlight: #feb8ff;
+  --background: #28202e;
+  --link: #b0ff82;
+  --highlightBright: #fff8bd;
+  --opacity: rgba(40, 32, 46, 0.70);
+}
+
+h1 {
+  color: var(--highlightBright);
+}
+
+h2,
+h3,
+h4,
+h5 {
+  color: var(--highlight);
+}
+
+p {
+  color: var(--text);
+}
+
+.container {
+  background-color: var(--opacity);
+  filter: drop-shadow(5px 5px 5px var(--background));
+}
+
+footer {
+  background-color: var(--background);
+  filter: drop-shadow(5px 5px 5px var(--background));
+  overflow: auto;
+}
+body {
+  background-color: var(--highlight);
+  border-color: var(--highlight);
+}
+
+a {
+  color: var(--link);
+  border-color: var(--link);
+}
+
+a:hover {
+  filter: drop-shadow(0 0 10px var(--highlight));
+}
+
+a.active {
+  filter: drop-shadow(0 0 10px var(--highlightBright));
+}
+
+.footerLeft { border-color: var(--text) !important;

styles/cover.css

@@ -0,0 +1,26 @@
+.cover {
+  width: 100%;
+  height: auto;
+  max-width: 512px;
+  margin: 15px;
+  float: right;
+}
+
+@media (max-width: 850px) {
+  .cover {
+    float: none;
+    margin: 15px auto;
+  }
+}
+
+@media (max-width: 500px) {
+  .cover {
+    max-width: 400px;
+  }
+}
+
+@media (max-width: 300px) {
+  .cover {
+    max-width: 200px;
+  }
+}

styles/fonts.css

@@ -0,0 +1,68 @@
+@font-face {
+  font-family: "textfont";
+  src: url("./fonts/dpcomic.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "titlefont";
+  src: url("./fonts/kidpixies.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "headingfont";
+  src: url("./fonts/handpixies.ttf");
+  font-display: swap;
+}
+
+h1,
+h2 {
+  font-family: "titlefont";
+  font-size: 60px;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-family: "headingfont";
+}
+
+p,
+a {
+  font-family: "textfont";
+  font-size: 24px;
+  line-height: 200%;
+}
+a {
+  text-decoration: none;
+}
+h3 {
+  font-size: 40px;
+}
+h1,
+h2 {
+  line-break: loose;
+}
+
+h3,
+h4,
+h5,
+h6,
+a,
+p {
+  line-break: loose;
+}
+
+.imageButton {
+  font-size: 0px;
+  max-width: 64px;
+  max-height: 64px;
+}
+
+* {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto !important;
+}

styles/footer.css

@@ -0,0 +1,29 @@
+/* feet */
+
+footer * {
+  overflow: visible;
+}
+
+footer {
+  padding: 10px;
+  border-radius: 0px;
+  position: sticky;
+  overflow: visible;
+  left: 0;
+  display: flex;
+  bottom: 0;
+  width: 100%;
+}
+.footerNav {
+  display: flexbox;
+  margin: 0px;
+  padding: 0px;
+  width: 95%;
+}
+.footerRight {
+  overflow: visible;
+  float: right;
+}
+.footerLeft {
+  margin: 0px, auto;
+}

styles/style.css

@@ -0,0 +1,45 @@
+@import "color.css";
+@import "fonts.css";
+@import "footer.css";
+@import "cover.css";
+@import "button.css";
+
+* {
+  border-radius: 25px;
+  box-sizing: border-box;
+}
+
+body {
+  background-attachment: fixed;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  background-repeat: repeat;
+  background-image: url(../media/images/bg.svg);
+  background-size: 192px;
+  animation: 20s infinite movetoDownRight linear;
+}
+
+@keyframes movetoDownRight {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 192px 192px;
+  }
+}
+
+.container {
+  overflow: auto;
+  box-sizing: content-box;
+  width: 85%;
+  padding: 15px;
+  margin: 25px auto;
+}
+
+.imageButton img {
+  width: 48px;
+  height: 48px;
+  border-radius: 0px;
+  margin: 5px;
+}