@charset "UTF-8";

abbr {
	font-variant-caps:small-caps;
}

abbr.initialism {
	font-variant-caps:all-small-caps;
}

abbr[title] {
	cursor:help;
}

blockquote+figcaption::before {
	content:"—";
	margin-right:0.2em;
}

details > summary {
	cursor:s-resize;
}
details[open] > summary {
	cursor:n-resize;
}

hr {
	border:none;
	margin:2em auto;
	text-align:center;
}

hr::after {
//	content:url(rule.svg);
}

img {
	vertical-align:text-bottom;
}

q {
	quotes:"‘" "’" "“" "”";
}

ul {
	list-style-type:none;
	padding-left:0;
}

/* add prefers dark mode... stuff */
/* reduced motion disable background animation */

/* heirarchical order */

* {
	line-height:1.8;
	z-index:1
}

body {
	background-color:lightgrey;
	max-width:50em;
	padding:1em 2em
}

div#background {
	z-index:0
}

header img,
img.rule {
	max-width:30em;
	width:100%
}

footer img.rule {
	margin-top:2em;
}

header, main { position:relative }

article#services section.services {
	display:grid;
	grid-gap:2em;
	grid-template-columns:repeat(2, 1fr);
}
@media screen and (max-width:700px) {
	article#services section.services {
		grid-template-columns:1fr;
	}
}

article#services section.service {
/*	background-color:#faebd7b0;
	border:3px ridge antiquewhite;*/
//	background-color:#fbc082b8;
	background-color:#e0e0ff;
//	border:3px ridge #fbc082;
	border:3px ridge #0000ff;
	padding:1em 2em
}

/*
	you can set start delays on animations
	first number is duration, second is delay


*/ 

img#bg_o_01 {
	animation:spin-h 4s infinite linear, scroll 44s linear infinite;
	position:absolute;
	transform-style: preserve-3d;
}

img#bg_o_02 {
	animation:wobble 4s linear infinite, scroll2 40s linear infinite;
	position:absolute;
	transform-style: preserve-3d;
}

img#bg_o_03 {
	animation:scroll3 40s linear infinite, roll 4s linear infinite;
	position:absolute;
	transform-style: preserve-3d;
}


@keyframes roll {
	0% { transform:rotate3d(0, 0, 0, 0) }
	100% { transform:rotate3d(0, 0, 1, 360deg) }
}

@keyframes spin-h {
	0% { transform:rotate3d(0, 0, 0, 0) }
	100% { transform:rotate3d(0, 1, 0, 360deg) }
}

@keyframes wobble {
	0% { transform:rotate3d(0, 0, 0, 0) }
	100% { transform:rotate3d(1, 1, 2, 360deg) }
}

@keyframes scroll {
	from { left: 100%; top:0 }
	to { left:-10%; top:100% }
}

@keyframes scroll2 {
	from { left: 60%; top:-10% }
	to { left:-10%; top:60% }
}

@keyframes scroll3 {
	from { left: 20%; top:0% }
	to { left:-10%; top:20% }
}