@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Mono&display=swap');

:root {
	--col_0: #048;
	--col_1: #06A;
	--col_2: #806;
}

html, body {
	margin: 0;
	padding: 0;
	color: #123;
}

body {
	font: 14pt "Open Sans", sans-serif;
}

div.banner {
	position: sticky;
	top: -85px;
	width: 100%;
	background: linear-gradient(15deg, #28E, #06A);
}

div.head {
	height: 120px;
	background-image: url("domview.svg");
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;

	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

div.menu {
	padding: .4em;

	a {
		color: white;
		padding: .2em .5em;
		transition: background 300ms
	}

	a:hover {
		background-color: #048;
	}
}

div.features {
	background: linear-gradient(10deg, #ddf, transparent, #def);
	margin-top: 0 !important;
}

div.pricing {
	margin-bottom: 0 !important;
	background: linear-gradient(-10deg, #28E, #06A);
	padding-bottom: 2em !important;

	h1, h2 {
		color: white;
	}

	div.box {
		flex-direction: column;
		background: white;
		border: none;

		h2 {
			color: #048;

			span {
				float: right;
				font-weight: bold;
			}
		}

		p:last-child {
			text-align: right;
		}
	}
}

div.section {
	margin: 1em 0;
	padding: 1em 0;
}

div.flex_center {
	width: 1200px;
	max-width: 98vw;
	margin: 0% auto;
	display: flex;
	flex-wrap: wrap;

	h2 {
		width: 100%;
		margin-left: 1em;
		margin-top: -.5em;

	}

}

div.box {
	margin: 1em auto;
	padding: 1em;
	padding-bottom: 0;

	h2 {
		margin-left: 0;
	}

	p:first-child {
		margin-top: 0;
	}

}

div.project {
	text-align: center;
	line-height: 3em;
	margin-bottom: 2em;

	a {
		background-color: var(--col_2);
		padding: .5em;
		text-wrap: nowrap;
		color: white;
		transition: background 300ms
	}

	a:hover {
		background: #06A;
	}

}

div.box_1 {
	width: 94%;
}

div.box_2 {
	width: 42%;
}

div.box_3 {
	width: 60.5%;
}

div.box_4 {
	width: 27%;
}

div.bg_trans {
	background: transparent;
}

div.bg_white {
	background: white;
}

div.bg_smoke {
	background: whitesmoke;
}

div.bg_ghost {
	background: ghostwhite;
}

div.bg_grad1 {
	background: linear-gradient(10deg, #def, transparent, #eef);
}

div.bg_1 {
	background: var(--col_1);
	color: white
}

div.bd_clear {
	border: 2px solid transparent;
	margin-top: 0;
	padding-top: 0;
}

div.bd_light {
	border: 2px solid whitesmoke;

}

div.bd_grey {
	border: 2px solid gainsboro
}

div.shadow {
	border: none;
	box-shadow: 5px 5px 20px #CCCC;
}

h1 {
	width: 100%;
	margin: .5em;
	margin-top: 0;
	font: 2em "Open Sans";
	color: var(--col_2);
}

h2 {
	margin-top: 0;
	font: 1.3em "Open Sans";
	color: var(--col_0);
}

h3 {
	margin: .5em 0;
	font: bold 1em "Open Sans";
	color: var(--col_0);
}

h3+p {
	margin-top: 0;
}

a {
	color: var(--col_2);
	padding: 1px;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 150ms
}

a[name] {
	display: block;
	height: 0;
}

input[type=button] {
	cursor: pointer;
	width: 10em;
	border: none;
	border-radius: 5px;
	background: var(--col_2);
	padding: .5em;
	color: white;
	font-size: 1em;
	transition: background 300ms
}

input[type=button]:hover {
	background: var(--col_1);
}

li {
	margin: 0 0 .5em -1em;
}

a:hover {
	background-color: #8884;
}


img.icon {
	float: right;
	width: 50px;
	margin: -.5em;
}

.left {
	margin: 0 auto 5% 2.5%;
}

.right {
	margin: 0 2.5% 5% auto;
}

.centre {
	margin: 0 auto;
	text-align: center;
}

.round {
	border-radius: 5px;
}

.fit {
	max-height: fit-content;
}

div.language {
	border: 1px solid gainsboro;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: ghostwhite;
	padding: .5em;
	font: .8em 'Roboto Mono';
}

pre {
	margin-top: 0;
	margin-bottom: 2em;
	tab-size: 1em;
}

code.hljs {
	background: #fcfcfe;
	border: 1px solid gainsboro;
	border-top: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 1em;
	font: .8em 'Roboto Mono';
}


dialog {
	width: 600px;
	max-width: calc(100% - 3em);
	border: 1px solid silver;
	border-radius: 5px;
	padding: 1em;

	iframe {
		width: 100%;
		height: 21rem;
		border: none;
	}

	input[type=button] {
		cursor: pointer;
		float: right;
		width: auto;
		background: #123;
		padding: .4em 1em;
	}

}

/*PayPal*/
div.css-s2u4oi {
	align-items: center;
}

div.vertical {
	margin-top: 0;
}

button#checkout-button {
	display: none;
}


@media (max-width: 1023px) {

	body {
		font-size: 13pt;
	}

	div.box_1, div.box_2, div.box_3, div.box_4 {
		width: 86%;
		margin: 0 auto 1em auto;
	}

	div.logo {
		background-size: 3em;
	}

}

@media (max-width: 769px) {

	body {
		font-size: 12pt;
	}

	h1 {
		font-size: 1.8em;
	}

	dialog {
		padding: .5em;
	}
}