Import the fonts

Copy accross youtube.css to youtube.scss

frontend/src/scss/base.scss

@@ -5,6 +5,10 @@
 @import "variables";
 @import "breakpoints";
 
+// Grab our fonts
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"); // Open Sans
+@import url("../fonts/Metropolis/stylesheet.css"); // MAIN font Metropolis
+
 // Orgiinally from create-react-app, isn't really relevant here
 body {
   margin: 0;

frontend/src/scss/index.scss

@@ -16,6 +16,7 @@
 @import "socials.scss";
 @import "tabs.scss";
 @import "year-group-calendar.scss";
+@import "youtube.scss";
 
 /** Page parts like the jumbotron, footer, etc */
 @import "events.scss";

frontend/src/scss/youtube.scss

@@ -0,0 +1,20 @@
+/** Styles for the YT container used to display the 2021 April Fools video. Useful if you want to put a video in the Jumbotron */
+
+.yt-container {
+	display: inherit;
+	justify-content: center;
+	margin-top: 120px;
+}
+
+@media screen and (min-width: 700px) {
+	.yt-container {
+		margin-top: 150px;
+	}
+}
+
+@media screen and (max-width: 500px) {
+	.yt-container iframe {
+		width: 560px;
+		height: 315px;
+	}
+}