ul.menu {
	position: sticky;
	top: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgba(39,39,39,0.8);
	border-bottom: 3px solid white;
	z-index: 5;

}

ul.menu:hover{
	box-shadow: 2px 2px 1px  rgba(255,255,255,0.3);
}
li.menu#article {
	float: left;
	width: 20%;
	margin-right:-20px;
	margin-left: 20px;
	line-height: 70px;
	text-align: center;
}

li.menu#article a {
	border-radius: 5px;
	display: block;
	color: white;
	padding-top: 0px;
	text-decoration: none;
}

li.menu#article a:hover {
	background-color: rgba(102, 194, 255,0.8);
}
.github{
	float: left;
	border: 3px solid white;
	margin: 16px;
	float: right;
	height: 32px;
	background: #FFFFFF;
	border-radius: 100%;
}
@keyframes ghithub_hover {
	0% {background-color:white;}
	50% {background-color:#ca85ff;}
	100% {background-color:white;}
}
.github:hover{

	background-color:#F7F8FD;
	animation-timing-function: ease-in-out;
	animation-name: ghithub_hover;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-delay: 2;
}


div.pinguin_container{
	display: flex;
	border: 3px solid white;
	border-radius: 30% ;
	align-items: center; 
	justify-content: center;
	background-color: #c2c2a3;
	overflow: hidden;

}
div.pinguin_head{
	height: 100%;
	width: 70%;
	margin-top: 10px;
	border-radius: 20% 20% 0 0;
	background-color: rgb(38,33,32);

}
div.pinguin_eyes_o{
	width: 41%;
	height: 30%;
	border-radius: 5px;
	margin-left: auto;
	margin-top: 21%;
	margin-right: 8%;
	background-color: white;
	display: flex;
	align-items: center; 
	justify-content: center;
	position: relative;
}
div.pinguin_eyes_t{
	width: 41%;
	height: 30%;
	border-radius: 5px;
	background-color: white;
	margin-top: -43%;
	margin-left: 8%;
	display: flex;
	align-items: center; 
	justify-content: center;
	position: relative;
	
}

@keyframes pinguin_eyelid {
	0% {height: 25%;}
	25% {height: 103%; radius: 12px 12px 25px 25px}
	50% {height: 25%;}
	100% {height: 25%;}
}
div.eyelid{
	position: absolute;
	width: 105%;
	height: 25%;
	border-radius: 7%;
	left: 0px;
	top: -2%;
	background-color: rgb(46,43,38);
	z-index: 2;
	animation-duration: 3s;
	animation-name: pinguin_eyelid;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	
	
}


div.pupil{
	width: 48%;
	height: 48%;
	border-radius: 25%;
	background-color: black;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 22.5%;
	z-index: 1;


	
}
div.pinguin_beak{
	position: relative;
	width: 25%;
	height: 17%;
background: #FF833F;
background: linear-gradient(170deg,rgba(255, 131, 63, 1) 2%, rgba(233, 100, 85, 1) 23%, rgba(170, 95, 91, 1) 72%, rgba(94, 90, 98, 1) 98%);
	margin-left: 37.5%;
	margin-top: -10%;
	border-radius: 5px 5px 10px 10px ;
	z-index: 2;
}

@keyframes belly {
	0% {margin-top: 3%;}
	50% {margin-top: 5%;}
}
div.pinguin_belly{
	width: 50%;
	height: 41%;
	margin: auto;
	border-radius: 25% 25% 0 0;
	margin-top: 5%;
	background: #F7F8FD;
	background: linear-gradient(0deg,rgba(247, 248, 253, 1) 0%, rgba(237, 220, 204, 1) 57%, rgba(198, 104, 3, 1) 93%);
	animation-name: belly;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
}