Updated blog posts.

Added Minecraft Education Ambassador accreditation
Signed-off-by: Alexander Davis <alex@adcm.uk>

export/assets/scss/animations.scss

@@ -0,0 +1,62 @@
+.rainbow-border:hover {
+  --border-angle: 0turn; // For animation.
+  --main-bg: conic-gradient(
+      from var(--border-angle),
+      var(--bs-primary),
+      #112 5%,
+      #112 60%,
+      #213 95%
+    );
+  
+  border: solid 5px transparent;
+  border-radius: 5px;
+  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--bs-primary), var(--bs-secondary) 99%, transparent);
+  
+  background: 
+    // padding-box clip this background in to the overall element except the border.
+    var(--main-bg) padding-box,
+    // border-box extends this background to the border space
+    var(--gradient-border) border-box, 
+    // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
+    var(--main-bg) border-box;
+  
+  background-position: center center;
+
+  animation: bg-spin 3s linear infinite;
+  @keyframes bg-spin {
+    to {
+      --border-angle: 1turn;
+    }
+  }
+
+}
+
+@property --border-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0turn;
+}
+
+
+@keyframes colour-change {
+	0% {
+  background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
+	}
+  50% {
+  background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary), var(--bs-secondary));
+	}
+	100% {
+  background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
+	}  
+}
+@keyframes reverse-colour-change {
+	0% {
+  background: linear-gradient(120deg, var(--bs-secondary), var(--bs-primary));
+  }
+  50% {
+  background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary), var(--bs-primary));
+  }
+	100% {
+   background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
+	}  
+}