@font-face {
    font-family: 'dejavu_sansCnBdOb';
    src: url('DejaVuSansCondensed-BoldOblique-webfont.woff') format('woff');
    font-weight: bold;
    font-style: oblique;

}
* {margin:0;padding: 0}
html {scroll-behavior: smooth}
body {padding:2rem;font: normal normal normal .85rem/normal sans-serif}
body > * {max-width: 920px;margin: 0 auto}
body {    
	animation: fadeInAnimation ease 3s; 
	animation-iteration-count: 1; 
	animation-fill-mode: forwards; 
	background-color: #DC3838;color:#000
	} 
	@keyframes fadeInAnimation { 
		0% { opacity: 0 }
		100% { opacity: 1 }
	} 

a {text-decoration: none;color:#bedb6b}
.text p {margin: 1rem;font-size: .95rem;line-height: 1.15rem}
iframe { display:block}

header {text-align: center;font-family: 'dejavu_sansCnBdOb',sans-serif}
header h1 {color: #253423;font-size: 5.5rem;margin-top:1.4rem;font-weight: bolder;font-style: italic;line-height: 5rem}
header h2 {text-transform: uppercase;color: #bedb6b;font-size: 1.56rem;margin-bottom: 1.2rem;font-style: italic;letter-spacing: 1px;}

nav {padding: 0;}
nav ul {
	display: flex;flex-direction: row;justify-content: flex-end;
	list-style-type: none;gap:1rem; text-transform: uppercase;padding:.8rem;margin-bottom:1rem}
nav a {font-weight: bold;font-size: .9rem;letter-spacing: 0.03em;color: #fff;}
nav a:hover {text-decoration: underline;}

section h2 {
	text-align: center;padding: .3rem;
	color: #253423;background-color: #bedb6b;
	text-transform: uppercase;font-size: 1.3rem;margin-bottom: 2rem
}
section h2 b {font-size: 1.1rem}
section article {display: flex;margin-bottom: 1rem;flex-wrap:wrap}
section article > div {border: 1px solid #000}

article .title {flex-grow: 2;flex-basis: 7rem}
article .color {flex-grow:1;border-width:1px 0;flex-basis: 1rem}
article .bandcamp {flex-grow: 2}
article .text {flex-grow: 6;flex-basis: 22rem}

#music .title {padding: 0 .6rem;display: flex;align-items: center}

#concepts .title {padding: 1.4rem 0;text-align: center;flex-basis: 16rem}
#concepts .title h3 {font-size:1.4rem;font-style: italic;margin-bottom: 1rem}

#contact .text {text-align: center;flex-grow: 2;flex-basis: 30%;padding: 1.4rem}
#contact .text h3 {font-size:1.4rem;font-style: italic;margin-bottom: 1rem}
#contact .foto {flex-grow: 1;flex-basis: 14rem;border-width:1px 0}
#contact .foto img {width: 100%;height: auto;display: block;}

aside {font-style: italic;margin-bottom:3rem}
aside p {padding: .4em}
footer {font-style: italic}
footer p {text-align: center;padding: .5rem .5rem 1rem .5rem;font-size: 1rem;font-weight: bold}

@media (max-width:938px)  {
	#contact .foto {flex-basis: 12rem}
	#contact .foto {border-width: 1px 1px 0 1px}
	#contact article .text:first-child {border-width: 1px 1px 0 1px}
	#contact .foto {border-width: 1px 1px 0 0}
	#contact .text {padding: 1rem}
}

@media (max-width:692px)  {
	header h2 {font-size: 1.4rem}
	#music .title h3 {font-size:.9rem}
	#concepts .color {border-width: 1px 1px 1px 0 } 
	#concepts .text {border-width: 0 1px 1px 1px}
}

@media (max-width:514px)  {
	body {padding:.8rem}
	.text p {margin: .6rem}
	header h1 {font-size: 4rem;margin-top:1rem;line-height: 4rem}
	header h2 {font-size: 1rem;margin-bottom: 1.4rem}
	nav ul {justify-content: center}
	nav a {font-size: .9rem}
	section h2 {font-size: 1.1rem;padding: .25rem;margin-bottom: 1rem}
	section h2 b {font-size: .9rem}
	article .color {border-width: 1px 1px 1px 0 }
	article .bandcamp {border-width: 0 1px 1px 1px}
	#music .title {padding: .6rem}
	#concepts .title {flex-basis: 8rem;padding: .6rem 0}
	#concepts .title h3 {font-size:1.2rem;margin:0}
	#contact article {display: flex;margin-bottom: 1rem;flex-direction: column}
	#contact .foto {min-height: 20rem}
	#contact .text h3 {font-size:1.15rem}
	aside {margin-bottom: 1.5rem}
	aside p {padding: .4em;font-size: .75rem}
	footer p {font-size: .9rem}
}