:root {
	--primary: #C0E6F1; /* Light Blue */
	--secondary: #58C4DF; /* Bright Blue */
	--accent1: #D7881B; /* Gold */ 
	--accent2:#591943; /* Aubergine */
	--accent3:#350F22; /* Twilight */
	--verticalspacing: 1.35em;
} 

html * {  
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 100%;
  line-height: var(--verticalspacing);
  background-color: var(--primary);
  color: var(--accent3);
  margin: 1em;
  display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 
	"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
	"mne mne mne mne mne mne mne mne mne mne mne mne"
	"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr"	
	;
	gap: 4px;
}

header {
	grid-area: hdr;
	display: grid;
	grid-template-columns: subgrid;
}

header> * {
	grid-column: span 12;
}

.index main {

}

.about main {

}

.portfolio main {

}

footer {

}

a.current {
	pointer-events: auto;
	color: ;
} 

/* ------------------------------- media queries ------------------------------------- */