:root {
  --black:      #000000;
  --white:      #ffffff;

  --red:        #D92546;
  --light-blue: #B8D3D9;
  --off-white:  #EFF2D8;
  --dark-red:   #8C0303;
  --very-dark-red: #590202;
}
/*Source - https://stackoverflow.com/a
Posted by wahsandaruwan, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-12, License - CC BY-SA 4.0
*/
@font-face {
    font-family: 'Heading';
    src: url('./fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('woff2'),             /* Super Modern Browsers */
         url('./fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('woff'),              /* Pretty Modern Browsers */
         url('./fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('truetype'),          /* Safari, Android, iOS */
         url('./fonts/Abril_Fatface/AbrilFatface-Regular.ttf') format('svg');               /* Legacy iOS */
}

@font-face {
    font-family: 'TextNormal';
    src: url('./fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('woff2'),             /* Super Modern Browsers */
         url('./fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('woff'),              /* Pretty Modern Browsers */
         url('./fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype'),          /* Safari, Android, iOS */
         url('./fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('svg');               /* Legacy iOS */
}

html, body {
  margin: 0;
}
body {
	background-color: var(--white);
}

.main-contents {	
	width: 66vw; /* X % of viewport */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 auto; /* margin top and bottom 0, left and right auto */
}

h1 {
	font-family: Heading;
	position: relative;
	z-index: 0;
}
h1::after {
	width: 50%;
	z-index: -1;
	background: var(--red);
	height: 0.4em;
	content: "";
	bottom: 5%;
	display: block;
	position: absolute;
}

.footer-container {
	width: 100%;
	padding: 1rem 0;
	background-color: var(--black);
}
.footer-contents {
	width: 66vw;
	margin: 0 auto;
}
a {
	margin: 0;
	font-family: TextNormal;
	color: var(--white);
}