/*	style CSS	*/
/* For Bits of Creation.com index page */

:root {
	--font-permanent-marker: 'Permanent Marker', cursive;
	--font-permanent-marker-footer: 'Permanent Marker Footer', cursive;
	--font-archivo-black-01: 'Archivo Black 01','Arial Black', 'sans-serif';  /*       */
	--wb-r: #dc2222;
	--wb-g: #10bb10;
	--wb-b: #2040d5;
	--wb-b-hover: #79f;
	--wb-k: #000;
	--wb-hidden: rgba(225, 225, 225, 0.01); /* 225 */
}

html {
	color: var(--wb-k);
	background-image: linear-gradient(170deg, #fff, #f7f7f7, #ddd, #ddd);
	background-size: 100% 80%;
	background-repeat: no-repeat;
	background-color: #ddd;
}

body {
	font-family: var(--font-permanent-marker);
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	text-size-adjust: none;
	width: 98vw;
	margin: auto;
}

@font-face {
  font-family: 'Permanent Marker';
  src: url('fonts/permanent-marker-v16-latin-regular.woff2') format('woff2'),
  url('fonts/permanent-marker-v16-latin-regular.woff') format('woff');
	font-display: block;
}

@font-face {
  font-family: 'Permanent Marker Footer';
  src: url('fonts/permanent-marker-v16-latin-regular.woff2') format('woff2'),
  url('fonts/permanent-marker-v16-latin-regular.woff') format('woff');
	font-display: block;
  descent-override: 0%;
}

@font-face {
  font-family: 'Archivo Black 01';
  src: url('fonts/archivoblack-regular-webfont-01.woff2') format('woff2'),
  url('fonts/archivoblack-regular-webfont-01.woff') format('woff');
	font-display: block;
}

div.header {
}

div.content {
	/* margin-top: 4vw; */
}

div.footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	margin-bottom: 1.0vw; /* Adjust space below footer */
	width: 100%;
	height: 4vw;
}

/* div.contactSpacer { */
	/* margin-top: -8vw; */
	/* height: 15%; */
/* } */

div.left {
	display: grid;
	align-content: end;
	justify-items: left;
}

div.center {
	display: grid;
	align-content: end;
	justify-items: center;
}

div.right {
	display: grid;
	align-content: end;
	justify-items: right;
}

span.loading {
	font-size: 1.7vw;
	color: #aaa;
	display: inline-block;
	transform: translate(-26.0vw, 0vw);
}

h1 {
	font-size: 5vw;
	margin-top: 5vw;
  margin-bottom: 0.5vw;
	text-align: center;
}

h2 {
	font-size: 3.5vw;
	line-height: 3vw;
	text-align: center;
	margin-top: 1vw;
  margin-bottom: 7vw;
}

p.bits {
	font-family: var(--font-archivo-black-01);
	font-size: 1.08vw;
	color: #b0b0b0;
	line-height: 0;
	margin: 0;
	text-align: center;
	transform: translate(0, -0.75vw);
}

p.description {
	font-size: 2.5vw;
	line-height: 3vw;
	margin-top: 3vw;
  margin-bottom: 1vw;
	margin-left: 15vw;
	margin-right: 13vw;
}

p.contact {
	font-size: 3.0vw;
	line-height: 3.5vw;
	text-align: start;
	/* margin-top: 15vw; */
	margin-left: 18.0vw;
}

p.footerLeft {
	font-family: var(--font-permanent-marker-footer);
	font-size: 2.5vw;
	line-height: 2.0vw;
	margin-top: 0;
	margin-bottom: 0.3vw;
	margin-left: 1.0vw;
	transform: rotate(0.5deg);
}

p.footerCenter {
	font-family: var(--font-permanent-marker-footer);
	font-size: 2.5vw;
	color: var(--wb-b);
	margin-top: 0;
	margin-bottom: 0.4vw;
	line-height: 2.0vw;
	transform: rotate(1deg);
}

p.footerRight {
	font-family: var(--font-permanent-marker-footer);
	font-size: 2.5vw;
	line-height: 2.0vw;
	color: var(--wb-b);
	margin-top: 0;
	margin-right: 1.5vw;
	margin-bottom: 0.5vw;
	transform: rotate(1deg);
}

.red {
	color: var(--wb-r);
}

.negativeIndent {
	margin-left: -2.4vw;
}

.hide {
	display: none;
}

a, a:visited {
	text-decoration: none;
	color: var(--wb-b);
}
a:hover, a:active {
	color: var(--wb-b-hover);
}

a.mySites:link, a.mySites:visited {
	font-size: 150%;	
	margin-left: -6vw;
	text-decoration: none;
	color: var(--wb-b);
}
a.mySites:hover, a.mySites:active {
	font-size: 150%;	
	margin-left: -6vw;
	color: var(--wb-b-hover);
}

a.blankEmail:link, a.blankEmail:visited, a.blankEmail:hover, a.blankEmail:active {
	/* font-size: 0.5vw; */
	color: var(--wb-hidden);
}