@charset "UTF-8";
/* CSS Document */
/* julianne aguilar */
/* julianne.computer */
/* juliannes.website*/

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

body {
	overflow: hidden;
	background: linear-gradient(99deg, rgba(144,139,223,1) 0%, rgba(7,105,99,1) 100%);
}

.content {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding:0;
	display: flex;
}

.content button {
	margin:auto;
}

#playButton {
        padding: 10px 10px;
        font-size: 2em;
		font-family: serif;
        color: white; 
        background-color: rgba(67,214,254,1);
        border: none;
		cursor: grabbing;
        transition: background-color 0.3s;
		opacity: 0.5;
		z-index: 5;
    }

#playButton:hover {
        background-color: rgba(10,150,220,1);
    }

#gif-container {
	margin: auto;
	z-index: 3;
	display: none;
}

#gif-container img {
	width: 100%;
	height: auto;
}

.element1 {
	position: absolute;
	width: 45vw;
	height: 105vw;
	background: linear-gradient(99deg, rgba(165,201,198,1) 0%, rgba(5,180,164,1) 100%);
	transform: skewX(-25deg);
	margin: auto;
	opacity: 0.7;
	filter: blur(24px);
	z-index: 1;
}

.element2 {
	position: absolute;
	width: 25vw;
	height: 105vw;
	background: linear-gradient(99deg, rgba(67,214,254,1) 0%, rgba(135,137,211,1) 100%);
	transform: skewX(40deg);
	margin: auto;
	opacity: 0.7;
	filter: blur(24px);
	z-index: 2;
}

.element3 {
	position: absolute;
	width: 55vw;
	height: 105vw;
    background: linear-gradient(90deg, rgba(133,135,210,1) 0%, rgba(61,118,143,1) 100%);
	transform: skewX(22deg);
	margin: auto;
	opacity: 0.5;
	filter: blur(24px);
	z-index: 3;
}

.element4{
	position: absolute;
	width: 65vw;
	height: 105vw;
	background: linear-gradient(310deg, rgba(174,255,254,1) 0%, rgba(60,210,253,1) 100%);
	transform: skewX(-55deg);
	margin: auto;
	opacity: 0.6;
	filter: blur(64px);
	z-index: 4;

}

.element5 {
	position: absolute;
	width: 45vw;
	height: 105vw;
	background: linear-gradient(99deg, rgba(165,201,198,1) 0%, rgba(5,180,164,1) 100%);
	transform: skewX(-25deg);
	margin: auto;
	opacity: 0.7;
	filter: blur(24px);
	z-index: 1;
	animation: ani1 60s linear alternate infinite;
}

.element6 {
	position: absolute;
	width: 25vw;
	height: 105vw;
	background: linear-gradient(99deg, rgba(67,214,254,1) 0%, rgba(135,137,211,1) 100%);
	transform: skewX(40deg);
	margin: auto;
	opacity: 0.7;
	filter: blur(24px);
	z-index: 2;
	animation: ani2 60s linear alternate infinite;
}

.element7 {
	position: absolute;
	width: 55vw;
	height: 105vw;
    background: linear-gradient(90deg, rgba(133,135,210,1) 0%, rgba(61,118,143,1) 100%);
	transform: skewX(22deg);
	margin: auto;
	opacity: 0.5;
	filter: blur(24px);
	z-index: 3;
	animation: ani3 60s linear alternate infinite;
}

.element8{
	position: absolute;
	width: 65vw;
	height: 105vw;
	background: linear-gradient(310deg, rgba(174,255,254,1) 0%, rgba(60,210,253,1) 100%);
	transform: skewX(-55deg);
	margin: auto;
	opacity: 0.6;
	filter: blur(64px);
	z-index: 4;
	animation: ani4 60s linear alternate infinite;
}

.textbox {
	padding: 0px 50px 0px 0px;
	width: 40vw;
	height: 60vh;
	margin: auto;
	border: 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-color: rgba(135,137,211,0.8) rgba(67,214,254,0.8);
	z-index: 5;
	white-space: nowrap;
}

.youPromised {
	font-family: serif;
	animation:text 15s ease alternate infinite;
}

.iPromised {
	font-family: serif;
	animation:text 25s ease alternate infinite;
	filter: blur(3px);
}

.fadeIn {
	animation: fade 4s linear 1;
}

@keyframes ani1 {
	100% { transform: scale(2, 2) skew(37deg, 9deg); }
}
	
@keyframes ani2 {
	100% { transform: skew(36deg, 90deg); }
}
	
@keyframes ani3 {
	100% { transform: skew(-27deg, -200deg) rotate(122deg); }
}
	
@keyframes ani4 {
	100% { transform: skew(46deg, -185deg); }
}

@keyframes text {
	0% {color:rgba(165,201,198,1);}
	12% {color:rgba(5,180,164,1);}
	24% {color:rgba(67,214,254,1);}
	38% {color:rgba(135,137,211,1);}
	51% {color:rgba(133,135,210,1);}
	69% {color:rgba(61,118,143,1);}
	84% {color:rgba(174,255,254,1);}
	100% {color:rgba(60,210,253,1);}
}

@keyframes fade {
	0% {opacity: 0;}
	100% {opacity: 1;}
}