html{
	background-color: #CCEBFC;
	width: 1920px;
	height: 1080px;
	margin: auto;
	overflow: hidden;
}

body{
	margin-left: -10%;
	margin-right: -10%;
	margin-top: 0%;
}

header{
	display: none;
}

@keyframes scaledot{

	0%		{ transform: scale(0.1); }
	50%		{ transform: scale(0.8); }
	100%	{ transform: scale(0.1); }
}

@keyframes transitiondot {
	0%		{ color: aliceblue; }
	50%		{ color: #FCD8FC; }
	100%	{ color: aliceblue; }
}

@keyframes scalesquare{

	0%		{ transform: scale(0.8) rotate(0deg); }
	50%		{ transform: scale(0.1) rotate(45deg); }
	100%	{ transform: scale(0.8) rotate(90deg); }
}

.dot1{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -5%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
}

.dot2{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -3%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
	animation-delay: 0.3s;
}

.dot3{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -3%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
	animation-delay: 0.6s;
}

.dot4{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -3%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
	animation-delay: 0.9s;
}

.dot5{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -3%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
	animation-delay: 1.2s;
}

.dot6{
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -3%;
	background-color: #FCD8FC;
	border-radius: 50%;
	display: inline-block;
	position: center;
	animation: scaledot 3s infinite;
	animation-delay: 1.5s;
}

#emily{
	margin-left:4%;
}
.square1 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	background-color: #DCFCCB;
	margin-top: -5%;
	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	
}

.square2 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -5%;
	background-color: #DCFCCB;

	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	animation-delay: 0.3s;
}

.square3 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -4%;
	background-color: #DCFCCB;

	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	animation-delay: 0.6s;
}

.square4 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -4%;
	background-color: #DCFCCB;
	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	animation-delay: 0.9s;
}

.square5 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -4%;
	background-color: #DCFCCB;

	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	animation-delay: 1.2s;
}

.square6 {
	width: 180px;
	height: 180px;
	margin-left: 0%;
	margin-top: -4%;
	background-color: #DCFCCB;

	display: inline-block;
	position: center;
	animation: scalesquare 3s infinite;
	animation-delay: 1.5s;
}