body {
	counter-reset: section;
	text-align: center;
	background-color: #c2bfae;
	width: 50%;
}

@keyframes colora {
    from {background-color: rgba(65, 107, 109, .5);}
    to {background-color: rgba(99, 60, 33, .5);}
}

@keyframes colorb {
    from {background-color: rgba(99, 60, 33, .5);}
    to {background-color: rgba(65, 107, 109, .5);}
}

section {
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.circle {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	margin: 5px;
}

.top {
     height:100px;
     width:200px;
     border-radius: 100px 100px 0 0;
     margin-top: 5px;
}

.left {
	height: 200px;
	width: 100px;
	border-radius: 200px 0 0 200px;
	margin-left:5px;
}

.main .circle {
	margin-top: -100px;
}


.blue {
	background: rgba(65, 107, 109, .5);
	animation-name: colora;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.brown {
	background: rgba(99, 60, 33, .5);
	animation-name: colorb;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


#one {
	margin-top: -100px;
	margin-bottom: 5px;
}

.two {
	flex-direction: row; 
	margin-right: 205px;
}


.three {
	flex-direction: row; 
	margin-left: 105px;
	margin-top: -100px;
}


h1 {
	line-height: .5em;
	font-weight: bold;
	font-size: 1.75em;
}

.info {
	position: absolute;
	z-index: -10;
	bottom: 10%;
	text-align: left;
	font-family: Helvetica, sans-serif;
}

.image {
	position: fixed;
	top: 0px;
	z-index: 20;
	right: 15px;
}

.little {
	color: #003a44;
	font-size: .5em;
	margin-top: 5em;
}