Stick footer to page bottom

components/Footer.tsx

@@ -4,6 +4,11 @@ import styled from 'styled-components';
 import IconButton from '../components/IconButton';
 
 const StyledFooter = styled.footer`
+	position: absolute;
+	bottom: 0;
+	min-height: 100px;
+	width: 85%;
+	margin: auto;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	column-gap: 2rem;
@@ -11,6 +16,10 @@ const StyledFooter = styled.footer`
 	align-content: center;
 	padding: 1rem 0rem;
 
+	@media (max-width: 768px) {
+		width: 95%;
+	}
+
 	.contact {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, 16px);

components/GlobalStyles.tsx

@@ -38,11 +38,17 @@ const Global = createGlobalStyle<Props>`
 		}
   }
 
+	html {
+		position: relative;
+		min-height: 100%;
+	}
+	
 	ul, ol {
 		margin-inline-start: 1.9rem;
 	}
 
 	body {
+		margin: 0 0 100px;
 		background: ${({ dark, theme }) =>
 			dark ? theme.colors.dark.background : theme.colors.light.background};
     color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};