mycss.css

body {
  font-family: monospace;
}

div {
  	transition:all 1s ease-in-out;
  	perspective: 800px;
  	perspective-origin: 50% 100px;
}

nav{
	width: 100%;
	overflow: hidden;
	background-color: rgba(0,0,30,.9);
	position: relative;
}  

ul{
	margin: 0 auto;
	text-align: center;
	padding-top: 2%;
}

ul li{
  	transition:all 1s ease-in-out;
	padding:0 5% 0 5%;
	display: inline;
	color: white;
	font-size: 20px;
}
ul li:hover{
	color: orange;
	background-color: lightblue;
}

img:hover{
  	transform:rotateY(360deg);
}

.yon{
	background-color: rgba(0,0,30,.5);
	width: 10%;
	overflow-x: hidden;
	text-align: center;
	position: absolute;
}
.yonel{
	padding: 10% 5%;
	font-size: 10px;
	color: white;
	max-height: 10px;
	
}
.yonel:hover{
	color: orange;
	font-size: 30px;
	background-color: lightblue;
	transform:rotateX(50deg);
}
article {
  	line-height: 1.5em;
  	margin-left: auto;
  	margin-right: auto;
  	max-width: 50rem;
  	padding-left: 5%;
  	padding-right: 5%;
  	position: absolute;
  	top: 30%;
  	left: 10%;
}

article h1 {
 	font-size: 12px
}
p{
	font-size: 9px
}
.cont{
	width: 10%;
	background-color: ;
	height: 10%;
	position: absolute;
	top: -10%;
}
.line1{
	width: 30px;
	height: 4px;
	background-color: rgba(0,0,0,0);
	position: absolute;
	top: 500%;
	right: 30%;

	
}
.line2{
	width: 30px;
	height: 4px;
	background-color: rgba(0,0,0,0);
	position: absolute;
	right: 700%;
	top: 50%;

}
.line3{
	width: 30px;
	height: 4px;
	background-color: rgba(0,0,0,0);
	position: absolute;
	right: 700%;
	top: 500%;
}
.cont:hover {
	background-color: (255,255,255,0.1)
}
.cont:hover > .line1 {
	background-color: rgba(0,0,0,1);
	top: 30%;
	right: 30%;
}
.cont:hover > .line2 {
	background-color: rgba(0,0,0,1);
	top: 50%;
	right: 30%;
}
.cont:hover > .line3 {
	background-color: rgba(0,0,0,1);
	top: 70%;
	right: 30%;
}

/*.promo2a:hover > p {display:block;}*/