/* CSS Document */
/* cry, baby, cry */
/* julianne aguilar */
/* juliannes.website */
/* 2021 */

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

body {
	font-family: 'Tangerine', cursive;
	margin: 0;
	padding: 0;
}

#container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.content {
	height: 100vh;
	width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	overflow: hidden;
}

a {
	color: #fff;
}

a:link, a:visited, a:active {
    color: #fff;
    text-decoration: none;
}

a:hover {
	color: deeppink;
	text-decoration: none;
}

.content p {
    font-size: 5em;
	color: white;
	margin: 25px;
	text-shadow: 5px 5px rgba(0,0,0,0.50);
}

.content img {
	height: 100%;
	width: auto;
	max-height: 70vw;
	max-width: auto;
	-webkit-animation: fade 30s alternate infinite;
	animation: fade 30s alternate infinite;
}

.content div {
	margin-right: 10%;
}

.credits p {
	font-size: 3em;
	color: white;
	margin: 25px;
	text-shadow: 5px 5px rgba(0,0,0,0.50);
}

.gradientOne {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #2b8c8e, #d88aad, #dbcdd2, #9ec0bf);
	-webkit-animation:spin 60s alternate ease-in-out infinite;
	animation:spin 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

.gradientTwo {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #f893bd, #efcac2, #779ec5, #2d4bab);
	-webkit-animation:spintwo 60s alternate ease-in-out infinite;
	animation:spintwo 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

.gradientThree {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #d078a7, #cdbc97, #71b1af, #095593);
	-webkit-animation: spinthree 60s alternate ease-in-out infinite;
	animation: spinthree 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

.gradientFour {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #a5d5cd, #d8d6a7, #6dc9b3, #ebcad8);
	-webkit-animation: spinfour 60s alternate ease-in-out infinite;
	animation: spinfour 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

.gradientFive {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #6aaa87, #d7d0ca, #60b7c8, #ea9dc9);
	-webkit-animation: spinfive 60s alternate ease-in-out infinite;
	animation: spinfive 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

.gradientSix {
	width: 40vw;
	height: 30vw;
	background-image: linear-gradient(to bottom right, #cc6ba1, #63739b, #d7b0cd, #0b5792);
	-webkit-animation: spinsix 60s alternate ease-in-out infinite;
	animation: spinsix 60s alternate ease-in-out infinite;
	background-repeat: no-repeat;
}

@-webkit-keyframes spin {
	100% { -webkit-transform: rotate(360deg) skew(360deg, 0deg); }
}

@keyframes spin {
	100% { transform: rotate(360deg) skew(360deg, 0deg); }
}
	
@-webkit-keyframes spintwo {
	100% { -webkit-transform: scale(2, 2) skew(180deg, 0deg); }
}

@keyframes spintwo {
	100% { transform: scale(2, 2) skew(180deg, 0deg); }
}

@-webkit-keyframes spinthree {
	100% { -webkit-transform: translate(-420px, -45px) skew(-180deg, 0deg); }
}

@keyframes spinthree {
	100% { transform: translate(-420px, -45px) skew(-180deg, 0deg); }
}

@-webkit-keyframes spinfour {
	100% { -webkit-transform: translate(-520px, -100px) skew(180deg, 45deg); }
}

@keyframes spinfour {
	100% { transform: translate(-520px, -100px) skew(180deg, 45deg); }
}

@-webkit-keyframes spinfive {
	100% { -webkit-transform: rotate(360deg) skew(45deg, -200deg); }
}

@keyframes spinfive {
	100% { transform: rotate(360deg) skew(45deg, -200deg); }
}

@-webkit-keyframes spinsix {
	100% { -webkit-transform: translate(-520px, 100px) skew(0deg, -180deg); }
}

@keyframes spinsix {
	100% { transform: translate(-520px, 100px) skew(0deg, -180deg); }
}

@-webkit-keyframes fade {
	0% { opacity: 0.7; }
	15% { opacity: 0.2; }
	30% { opacity: 0.6; }
	50% { opacity: 0; }
	65% { opacity: 0.3; }
	80% { opacity: 0.5; }
	100% { opacity: 0.7; }
}

@keyframes fade {
	0% { opacity: 0.7; }
	15% { opacity: 0.2; }
	30% { opacity: 0.6; }
	50% { opacity: 0; }
	65% { opacity: 0.3; }
	80% { opacity: 0.5; }
	100% { opacity: 0.7; }
}