Added styling for individual class page

src/stylesheets/main.scss

@@ -24,3 +24,4 @@
 @import 'pages/dashboard';
 @import 'pages/classes';
 @import 'pages/tests';
+@import 'pages/class';

src/stylesheets/pages/_class.scss

@@ -0,0 +1,120 @@
+.classPage {
+	.btn {
+		font-size: 1.1em;
+	}
+
+	&__overview {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		&__members {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+
+			@include respond-to('medium') {
+				gap: .5rem;
+			}
+		}
+
+		&__buttons {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
+
+			@include respond-to('medium') {
+				flex-direction: column;
+				justify-content: space-around;
+				text-align: center;
+			}
+		}
+
+		@include respond-to('medium') {
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+
+	&__stats {
+		@include space-contents;
+
+		&__stats {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: .5rem;
+
+			div {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				background: $admin-bg;
+				padding: .5rem;
+				border-radius: 10px;
+
+				h3 {
+					color: $primary-colour;
+					font-size: 1.3em;
+				}
+
+				&:nth-child(odd):last-child {
+					grid-column-end: span 2;
+
+					@include respond-to('medium') {
+						grid-column-end: span 1;
+					}
+				}
+			}
+
+			@include respond-to('medium') {
+				grid-template-columns: repeat(5, 1fr);
+			}
+
+		}
+
+		&__graphs {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+
+			div {
+				box-sizing: border-box;
+				background: $admin-bg;
+				padding: 10rem 0;
+				width: 100%;
+				text-align: center;
+				border-radius: 20px;
+			}
+
+			@include respond-to('medium') {
+				flex-direction: row;
+			}
+		}
+
+		@include respond-to('medium') {
+			@include space-contents(1rem);
+		}
+	}
+
+	&__tests {
+		@include space-contents;
+
+		&__container {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+		}
+
+		@include respond-to('medium') {
+			&__container {
+				flex-direction: row;
+				justify-content: space-between;
+
+				div {
+					width: 100%;
+				}
+			}
+		}
+	}
+}