@import url('https://fonts.googleapis.com/css2family=Sora:wght@400;700&display=swap');

html {
	--txt: black;
	--bgd: white;
}

body {
	margin: 20vh 20vw;
	min-height: 60vh;

	display: grid;
	grid-template-rows: auto 1fr auto;

	font-family: 'Lato', sans-serif;

	background-color: var(--bgd);
	color: var(--txt);
}

a { color: var(--txt); }
a:hover { cursor: pointer; }
a:active { cursor: pointer; }

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

ul {
	line-height: 1.5em;
	list-style: inside disclosure-closed;
	padding: 0;
}

.name { color: white; }

.owen {	background-color: var(--colour-Owen); }
.liam {	background-color: var(--colour-Liam); }
.aoife { background-color: var(--colour-Aoife); }

.bold     { font-weight: bold; }
.italic   { font-style: italic; }
.mono			{ font-family: 'Courier New', Courier, monospace; }
.right    { text-align: end; }
.subtitle { 
	margin-top: -1.67em;
	font-style: italic;
}

div.higgins-logo h1::before {
	content: "";
	background-image: url(https://www.higgins.id//images/higgins_flatter.svg);
	/* These parts rescale the SVG */
	width: 72px;
	height: 28px;
	display: inline-block;
	background-size: contain;
	/*
	  original 138w x 54h (dots 36, gap 6)
		50%: 69w x 27w
		33%: 46w x 18w 
		box: 48px x 28px w/ 4px border-radius 
		(where the dots are 12, gap is 2,
		so 40w, and h set to 20, so pad is
		4px all around or 10% 
		Actually measuring, the pad is 8px
		above and below, and 4px at sides.)
		dots + gap is (36*3)+(6*2) = 120 
		so pad is 12 all around, which would
		make 144w x 60h ! bigger than original
		
		Hmm... the box containing the dots is 40w,
		the dots are 12w leaving 4. I assumed the
		dots were flush with the edges of the 40
		giving a 2px gap, but it looks more like
		it should be a 1px gap + 1px either side.
		Then the gap is 1/12, or 3px on the big ver.
		The pad is 12 at the sides, but 24 top and
		bottom. That makes it 84h.
		50%: 72w x 42h
		33%: 48w x 28h 
	*/
	margin-right: 4px;
	background-repeat: no-repeat;
	/* Alternate, but I don't like it as much
	background-image: url(https://www.higgins.id//images/higgins_button.svg);
	width: 48px;
	height: 28px; */
}

div.higgins-logo > h1 {
	font-family: 'Sora', sans-serif;
	font-size: 42px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: initial;
	text-align: start;
}

@media (max-width: 500px) {
	body {
		margin: 10vh 10vw;
	}
}
@media (max-width: 375px) {
	body {
		margin: 0 28px;
	}
}