Footer on the end

public/css/app.css

@@ -607,18 +607,6 @@ video {
 		max-width: 1536px;
 	}
 }
-.mx-auto {
-	margin-left: auto;
-	margin-right: auto;
-}
-.my-3 {
-	margin-top: 0.75rem;
-	margin-bottom: 0.75rem;
-}
-.mx-2 {
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
-}
 .my-2 {
 	margin-top: 0.5rem;
 	margin-bottom: 0.5rem;
@@ -631,18 +619,27 @@ video {
 	margin-top: 0.25rem;
 	margin-bottom: 0.25rem;
 }
+.mx-auto {
+	margin-left: auto;
+	margin-right: auto;
+}
+.my-3 {
+	margin-top: 0.75rem;
+	margin-bottom: 0.75rem;
+}
+.mx-2 {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
 .my-8 {
 	margin-top: 2rem;
 	margin-bottom: 2rem;
 }
-.mt-3 {
-	margin-top: 0.75rem;
-}
 .ml-40 {
 	margin-left: 10rem;
 }
-.ml-4 {
-	margin-left: 1rem;
+.mt-3 {
+	margin-top: 0.75rem;
 }
 .flex {
 	display: flex;
@@ -650,24 +647,18 @@ video {
 .grid {
 	display: grid;
 }
-.w-12 {
-	width: 3rem;
-}
 .w-56 {
 	width: 14rem;
 }
-.w-40 {
-	width: 10rem;
-}
-.w-28 {
-	width: 7rem;
-}
-.w-10 {
-	width: 2.5rem;
-}
 .w-16 {
 	width: 4rem;
 }
+.w-12 {
+	width: 3rem;
+}
+.w-40 {
+	width: 10rem;
+}
 .flex-grow {
 	flex-grow: 1;
 }
@@ -689,14 +680,11 @@ video {
 .justify-center {
 	justify-content: center;
 }
-.gap-5 {
-	gap: 1.25rem;
-}
 .gap-3 {
 	gap: 0.75rem;
 }
-.rounded-2xl {
-	border-radius: 1rem;
+.gap-5 {
+	gap: 1.25rem;
 }
 .rounded-full {
 	border-radius: 9999px;
@@ -704,6 +692,9 @@ video {
 .rounded-lg {
 	border-radius: 0.5rem;
 }
+.rounded-2xl {
+	border-radius: 1rem;
+}
 .bg-white {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -718,28 +709,32 @@ video {
 .p-4 {
 	padding: 1rem;
 }
-.px-5 {
-	padding-left: 1.25rem;
-	padding-right: 1.25rem;
-}
-.py-5 {
-	padding-top: 1.25rem;
-	padding-bottom: 1.25rem;
-}
 .px-40 {
 	padding-left: 10rem;
 	padding-right: 10rem;
 }
+.px-5 {
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
+}
 .py-10 {
 	padding-top: 2.5rem;
 	padding-bottom: 2.5rem;
 }
+.py-5 {
+	padding-top: 1.25rem;
+	padding-bottom: 1.25rem;
+}
 .text-center {
 	text-align: center;
 }
 .font-serif {
 	font-family: Vesterbro, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
+.text-5xl {
+	font-size: 3rem;
+	line-height: 1;
+}
 .text-4xl {
 	font-size: 2.25rem;
 	line-height: 2.5rem;
@@ -756,48 +751,32 @@ video {
 	font-size: 1.125rem;
 	line-height: 1.75rem;
 }
-.text-5xl {
-	font-size: 3rem;
-	line-height: 1;
-}
-.text-3xl {
-	font-size: 1.875rem;
-	line-height: 2.25rem;
-}
 .font-bold {
 	font-weight: 700;
 }
 .font-medium {
 	font-weight: 500;
 }
-.text-white {
-	--tw-text-opacity: 1;
-	color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-.text-gray-300 {
-	--tw-text-opacity: 1;
-	color: rgba(209, 213, 219, var(--tw-text-opacity));
-}
 .text-gray-400 {
 	--tw-text-opacity: 1;
 	color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
-.text-gray-800 {
-	--tw-text-opacity: 1;
-	color: rgba(31, 41, 55, var(--tw-text-opacity));
-}
 .text-blue-800 {
 	--tw-text-opacity: 1;
 	color: rgba(30, 64, 175, var(--tw-text-opacity));
 }
+.text-white {
+	--tw-text-opacity: 1;
+	color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+.text-gray-300 {
+	--tw-text-opacity: 1;
+	color: rgba(209, 213, 219, var(--tw-text-opacity));
+}
 .text-blue-600 {
 	--tw-text-opacity: 1;
 	color: rgba(37, 99, 235, var(--tw-text-opacity));
 }
-.shadow-lg {
-	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-2xl {
 	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -806,6 +785,10 @@ video {
 	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-lg {
+	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .transition {
 	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
 	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -984,6 +967,14 @@ video {
     font-display: swap;
 }
 
+body{
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+footer{
+    margin-top: auto;
+}
 
 
 body {

resources/css/app.css

@@ -166,6 +166,14 @@
     font-display: swap;
 }
 
+body{
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+footer{
+    margin-top: auto;
+}
 
 
 body {
@@ -187,7 +195,7 @@ input[type=text] {
 }
 
 h2 {
-    @apply text-2xl text-yellow-500 
+    @apply text-2xl text-yellow-500
 }
 
 .resquer{