/* CSS Document */
/* just whistle
julianne aguilar
juliannes.website
2021 */

html, body {
	min-height: 100%;
}

body {
	margin: 0;
	padding: 0;
	-webkit-animation: bg 30s linear alternate infinite;
	animation: bg 30s linear alternate infinite;
	font-family: 'Pirata One', cursive;
	font-size: 5em;
}

#container {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

#container>div {
	position: absolute;
	-webkit-animation: ilu 25s linear alternate infinite;
	animation: ilu 25s linear alternate infinite;
	width: 60vw;
	height: 30vw;
	border-style: solid;
	border-width: 5px;
	transform: translate(-50%, -50%);
}

.object1 {
	border-color: #D2C4FF;
	left: 40%;
	top: 60%;
}

.object2 {
	border-color: #BA9CE4;
	left: 45%;
	top: 55%;
}

.object3 {
	border-color: #350455;
	left: 50%;
	top: 50%;
}

.object4 {
	border-color: #26F5F5;
	left: 55%;
	top: 45%;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@-webkit-keyframes bg {
	0% { background-color: #D2C4FF; }
	33% { background-color: #BA9CE4; }
	66% { background-color: #350455; }
	100% { background-color: #26F5F5; }
}

@keyframes bg {
	0% { background-color: #D2C4FF; }
	33% { background-color: #BA9CE4; }
	66% { background-color: #350455; }
	100% { background-color: #26F5F5; }
}

@-webkit-keyframes ilu {
	0% { color: #D2C4FF; }
	33% { color: #BA9CE4; }
	66% { color: #350455; }
	100% { color: #26F5F5; }
}

@keyframes ilu {
	0% { color: #D2C4FF; }
	33% { color: #BA9CE4; }
	66% { color: #350455; }
	100% { color: #26F5F5; }
}