*{
	margin: 0; padding: 0;
}


body {
 background-color: #234;
 color: #EEE;
 border: 8px solid #222;
 font-family: verdana, arial, sans-serif;
 padding-bottom: 800px;
 margin: 4px;
 padding: 12px;

}
header {
 border: 2px solid #222; 
 padding: 12px;
 text-align: center;
}

header > h1{
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
	color: yellowgreen;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid hotpink;
}

header span{
 display: block;
 border: 0px;
 color: #FF4
}

.subtitle{
	text-align: center;
	/*border: 2px solid #222;*/
	padding: 10px;
	line-height: 1.5;
	text-transform: lowercase;
	letter-spacing: 8px;
}

header + p{
	display: none;
}

/*CSS examples*/
section{
 display: flex;
 justify-content: center;
 flex-flow: row wrap;
}

section article{
 border: 2px solid hotpink;
 max-width: 360px;
 min-height: 200px;
 margin: 10px;
 flex: 0 0 auto;
}

article h2{
 font-size: 16px;
}

article p{
 margine: 8p;
 line-height: 1.4;
}
#art1 div {
  width: 70%;
  aspect-ratio: 2/1;
  background-color: pink;
  border-radius: 10px;
  margin: 8px auto;
  transform: rotate(-5deg);
}

#art2 div {
  width: 70%;
  aspect-ratio: 2.5/1;
  background-color: #000;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: -4px 8px 14px white;
}

#art3 h2{
  font-family: "Playwrite NO", cursive;
  text-align: center; 
  font-size: 18pt;
  color: yellow;
  border: 2px solid yellowgreen;
}

#art4 {
  position: relative;
}

#art4 h2{
  color: #FF3;
  position: absolute;
  bottom: 0; left: 0;
  border: 2px solid yellowgreen;
  width: 100%;
  text-align: center;
}

#art5 div{
  position: absolute;
}

#art5 div:nth-of-type(1) {
  width: 10%; aspect-ratio: 1;
  background-color: #F44;
  bottom: 5px; left: 525px;
  z-index: 5;
}

#art5 div:nth-of-type(2) {
  width: 10%; aspect-ratio: 1;
  background-color: #44F;
  bottom: -5px; right: 525px;
  z-index: 3;
}

#art6 {
  transition: all 300ms linear;
}

#art6:hover {
  color: #FF3;
  border: 2px solid yellowgreen;
  background-color: #404;
}