scss styling and remove astro elements

src/scss/elements/footer.scss

@@ -0,0 +1,27 @@
+@use "../variables.scss";
+
+@mixin styling {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100vw;
+	height: variables.$footer-Y;
+	background-color: var(--body-background-color)
+
+	p { padding: 0 20px 0 20px; }
+	section {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+
+		button {
+			height: 100%;
+			padding: 0 20px 0 20px;
+
+			&:hover { background-color: var(--hf-button-hover-color) }
+		}
+	}
+
+	#toggle-term-mode { background-color: rgb(0,50,90) }
+}

src/scss/elements/header.scss

@@ -1,3 +1,5 @@
+@use "../variables.scss";
+
 @mixin styling {
 	display: flex;
 	justify-content: space-between;

src/scss/elements/main.scss

@@ -1,4 +1,5 @@
 @use "./terminal";
+@use "../variables.scss";
 
 @mixin input {
 	font-size: 1.2rem;
@@ -16,7 +17,7 @@
 	@include terminal.formatting;
 
 	width: 100vw;
-	height: calc(99.3vh - $header-Y - $footer-Y);
+	height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
 	padding: 5px;
 	overflow-y: auto;
 

src/scss/global.scss

@@ -1,13 +1,10 @@
 @forward "./font.scss";
 
+@use "./variables.scss";
 @use "./elements/header.scss";
 @use "./elements/main.scss";
 @use "./elements/footer.scss";
 
-$header-Y: 30px;
-$footer-Y: 30px;
-$component-padding: 20px;
-
 :root {
 	color-scheme: dark;
 

src/scss/variables.scss

@@ -0,0 +1,3 @@
+$header-Y: 30px;
+$footer-Y: 30px;
+$component-padding: 20px;