Create index.css

index.css

@@ -0,0 +1,102 @@
+@import url("https://fonts.googleapis.com/css?family=Bubblegum+Sans&display=swap");
+
+:root {
+  --bg-color: #ECF2FF;
+  --text-color: #2B283A;
+  --title-color: #4A4E74;
+}
+
+
+body {
+  background: var(--bg-color);
+  font-family: sans-serif;
+  color: var(--text-color);
+}
+
+section {
+  width: 90%;
+  margin: 0 auto;
+}
+
+h1,
+h2 {
+  font-family: "Bubblegum Sans";
+  text-align: center;
+}
+
+h1 {
+  /* I don't want red anymore, I want it to be blue! 
+  Help me change it! */
+  color: var(--title-color);
+  font-size: 3em;
+  text-align: center;
+}
+
+/* How can I make my other section titles blue too? */
+
+.fireworks {
+  text-align: center;
+  /* Can you help me make my fireworks bigger? */
+  /* How about smaller? */
+  font-size: 4em;
+}
+
+
+ul.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-auto-rows: 70px;
+}
+
+ul.grid li {
+    list-style: none;
+    font-size: 3em;
+    justify-self: center;
+}
+
+.scared:hover {
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+.excited:hover {
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-name: jump;
+    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
+}
+
+@keyframes jump {
+    0%   { transform: scale(1,1)      translateY(0); }
+    10%  { transform: scale(1.1,.9)   translateY(0); }
+    30%  { transform: scale(.9,1.1)   translateY(-100px); }
+    50%  { transform: scale(1.05,.95) translateY(0); }
+    57%  { transform: scale(1,1)      translateY(-7px); }
+    64%  { transform: scale(1,1)      translateY(0); }
+    100% { transform: scale(1,1)      translateY(0); }
+}