* {
	margin: 0;
	padding: 0;
	overflow: auto;
}



main {
	width: 100vw;
	height: auto;
}

section {
	width: 60%;
	height: auto;
	margin-left: 15%;

	font-family: helvetica;
}

.im {
	float: left;
	margin-left: 2%;
	width: 20%;
	height: 60%;
}

.hp {
	float: left;
	margin-left: 15%;
	margin-top: -5%;
}

h1 { 
			
			color: orangered;
			font-size: 150px;
	 }

h2 {
	       
			color: yellowgreen;
			font-size: 100px;
}

h3 {
	 		
			color: purple;
			font-size: 80px;
	 }


p {

			color: blue;
			font-family: helvetica;
			font-size: 70px;
}

a {
			color: red;
			font-family: helvetica;
			font-size: 30px;
}

a:hover {
			color: limegreen;
}

pre {
	color: yellow;
	float: left;
	margin-left: 2%;
	margin-top: 2%;
}

.lightgreen {
	color: lightgreen;
}


body { 
	background-color: #ADA89E;
	
 }

#egg1 {
	
	animation: up-opacity 10s;
}

@keyframes up-opacity {
	0%		{opacity:  0; }
	100% 	{opacity:  20; }
}

/* HERE IS MY BREAKPOINT FOR TABLETS */

@media screen and (max-width: 1200px) {
	body {
		background-color: #EC6326;
	}


}


/* HERE IS MY BREAKPOINT FOR SMARTPHONES */

@media screen and (max-width: 600px) {
	body {
		background-color: #FAB716;
	}

}




#intro {
	width: 30vw;
	height: auto;
}

#egg {
	margin-top: -20vh;
}