FAQ section, easter egg, general format improvements

static/root.css

@@ -24,13 +24,12 @@
     box-shadow: outset rgb(35, 20, 60) 0px 0px 20px;
 }
 
-@media screen and (min-width: 415px) {
-    .linkContainer {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        max-width: 415px;
-        margin: auto;
-    }
+.linkContainer {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 385px;
+    margin: auto;
+    justify-content: center;
 }
 
 .animatedTitle {
@@ -54,6 +53,13 @@
     aspect-ratio: 1/1;
     transform: scale(0.9);
     border-radius: 50%;
+    rotate: 0deg;
+    transition: rotate 2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+.pfp:active {
+    rotate: 1440deg;
+    transition: rotate 5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 
 .CLAlign {
@@ -63,7 +69,7 @@
 img:not(.project-inner > div > img):not(.activity>img) {
     width: 100%;
     max-width: 168px;
-    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
+    /* transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); */
 }
 
 @media screen and (min-width: 850px) {
@@ -103,6 +109,16 @@ img:not(.project-inner > div > img):not(.activity>img) {
     position: relative;
 }
 
+@keyframes spinny {
+    0% {
+        rotate: 0deg;
+    }
+
+    100% {
+        rotate: 360deg;
+    }
+}
+
 @keyframes mainText {
     0% {
         transform: translateY(calc(50vh - 6rem)) scale(1.5);