/********************************************************/
/**                                                    **/
/**                                                    **/
/**       Stylesheet for portfolio web project         **/
/**            created by: Michael DeVoll              **/
/**                                                    **/
/**                                                    **/
/********************************************************/

:root {
	font-size: 16px;
	--clear: rgba(255, 255, 255, 0);
	--cream: #ffebd2;
	--orange: #ffa364;
	--red-orange: #fc7643;
	--grey: #999999;
	--very-grey: #efefef;
	--almost-black: #0e0e0e;
	--almost-white: #ccc;
	--white: #fff;
	--dark-background: #242424;
	--dark-gradient-1: #1d1d1d;
	--dark-gradient-2: #242424;
	--dark-gradient-3: #2c2c2c;
}

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	padding: 0;
	margin: 0;
	color: var(--almost-black);
}

h1 {
	font-family: mono45-headline, monospace;
	font-weight: 300;
	font-style: normal;
	font-size: 10rem;
	color: #0e0e0e;
	margin-bottom: -10px;
	padding: 10px;
	background-color: var(--orange);
	box-shadow: -6px 6px 0px #3b1f09;
}
.container p {
	color: #0e0e0e;
	font-family: arboria, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.25rem;
	padding: 10px;
	background-color: var(--red-orange);
	box-shadow: -6px 6px 0px #3b1f09;
}

.container .left-content p:nth-of-type(1){
	padding: 30px 20px;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 2rem;
}

h2,
h3 {
	font-family: arboria, sans-serif;
	font-weight: 700;
	font-style: normal;
}

h4 {
	font-family: arboria, sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 190;
	text-transform: uppercase;
	font-size: 1.5rem;
	letter-spacing: -1px;
}

p {
	font-family: arboria, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 1px;
	color: var(--almost-black);
}
a {
	text-decoration: none;
	color: var(--almost-black);
}
/** end general styles **/

/**************************************/
/**                                  **/
/**          for home page           **/
/**                                  **/
/**************************************/
.container {
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 0;
	background: linear-gradient(145deg, #FFAF76, #ffebd2);
    background-size: 400% 400%;
    -webkit-animation: pulse 8s ease-in-out infinite;
    -moz-animation: pulse 8s ease-in-out infinite;
    animation: pulse 8s ease-in-out infinite;
	z-index: 1;
}

.column {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: var(--clear);
}

.left {
	display: flex;
	justify-content: center;
	text-align: right;
	width: 100%;
	height: 100vh;
	align-items: center;
	padding-left: 60px;
	opacity: 0;
	animation: fadeIn 1.5s 0.5s forwards;
}
.left-content {
	opacity: 0;
	animation: fadeIn 1.5s 0.5s forwards;
}

.right {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: right;
	width: 100%;
	height: 100vh;
	align-items: center;
	padding-right: 60px;
	opacity: 0;
	animation: fadeIn 1.5s 0.5s forwards;

}
.right-content {
	opacity: 0;
	animation: fadeIn 1.5s 0.5s forwards;
}

/** end homepage **/

/**************************************/
/**                                  **/
/**      for homepage buttons        **/
/**                                  **/
/**************************************/
.btn {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 4rem;
	height: 120px;
	width: 120px;
	border-radius: 10px;
	transition: 0.3s;
}
.btn.one {
	left: 45%;
	top: 45%;
	animation: moveCircleOne 1s ease 1s forwards, floating 3s ease-in-out 2.5s infinite;
	background-color: #70d6ff;
	box-shadow: 5px 5px 12px #0084b8;
}
.btn.two {
	left: 45%;
	top: 45%;
	animation: moveCircleTwo 1s ease 1s forwards, floating 3s ease-in-out 2.7s infinite;
	background-color: #ff70a6;
	box-shadow: 5px 5px 12px #b80046;
}
.btn.three {
	left: 45%;
	top: 45%;
	animation: moveCircleThree 1s ease 1s forwards, floating 3s ease-in-out 2.8s infinite;
	background-color: #ff9770;
	box-shadow: 5px 5px 12px #b83100;
}
.btn.four {
	left: 45%;
	top: 45%;
	animation: moveCircleFour 1s ease 1s forwards, floating 3s ease-in-out 2.6s infinite;
	background-color: #ffd670;
	box-shadow: 5px 5px 12px #b88400;
}
.btn.one:hover {
	background-color: #3cc8ff;
	box-shadow: 5px 5px 20px #00719d;
}
.btn.two:hover {
	background-color: #ff3c87;
	box-shadow: 5px 5px 20px #830032;
}
.btn.three:hover {
	background-color: #ff703c;
	box-shadow: 5px 5px 20px #832300;
}
.btn.four:hover {
	background-color: #ffc83c;
	box-shadow: 5px 5px 20px #835e00;
}
.tooltip{
	text-align: center;
}
.tooltip .tooltiptext{
	visibility: hidden;
	width: 120px;
	background-color: var(--almost-black);
	color: #fff;
	text-align: center;
	font-size: 1rem;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 110%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 1s 0.5s;
}
.tooltiptext:after{
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--almost-black) transparent transparent transparent;
}
.btn:hover .tooltiptext{
	visibility: visible;
	opacity: 1;
}

.right a {
	text-decoration: none;
}
.btn i {
	opacity: 0;
	color: white;
	animation: fadeIn 1.5s 1s forwards;
}
/** end homapage buttons **/

/**************************************/
/**                                  **/
/**           for footer             **/
/**                                  **/
/**************************************/
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
}
.copy {
	text-align: right;
	margin-right: 10px;
}
/** end footer **/

/**************************************/
/**                                  **/
/**       for portfolio page         **/
/**                                  **/
/**************************************/
.container-portfolio {
	position: relative;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 120px;
	background-color: var(--clear);
	animation: fadeIn 1.5s forwards;
}
.clicky {
	display: block;
	cursor: pointer;
	border-radius: 20px;
	transition: 0.5s;
}
.clicky video {
	transition: 0.5s;
}
.clicky:hover {
	box-shadow: 8px 8px 16px var(--grey);
}
.clicky:hover video {
	box-shadow: 0px 0px 0px var(--clear);
}
.portfolio-section {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 400px;
	padding: 40px;
	margin-bottom: 40px;
	border-radius: 20px;
	background-color: var(--clear);
}
.portfolio-left {
	width: 50%;
	/* background-color: var(--clear); */
}
.portfolio-right {
	width: 50%;
	/* background-color: var(--clear); */
}
.portfolio-img{
	float: right;
	width: 75%;
	height: auto;
	max-width: 711px;
	max-height: 500px;
	box-shadow: 10px 10px 18px var(--grey);
	border-radius: 10px;
}

.portfolio-title {
	padding-left: 40px;
}
/** end portfolio **/

/**************************************/
/**                                  **/
/**  for detailed portfolio page     **/
/**                                  **/
/**************************************/
.container-detailed-portfolio {
	position: relative;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: var(--clear);
	animation: fadeIn 1.5s forwards;
}
.back-to-list{
	font-size: 18px;
	padding-left: 40px;
}

.item-title{
	padding-left: 40px;
}

.even {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 400px;
	width: 100%;
	padding: 40px;
	margin-bottom: 40px;
	background-color: var(--clear);
}
.odd {
	display: flex;
	align-items: center;
	height: 400px;
	width: 100%;
	padding: 40px;
	margin-bottom: 40px;
	background-color: var(--clear);
}

.even .right-column,
.odd .left-column {
	width: 60%;
}
.odd .right-column,
.even .left-column {
	width: 40%;
}

.left-column img, .right-column img {
	display: block;
	margin: auto;
  	width: 75%;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
}
.odd .left-column img{
	float: left;
}
.even .right-column img{
	float: right;
}


/** end detailed portfolio **/

/**************************************/
/**                                  **/
/**        for contact page          **/
/**                                  **/
/**************************************/
.container-contact {
	position: relative;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 120px;
	animation: fadeIn 1.5s forwards;
	z-index: 1;
}
.contact-section {
	display: flex;
	flex-direction: row;
}
.contact-left {
	padding: 40px;
	width: 50%;
	background-color: var(--clear);
}
.contact-right {
	padding: 40px;
	width: 50%;
	background-color: var(--clear);
}
.contact-img {
	width: auto;
	height: 400px;
	box-shadow: 10px 10px 50px var(--grey);
	border-radius: 50%;
}
.pfp {
	text-align: center;
}
.contact-title {
	padding-left: 40px;
}
.contact-left p {
	margin-top: 60px;
	padding-left: 40px;
	padding-right: 40px;
}
/** end contact page **/

/**************************************/
/**                                  **/
/**        for contact form          **/
/**                                  **/
/**************************************/
input[type="text"],
textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--almost-white);
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
	font-size: 18px;
}
input[type="submit"] {
	width: 100%;
	height: 60px;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	color: var(--white);
	background: var(--red-orange);
	transition: 0.3s;
}
input[type="submit"]:hover {
	background: var(--orange);
	cursor: pointer;
	outline: none;
	letter-spacing: 5px;
}
/** end contact form **/

/**************************************/
/**                                  **/
/**          for navigation          **/
/**                                  **/
/**************************************/
.navigation {
	position: fixed;
	width: 100%;
	overflow: hidden;
	padding: 10px 40px 10px 40px;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.9);
}
.navigation.home {
	background-color: var(--clear);
}
.navigation a {
	color: var(--orange);
	float: right;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 1.25rem;
	transition: 0.3s;
}
.navigation a:hover {
	color: var(--red-orange);
	text-shadow: 1px -1px var(--very-grey), 2px -2px var(--very-grey), 3px -3px var(--very-grey), 4px -4px var(--very-grey), 5px -5px var(--very-grey),
		6px -6px var(--very-grey), 7px -7px var(--very-grey), 8px -8px var(--very-grey), 9px -9px var(--very-grey), 10px -10px var(--very-grey);
}
.navigation a:visited {
	color: var(--orange);
}
/** end navigation **/

/**************************************/
/**                                  **/
/**     dark mode toggle switch      **/
/**                                  **/
/**************************************/
.switch {
	position: relative;
	display: inline-block;
	margin-top: 10px;
	width: 60px;
	height: 34px;
	animation: fadeIn 2.5s forwards;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--red-orange);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 34px;
}
.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: var(--cream);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50%;
}
input:checked + .slider {
	background-color: #086375;
}
input:focus + .slider {
	box-shadow: 0 0 1px #086375;
}
input:checked + .slider:before {
	background-color: #b2ff9e;
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
/** end dark mode toggle **/

/**************************************/
/**                                  **/
/**       small screen sizes         **/
/**                                  **/
/**************************************/
@media only screen and (max-width: 1200px) {
h1 {
		font-size: 6rem;
		transition: 0.5s;
	}
	.container p {
		padding: 2px;
	}
	.column {
		flex-direction: column;
		animation: fadeIn 2s 0.5s forwards;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 0;
	}
	.left-content{
		margin-top: 40px;
	}
	.left {
		width: 100%;
		height: auto;
		padding: 0 40px 0 40px;
		text-align: center;
		animation: fadeIn 2s 0.5s forwards;
	}
	.right {
		width: 100%;
		display: block;
		padding: 0 20px 0 20px;
		animation: fadeIn 2s 0.5s forwards;
	}
	.right-content{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 20px 20px;
		justify-content: center;
		align-items: center;
	}
	.btn{
		position: relative;
		font-size: 2.75rem;
		height: 90px;
		width: 90px;
		transition: 0.3s;
	}
	.btn.one {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.two {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.three {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.four {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn i{
		animation: fadeIn 1.5s 1s forwards;
	}
}
@media only screen and (max-width: 930px) {
	h1 {
		font-size: 4.5rem;
		transition: 0.5s;
	}
	.container p {
		padding: 0px;
	}
	.column {
		flex-direction: column;
		animation: fadeIn 2s 0.5s forwards;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 0;
	}
	.left-content{
		margin-top: 0px;
	}
	.left {
		width: 100%;
		height: auto;
		padding: 0 40px 0 40px;
		text-align: center;
		animation: fadeIn 2s 0.5s forwards;
	}
	.right {
		width: 100%;
		height: auto;
		display: block;
		padding: 0 20px 0 20px;
		animation: fadeIn 2s 0.5s forwards;
	}
	.right-content{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 20px 20px;
		justify-content: center;
		align-items: center;
	}
	.btn{
		position: relative;
		font-size: 2.75rem;
		height: 90px;
		width: 90px;
		transition: 0.3s;
	}
	.btn.one {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.two {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.three {
		left: auto;
		top: auto;
		animation: none;
	}
	.btn.four {
		left: auto;
		top: auto;
		animation: none;
	}
	.container-portfolio {
		position: relative;
		padding-left: 20px;
		padding-right: 20px;
		background-color: var(--clear);
	}
	.portfolio-title{
		margin-top: -10px;
	}
	.portfolio-section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 10px;
		height: auto;
		margin-bottom: 80px;
		background-color: var(--clear);
	}
	.portfolio-left {
		width: 100%;
		background-color: var(--clear);
	}
	.portfolio-right {
		width: 100%;
		background-color: var(--clear);
		padding-top: 40px;
	}

	.portfolio-img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: auto;
		max-width: 711px;
		max-height: 400px;
		box-shadow: 10px 10px 18px var(--grey);
	}
	.portfolio-title {
		padding-left: 10px;
	}
	.item-title{
		padding-left: 0;
	}
	.back-to-list{
		padding-left: 0;
	}
	.container-detailed-portfolio{
		width: 100%;
	}
	.even {
		flex-direction: column;
		height: auto;
		margin-bottom: 20px;
		padding: 0;
		width: 100%;
	}
	.odd {
		flex-direction: column-reverse;
		height: auto;
		margin-bottom: 20px;
		padding: 0;
		width: 100%;
	}
	.even .right-column,
	.odd .left-column,
	.odd .right-column,
	.even .left-column {
		width: 100%;
	}
	.left-column, .right-column{
		display: block;
		width: 100%;
		height: auto;
	}
	.left-column img, 
	.right-column img{
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: auto;
	}
	.container-contact {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 100px;
	}
	.contact-section {
		flex-direction: column;
	}
	.contact-left {
		width: 100%;
		padding: 0;
	}
	.contact-right {
		width: 100%;
		padding: 10px 0 60px 10px;
	}
	.contact-left p {
		margin-top: 60px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.contact-img{
		height: 300px;
	}
	.navigation{
		padding: 10px 20px 10px 20px;
	}
	.navigation a{
		font-size: 1rem;
		padding: 14px 8px;
	}
}
/** end small screen sized **/

/**************************************/
/**                                  **/
/**       animation keyframes        **/
/**                                  **/
/**************************************/
@keyframes floating {
	0% {
		transform: translate(0, 0px);
	}
	50% {
		transform: translate(0, 15px);
	}
	100% {
		transform: translate(0, -0px);
	}
}

@keyframes moveCircleOne {
	from {
		left: 45%;
		top: 45%;
	}
	to {
		top: 30%;
		left: 45%;
	}
}

@keyframes moveCircleTwo {
	from {
		left: 45%;
		top: 45%;
	}
	to {
		top: 45%;
		left: 70%;
	}
}

@keyframes moveCircleThree {
	from {
		left: 45%;
		top: 45%;
	}
	to {
		top: 60%;
		left: 45%;
	}
}

@keyframes moveCircleFour {
	from {
		left: 45%;
		top: 45%;
	}
	to {
		top: 45%;
		left: 20%;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* @keyframes image-left {
	0% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	50% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1019%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1019'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	100% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
}
@keyframes image-left-dark {
	0% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1016%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1016'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	50% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1015%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1015'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	100% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1016%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M407.7-112.7C322.43 62.33 391.82 639.31 259.71 651.89 127.59 664.47 87.84 242.24-36.28 178.29' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M544.73-125.29C442.47-17.24 482.03 402.76 344.01 434.89 205.99 467.02 243.65 274.89 143.28 274.89 42.92 274.89 6.04 425.51-57.44 434.89' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M415.03-42.57C265.32 203.09 326.82 1038.98 146.39 1076.37-34.03 1113.76 6.57 569.25-122.24 461.97' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M413.23-108.36C289.21 89.22 325.77 782.01 189.57 797.55 53.38 813.09 77.98 319.37-34.08 208.75' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M242.54-159.69C169.11 8.8 243.35 538.57 116.86 564.65-9.63 590.73-32.57 240.02-134.51 193.45' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1016'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
}
@keyframes image-right {
	0% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1007%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1007'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	50% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(234%2c 178%2c 36%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	100% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1007%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(255%2c 235%2c 210%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(252%2c 118%2c 67%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1007'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
}
@keyframes image-right-dark {
	0% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1009%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1009'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	50% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1010%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(90%2c 191%2c 122%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1010'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
	100% {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='720' height='1280' preserveAspectRatio='none' viewBox='0 0 720 1280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1009%26quot%3b)' fill='none'%3e%3crect width='720' height='1280' x='0' y='0' fill='rgba(36%2c 36%2c 36%2c 1)'%3e%3c/rect%3e%3cpath d='M233.94 1322.69C358.23 1191.98 319.11 671.78 478.2 643.81 637.29 615.84 636.76 877.88 722.46 899.81' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335.09 1401.75C442.26 1340.22 367.89 1099.12 582.98 974.1 798.07 849.08 722.95 602.4 830.87 538.9' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M341.5 1288.9C468.69 1046.78 404.29 263.44 564.52 217.92 724.76 172.4 676.43 686.69 787.55 793.92' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M251.12 1306.3C335.31 1300.02 321.05 1213.03 541.74 1134.34 762.42 1055.65 700.92 659.63 832.35 571.14' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M50.33 1527.96C194.42 1450.61 115.55 1092.58 390.02 968.9 664.49 845.22 600.03 580.94 729.71 533.7' stroke='rgba(91%2c 192%2c 190%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1009'%3e%3crect width='720' height='1280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	}
} */

/* @keyframes pulse {
	0% {background-color: var(--cream);}
	50% {background-color: #FFC79B;}
	100% {background-color: var(--cream);}
}
@-webkit-keyframes pulse {
	0% {background-color: var(--cream);}
	50% {background-color: #FFC79B;}
	100% {background-color: var(--cream);}
}
@keyframes dark-pulse {
	0% {background-color: var(--dark-gradient-1);}
	50% {background-color: var(--dark-gradient-2);}
	100% {background-color: var(--dark-gradient-1);}
}
@-webkit-keyframes dark-pulse {
	0% {background-color: var(--dark-gradient-1);}
	50% {background-color: var(--dark-gradient-2);}
	100% {background-color: var(--dark-gradient-1);}
} */

@-webkit-keyframes pulse {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes pulse {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes pulse { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@-webkit-keyframes darkPulse {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes darkPulse {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes darkPulse { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/** end animation **/