/* Header and @media Settings */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--header-padding: 20px;
	--logo-height: 38px;
	--icon-size: 28px;
	--content-max-width: 900px;
	--header-footer-max-width: 1000px;
	--text-colour: #CCC;
	--text-colour-h1: #EEE;
	--icon-text-colour: #777;
	--site-colour: #FF302AFF;
	--link-icon-colour: rgba(255, 255, 255, 0.75);
	--spacing: 20px;
	--v-spacing: calc(var(--spacing) * 1.732);
	
	--fluid-p:  clamp(0.875rem, 2vw + 0.4rem, 1rem);
	--fluid-h2: clamp(1.2rem, 2vw + 0.8rem, 1.5rem);
	--fluid-h1: clamp(1.5rem, 2vw + 1.2rem, 2rem);
}

html {
	font-size: 1rem;
}

h1 {
	font-size: var(--fluid-h1);
}

h2 {
	font-size: var(--fluid-h2);
}

p {
	font-size: var(--fluid-p);
}

/* Grid Setup */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
    width: 100%;
    
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

	--dot-size: 5px;
	--spacing: 20px;
	--v-spacing: calc(var(--spacing) * 1.732);
	
	background-color: #1C222AFF;
	background-image:
		radial-gradient(circle, rgba(0,0,0,0.125) var(--dot-size), transparent var(--dot-size)),
    	radial-gradient(circle, rgba(0,0,0,0.125) var(--dot-size), transparent var(--dot-size));

	background-size:
	  var(--spacing) var(--v-spacing),
	  var(--spacing) var(--v-spacing);
	
	background-position:
	  0 0,
	  calc(var(--spacing) / 2) calc(var(--v-spacing) / 2);
	background-attachment: fixed;
	background-repeat: repeat;
	
	transform: translateZ(0);

	color: grey;
}

main {
	flex: 1;
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	
	padding: 0 2.75rem;
	margin-top: 10px;
}




.site-header,
.site-footer {
	width: 100%;
	max-width: var(--header-footer-max-width);
	margin-left: auto;
	margin-right: auto;
}

.site-header {
	padding: 10px var(--header-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	
	color: var(--site-colour);
	gap: 10px;
	overflow: hidden;
}

.header-icon {
	width: var(--icon-size);
	height: var(--icon-size);
	fill: currentColor;
	color: grey;
	transition: color 0.2s ease;
}

.header-links {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 12px;
}

.icon-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.logo-link {
	color: var(--site-colour);
	display: flex;
}

.site-logo {
    /* Variables make it easy to tweak the height in one place */
    /* --logo-height: 38px; */
    --logo-ratio: 784 / 48;

    /* clamp(min, preferred, max) */
    /* This makes the logo shrink on screens smaller than ~600px */
    height: clamp(24px, 6vw, var(--logo-height));
    
    /* The calc trick using the variable */
    width: calc(clamp(24px, 6vw, var(--logo-height)) * (var(--logo-ratio)));

    display: block;
    margin: 0;
}

.site-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 1rem;
    color: #AAA;
    border-top: 1px solid grey;
}