:root {
	--head-grad-w:810px;
	--form-control-color:#000;
	--color-green0:#57793c;
	--color-green0-hl:#709c4d;
	--color-green1:#652f53;
	--color-green2:#adba74;
	--color-green3:#f6f8ed;
	--color-orange:#e57649;
	--color-orange-hl:#f9804f;

	--color-bg0:#ccc;
	--color-bg1:#777;
}

html, body, div, h1, h2, h3, h4, p {
	margin: 0;
	padding:0;
	/*font-family:Gabarito;*/
	color:#666;
	box-sizing: border-box;
}

html {
	background: linear-gradient(180deg, var(--color-bg0) 0%, var(--color-bg1) 100%);
	font-family: var(--theme-font);
}

body {
	width:590px;
	margin-left:auto;
	margin-right:auto;
	margin-top:14px;
	/*
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	*/
	/*padding:0 2em;*/
	min-height:100vh;
	/*box-shadow: 0 0 16px 1px #00000020;*/
	position:relative;
	display:flex;
	flex-direction: column;
}

header#linktree {
	width:100%;
	background-color:#fff;
	/*height:4em;*/
	display:grid;
	place-content: center;
}
.social {
	width:100%;
	text-align: center;
	position: relative;
	display: flex;
}
.social::before,
.social::after {
	content:'';
	height:1px;
	background-color:#fff4;
	display: block;
	margin-top: calc(1em - 2px);
	flex-grow:1;
}
.social div {
	background-color:#d9b423;
	color:#fff;
	padding:8px;
	border:1px solid #fff;
	border-radius:50%;
	display:inline-block;
	width:2em;
	height:2em;
	display:inline-grid;
	place-content: center;
	margin:-2px 4px;
}
.social div img {
	filter: invert(100%);
}
main#linktree {
	width:100%;
	background: var(--color-mainbox);
	flex-grow:0;
	display:flex;
	flex-direction: column;
	align-items: center;
	padding:2em 0;
}
footer#linktree {
	width:100%;
	background-color:#fffc;
}

h1 {
	font-size:25px;
	font-weight:900;
	text-transform:uppercase;
	text-align:center;
	padding-top:2em;
	padding-bottom:1em;
}

h2 {
	font-size:15px;
	font-weight:600;
	padding-top:2em;
	padding-bottom:1em;
}

p {
	padding-bottom:0.66em;
}

a {
	color:var(--color-green-dk);
	text-decoration:none;
	border-bottom:1px dashed var(--color-green-dk);
}

main#linktree.button-links a {
	display:block;
	background-color:var(--color-btn-bg);
	border-radius: 12px;
	padding:16px;
	color:var(--color-btn-txt);
	font-weight:600;
	text-transform:uppercase;
	width:250px;
	text-align: center;
	margin:4px;
	overflow: hidden;
	hyphens: auto;
	word-break: break-word;
	transition: box-shadow 0.1s ease-in;
}
main#linktree.button-links a:hover {
	box-shadow:inset 0 0 100px 100px #ffffff20;
}
main#linktree.button-links a:active {
	box-shadow:inset 0 0 100px 100px #ffffff40;
}

/*
.form-row {
	margin-bottom:0.5em;
}

.form-row label {
	padding-right:0.5em;
	display:inline-block;
	min-width:9em;
}

.form-row input[type=checkbox] + label {
	color:red;
	padding-left:1.4em;
	text-indent:-0.7em;
	display:block;
}
*/

.form-row label.required:after {
	content:'*';
	font-size:0.875em;
	vertical-align:super;
	padding-left:0.25em;
	font-weight:900;
}

fieldset {
	border-width:0;
}

fieldset > div {
	display:flex;
	margin-bottom:0.5em;
}

fieldset > div > * {
	align-self:baseline;
}

fieldset > div > input {
	flex-shrink:0;
}

fieldset > div > label {
	min-width:9em;
}

fieldset > div > input[type=checkbox] {
	margin: 0 0.5em 0 0;
	width:1em;
	height:1em;
}

fieldset div.error {
	display:block;
	color:red;
	font-style:italic;
}

.form-row input[type=submit] {
	border-width:0;
	background-color:#4c4;
	color:#fff;
	padding:7px 14px;
	transition: background-color 0.2s ease;
	margin-left:6em;
	margin-top:1em;
}

.form-row input[type=submit]:hover {
	background-color:#7a7a7a;
}

.frame {
	border: 1px solid #ccc;
	margin:2em;
	padding:2em 4em;
	box-shadow: 0 0 16px 1px #00000020;
	display:grid;
}

input#processing {
	margin-top: 2em;
}

div.spacer {
	flex-grow:1;
}

/**********************************************************************/

.lvberlin-logo {
	padding-top:2em;
}
.lvberlin-logo img {
	width:288px;
	max-width:75%;
}

.btn-page-edit {
	/*background-color: #5e89b7;*/
	background: rgb(160,160,160);
	color: #000;
	font-size: 1.1rem;
	font-weight:100;
	border: 1px solid #999;
	border-radius:0 6px 0 0;
	padding: .25em .5em;
	margin: .5em 0.25em;
	float: right;
	position:relative;
	box-shadow:3px 2px 4px 0 #0003;
	cursor:pointer;
}

.btn-page-edit::after {
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 23%, rgba(255,255,255,0) 100%);
}

.btn-save {
	/*background: rgb(94,137,183);*/
	background: #4c4;
}

.btn-revert {
	background: #777;
}

.center {
	display:flex;
	justify-content: center;
}

.infoheader {
	background:#f00;
	border: 2px solid #d00;
	border-top:0;
	font-size: 16px;
	font-weight: 100;
	padding:0.25em 1em;
	color:#000;
}

footer {
	text-align: center;
	color: #888;
	font-size: 12px;
	font-weight: 600;
	padding: .66em 0;
	text-transform: uppercase;
	margin-top:2px;
}

footer a {
	border-bottom: 0;
	color:#777;
}

@media(max-width:620px) {
	body#linktree {
		width:450px;
	}
}
@media(max-width:450px) {
	body#linktree {
		width:100vw;
	}
	header#linktree img {
		width:88vw;
		height:auto;
	}
}
@media(max-width:320px) {
	main#linktree.button-links a {
		width:180px;
	}
}


/*
@media(max-width:786px) {
	body#linktree {
		width:560px;
	}
	footer#linktree {
		width:560px;
	}
}

@media(max-width:626px) {
	body#linktree {
		width:calc(100% - 1em);
		padding: 0 0.5em;
	}
	footer#linktree {
		width:calc(100% - 1em);
	}
	.lvberlin-logo {
		text-align: center;
	}
	h1 {
		padding-top:1em;
	}
}
*/