/* --- START CORE CODE --- */
body {
	margin: 0;
	background-color: black;
}
.link-left {
    width: 50vw;
    height: 100vh;
    display: block;
    position: fixed;
    z-index: 99;
}
.link-right {
    width: 50vw;
    height: 100vh;
    left: 50vw;
    display: block;
    position: fixed;
    z-index: 99;
}
/* --- END CORE CODE --- */
section.main{
	width: 8000px;
	height: 8000px;
	overflow: hidden;
	position: absolute;
}
section.linear {
	position: absolute;
	width: 8000px;
	height: 8000px;
	overflow: hidden;
	background: rgb(36,36,36);
	background: linear-gradient(48deg,
	rgba(20,20,20,1) 0%, rgba(20,20,20,1) 2%,
    rgba(30,30,30,1) 2%, rgba(30,30,30,1) 4%,
    rgba(40,40,40,1) 4%, rgba(40,40,40,1) 6%,
    rgba(50,50,50,1) 6%, rgba(50,50,50,1) 8%,
    rgba(60,60,60,1) 8%, rgba(60,60,60,1) 10%,
    rgba(70,70,70,1) 10%, rgba(70,70,70,1) 12%,
    rgba(80,80,80,1) 12%, rgba(80,80,80,1) 14%,
    rgba(90,90,90,1) 14%, rgba(90,90,90,1) 16%,
    rgba(100,100,100,1) 16%, rgba(100,100,100,1) 18%,
    rgba(110,110,110,1) 18%, rgba(110,110,110,1) 20%,
    rgba(10,10,10,1) 20%, rgba(10,10,10,1) 22%,
    rgba(20,20,20,1) 22%, rgba(20,20,20,1) 22%,
    rgba(30,30,30,1) 22%, rgba(30,30,30,1) 24%,
    rgba(40,40,40,1) 24%, rgba(40,40,40,1) 26%,
    rgba(50,50,50,1) 26%, rgba(50,50,50,1) 28%,
    rgba(60,60,60,1) 28%, rgba(60,60,60,1) 30%,
    rgba(70,70,70,1) 30%, rgba(70,70,70,1) 32%,
    rgba(80,80,80,1) 32%, rgba(80,80,80,1) 34%,
    rgba(90,90,90,1) 34%, rgba(90,90,90,1) 36%,
    rgba(100,100,100,1) 36%, rgba(100,100,100,1) 38%,
    rgba(110,110,110,1) 38%, rgba(110,110,110,1) 40%,
    rgba(10,10,10,1) 40%, rgba(10,10,10,1) 42%,
    rgba(20,20,20,1) 42%, rgba(20,20,20,1) 42%,
    rgba(30,30,30,1) 42%, rgba(30,30,30,1) 44%,
    rgba(40,40,40,1) 44%, rgba(40,40,40,1) 46%,
    rgba(50,50,50,1) 46%, rgba(50,50,50,1) 48%,
    rgba(60,60,60,1) 48%, rgba(60,60,60,1) 50%,
    rgba(70,70,70,1) 50%, rgba(70,70,70,1) 52%,
    rgba(80,80,80,1) 52%, rgba(80,80,80,1) 54%,
    rgba(90,90,90,1) 54%, rgba(90,90,90,1) 56%,
    rgba(100,100,100,1) 56%, rgba(100,100,100,1) 58%,
    rgba(110,110,110,1) 58%, rgba(110,110,110,1) 60%,
    rgba(10,10,10,1) 60%, rgba(10,10,10,1) 62%,
    rgba(20,20,20,1) 62%, rgba(20,20,20,1) 62%,
    rgba(30,30,30,1) 62%, rgba(30,30,30,1) 64%,
    rgba(40,40,40,1) 64%, rgba(40,40,40,1) 66%,
    rgba(50,50,50,1) 66%, rgba(50,50,50,1) 68%,
    rgba(60,60,60,1) 68%, rgba(60,60,60,1) 70%,
    rgba(70,70,70,1) 70%, rgba(70,70,70,1) 72%,
    rgba(80,80,80,1) 72%, rgba(80,80,80,1) 74%,
    rgba(90,90,90,1) 74%, rgba(90,90,90,1) 76%,
    rgba(100,100,100,1) 76%, rgba(100,100,100,1) 78%,
    rgba(110,110,110,1) 78%, rgba(110,110,110,1) 80%,
    rgba(10,10,10,1) 80%, rgba(10,10,10,1) 82%,
    rgba(20,20,20,1) 82%, rgba(20,20,20,1) 82%,
    rgba(30,30,30,1) 82%, rgba(30,30,30,1) 84%,
    rgba(40,40,40,1) 84%, rgba(40,40,40,1) 86%,
    rgba(50,50,50,1) 86%, rgba(50,50,50,1) 88%,
    rgba(60,60,60,1) 88%, rgba(60,60,60,1) 90%,
    rgba(70,70,70,1) 90%, rgba(70,70,70,1) 92%,
    rgba(80,80,80,1) 92%, rgba(80,80,80,1) 94%,
    rgba(90,90,90,1) 94%, rgba(90,90,90,1) 96%,
    rgba(100,100,100,1) 96%, rgba(100,100,100,1) 98%,
    rgba(110,110,110,1) 98%, rgba(110,110,110,1) 100%);
}
.half {
	width: 7946px;
	height: 7946px;
	top: 18px;
	left: 12px;
	position: absolute;
	mix-blend-mode: exclusion;
	-webkit-animation:change-color 60s ease 0s infinite normal;
	-moz-animation:change-color 60s ease 0s infinite normal;
	-ms-animation:change-color 60s ease 0s infinite normal;
	animation:change-color 60s ease 0s infinite normal;
	}

	@-webkit-keyframes change-color {
	0%{ background-color:#60ab83; }
	50%{ background-color:#796379; }
	100%{ background-color:#60ab83; }
	}

	@keyframes change-color {
	0%{background-color: #59e1ef;}
	50%{background-color: #ea45ea;}
	100%{background-color: #59e1ef;}
}
.boxes-1{
	width: 8000px;
	height: 8000px;
	position: absolute;
	top: 8px;
	left: 6px;
}
.box {
	height: 400px;
	width: 400px;
	background-color: #3f0fff;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	clip-path: polygon(0% 15%, 23% 51%, 15% 0%, 85% 0%, 17% 70%, 100% 15%, 100% 85%, 58% 57%, 85% 100%, 15% 100%, 57% 79%, 0% 85%);
	mix-blend-mode: color-dodge;
}
.box-2 {
	height: 400px;
	width: 400px;
	background-color: #ffeb00;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	clip-path: polygon(0% 15%, 23% 51%, 15% 0%, 85% 0%, 17% 70%, 100% 15%, 100% 85%, 58% 57%, 85% 100%, 15% 100%, 57% 79%, 0% 85%);
	mix-blend-mode: multiply;
}
.wave-bottom {
	background-color: yellow;
    position: absolute;
    bottom: 0;
    height: 600px;
    width: 8000px;
    background: rgb(97,119,191);
	background: linear-gradient(90deg, rgba(97,119,191,1) 0%, rgba(193,226,179,1) 20%, rgba(134,116,149,1) 40%, rgba(193,226,179,1) 60%, rgba(97,119,191,1) 80%, rgba(193,226,179,1) 100%);
	display: block; 
    -webkit-transform: scale(-1);
    transform: scale(-1);
    -webkit-clip-path: polygon(100% 0,0 0,0 77.5%,1% 77.4%,2% 77.1%,3% 76.6%,4% 75.9%,5% 75.05%,6% 74.05%,7% 72.95%,8% 71.75%,9% 70.55%,10% 69.3%,11% 68.05%,12% 66.9%,13% 65.8%,14% 64.8%,15% 64%,16% 63.35%,17% 62.85%,18% 62.6%,19% 62.5%,20% 62.65%,21% 63%,22% 63.5%,23% 64.2%,24% 65.1%,25% 66.1%,26% 67.2%,27% 68.4%,28% 69.65%,29% 70.9%,30% 72.15%,31% 73.3%,32% 74.35%,33% 75.3%,34% 76.1%,35% 76.75%,36% 77.2%,37% 77.45%,38% 77.5%,39% 77.3%,40% 76.95%,41% 76.4%,42% 75.65%,43% 74.75%,44% 73.75%,45% 72.6%,46% 71.4%,47% 70.15%,48% 68.9%,49% 67.7%,50% 66.55%,51% 65.5%,52% 64.55%,53% 63.75%,54% 63.15%,55% 62.75%,56% 62.55%,57% 62.5%,58% 62.7%,59% 63.1%,60% 63.7%,61% 64.45%,62% 65.4%,63% 66.45%,64% 67.6%,65% 68.8%,66% 70.05%,67% 71.3%,68% 72.5%,69% 73.6%,70% 74.65%,71% 75.55%,72% 76.35%,73% 76.9%,74% 77.3%,75% 77.5%,76% 77.45%,77% 77.25%,78% 76.8%,79% 76.2%,80% 75.4%,81% 74.45%,82% 73.4%,83% 72.25%,84% 71.05%,85% 69.8%,86% 68.55%,87% 67.35%,88% 66.2%,89% 65.2%,90% 64.3%,91% 63.55%,92% 63%,93% 62.65%,94% 62.5%,95% 62.55%,96% 62.8%,97% 63.3%,98% 63.9%,99% 64.75%,100% 65.7%);
    clip-path: polygon(100% 0,0 0,0 77.5%,1% 77.4%,2% 77.1%,3% 76.6%,4% 75.9%,5% 75.05%,6% 74.05%,7% 72.95%,8% 71.75%,9% 70.55%,10% 69.3%,11% 68.05%,12% 66.9%,13% 65.8%,14% 64.8%,15% 64%,16% 63.35%,17% 62.85%,18% 62.6%,19% 62.5%,20% 62.65%,21% 63%,22% 63.5%,23% 64.2%,24% 65.1%,25% 66.1%,26% 67.2%,27% 68.4%,28% 69.65%,29% 70.9%,30% 72.15%,31% 73.3%,32% 74.35%,33% 75.3%,34% 76.1%,35% 76.75%,36% 77.2%,37% 77.45%,38% 77.5%,39% 77.3%,40% 76.95%,41% 76.4%,42% 75.65%,43% 74.75%,44% 73.75%,45% 72.6%,46% 71.4%,47% 70.15%,48% 68.9%,49% 67.7%,50% 66.55%,51% 65.5%,52% 64.55%,53% 63.75%,54% 63.15%,55% 62.75%,56% 62.55%,57% 62.5%,58% 62.7%,59% 63.1%,60% 63.7%,61% 64.45%,62% 65.4%,63% 66.45%,64% 67.6%,65% 68.8%,66% 70.05%,67% 71.3%,68% 72.5%,69% 73.6%,70% 74.65%,71% 75.55%,72% 76.35%,73% 76.9%,74% 77.3%,75% 77.5%,76% 77.45%,77% 77.25%,78% 76.8%,79% 76.2%,80% 75.4%,81% 74.45%,82% 73.4%,83% 72.25%,84% 71.05%,85% 69.8%,86% 68.55%,87% 67.35%,88% 66.2%,89% 65.2%,90% 64.3%,91% 63.55%,92% 63%,93% 62.65%,94% 62.5%,95% 62.55%,96% 62.8%,97% 63.3%,98% 63.9%,99% 64.75%,100% 65.7%);
}
.triangles {
	position: absolute;
	top: 0;
	left: 0;
	width: 10000px;
	height: 2000px;
	overflow: hidden;
}
.triangles-under {
	position: absolute;
	top: 400px;
	left: -400px;
	width: 10000px;
	height: 2000px;
	overflow: hidden;
}
.triangle-wrap, .triangle-wrap-2{
	width: 2000px;
	height: 2000px;
	position: relative;
	margin: 0;
	top: 0;
	-webkit-transform: scale(-1);
	transform: scale(-1);
	display: table-cell;
	background: transparent;
}
.triangle-1 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 2000px;
	height: 2000px;
	position: absolute;
	background-color: #363636;
}
.triangle-2 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 1700px;
	height: 2000px;
	left: 150px;
	position: absolute;
	background-color: #545454;
}
.triangle-3 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 1400px;
	height: 2000px;
	left: 300px;
	position: absolute;
	background-color: #6b6b6b;
}
.triangle-4 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 1100px;
	height: 2000px;
	left: 450px;
	position: absolute;
	background-color: #878787;
}
.triangle-5 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 800px;
	height: 2000px;
	left: 600px;
	position: absolute;
	background-color: #a1a1a1;
}
.triangle-6 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 500px;
	height: 2000px;
	left: 750px;
	position: absolute;
	background-color: #b5b5b5;
}
.triangle-7 {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 200px;
	height: 2000px;
	left: 900px;
	position: absolute;
	background-color: #d1d1d1;
}