/*
 * custom.css
 * mainly modifications for ivy themes style.css
 */

body {
	background-image: url("/img/background-body.png");
	background-position: left -260px top 200px;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family:  Georgia, Times, Times New Roman, Bodoni, Garamond, Palatino, ITC Clearface, Plantin, Didot, American Typewriter;

}

header.masthead {
	padding-top: 300px;
	background-image: url("/img/background-header-traumaarbeit.png"), url("/img/background-header-blume.png");
	background-repeat: no-repeat, no-repeat;
	background-attachment: scroll, scroll;
	background-position: left 0px top 0px, left 50px top 120px;
}
/*
 * different postioning and sizes for background images for mobile devices
 */
@media screen and (max-width: 960px) {
	header.masthead {
		border-bottom: 0;
		background-position: center top 10px, center top 160px;
		background-size: 80%, 50%;
	}
}
/*
 * fix navigation for desktop devices
 */
@media screen and (min-width: 960px) {
	header.masthead {
		position: fixed;
		width: 360px;
		padding-right: 70px;
		background-size: 100%, 60%;
	}
}
/*
 * do **not** fix navigation for desktop devices of not sufficient height
 */
@media screen and (max-height: 1000px) {
	header.masthead {
		position: inherit;
	}
}


/*
 * create a left border as it is on the physical info card
 * the dotted left border shall align vertically with T of the background image traumaarbeit
 */
article.main {
	border-left: 3px dotted darkgrey;
	padding-top: 10px;
}
@media screen and (min-width: 960px) {
	article.main {
		margin-left: 334px;
	}
}
/*
 * hide left border of article for mobile devices
 */
@media screen and (max-width: 960px) {
	article.main {
		border-left: 0;
	}
}

a {
	color: Purple;
	border-bottom: none;
}

article>p {
  color: DimGrey;
}

article>p>img {
  padding-bottom: 60px;
}

article>dl>dd {
  text-align: end;
}

/* see:
 * https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
 */
img {
  height: auto;
}

/*
 * get name awy from background image blume
 */
.masthead h1 {
  margin-top: 60px;
}