body {
	display: grid;
	gap: 0.5em;
}

@media (min-width: 45em) {
	/* Breite beträgt mindestens 45em */
	
	body {
		grid-template-columns: 0.1fr 3.4fr 1.5fr;
		grid-template-rows: auto 1fr 100px;
	}
}

h1{
    display: flex;
    align-items: center;
    justify-content: center;
}

#header_headline{
	color: rgb(255, 125, 196);
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 40pt;
}

#light_headline{
	color: rgb(255, 230, 247);
}


header,
nav,
main,
article,
section,
aside,
footer {

	border: thin solid;
	padding: 10px;
}

header,
footer {
	grid-column: 1 / -1;
}

header {
	background: #FFDDE8;
	padding-bottom: 200px;
	border-color: #d5d5d5;
	display: grid;
	/*grid-template-columns: min-content 1fr;*/
	background-image: url(emos_kissing.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
	align-items: center;
}

.zeichnungen_header{
	background-image: url(bg_03.jpg);
}

.aboutme_header{
	background-image: url(bg_01.jpg);
}

.cutepics_header{
	background-image: url(bg_02.jpg);
}

.gaestebuch_header{
	background-image: url(bg_04.jpg);
}


nav {
	background: #ff9bc5;
	border-color: #e7c15700;
}

nav ul {
	list-style: none;	
}

#nav_li {
	padding-bottom: 1em;
}

nav a {

}

main {
	background: #ff9bc5;
	border-color: #df6c2000;
}

aside {
  	padding-left: 30px;
  	padding-right: 30px;
	background: #ff9bc5;
	border-color: #8db24300;
	font-family: 'Courier New', Courier, monospace;
}

footer {
	padding-left: 50px;
	background: #ffd4e6;
	border-color: #8a9da800;
}

footer * {
	float: right;
	clear: right;
	margin: 0 0 1em;
}

body {
	margin: 0 auto;
    max-width: 100%;
	font-family: sans-serif;
	background-color: rgb(0, 0, 0);
}

.smallimages{
	width: 50%;
}

#oli_sykes {
	width: 100%;
}

#puppy {
	width: 100%;
}



.highlighted{
	color: rgb(64, 255, 47);
}

.hiddenletter{
	color: rgb(255, 94, 0);
}

 .visually-hidden,
[visually-hidden="true"] {
	position: absolute !important;
	clip-path: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
}

[aria-expanded] {
  width:2em;
  height: 2em;
  background: transparent;
  color: transparent;
  outline:transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1,2 h7 M1,5 h7 M1,8 h7' fill='none' stroke='gold' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
[aria-expanded="true"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2,2 l6,6 M8,2 l-6,6' fill='none' stroke='%23c82f04' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[aria-expanded=false] ~ ul {
	font-size: 0;
	height:0;
	transition: all 1s;
}

[aria-expanded=true] ~ ul {
	font-size: 1em;
	height: 100%;
	transition: all 1s;
}


:root {
	--background-color: #113;
	--accent1-color: rgb(151, 255, 137);
	--accent2-color: darkred;	
	--text-color: black;
	--blue: #337599;
	--blue4: #adc8d6;
}