@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	background-color: black;
	font-family: "aquavit", sans-serif;
}

.visible {
	opacity: 1 !important;
	visibility: visible !important;
}

.bg-gradient {
	background: linear-gradient(-45deg, #fc004c, #f2ff00, #00B7FF, #f700ff);
	background-size: 700vw 700vh;
	animation: bg-move 40s linear infinite;
}

@keyframes bg-move {
	0%   { background-position: 0% 0%; }
	50%  { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}

#headerBG {
	width: 100%;
	height: 110px;
	position: fixed;
	z-index: 101;
	opacity: 0;
	visibility: hidden;
}

header {
	position: fixed;
	z-index: 102;
}

header .header--logo {
	position: fixed;
    top: 34vh;
    left: 20%;
	width: 60%;
}

header .header--insta {
	position: fixed;
	top: 35px;
	right: 35px;
	height: 40px;
}

.section-one {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
}

.s1--cover {
	width: 100vw;
	height: calc(100vh - 130px);
	min-height: 350px;
}

.section-two {
	background-color: #33004e;
	height: 1200px;
	color: #ffffff;
	padding: 24px 40px;
}

.section-two h1 {
	all: unset;
	font-size: 35px;
}

.s2--zigzag {
	background: url(imgs/zigzag.svg) repeat;
	background-size: 200px;
	width: 100%;
	height: 20px;
}

@media (max-width: 700px) {
	header .header--logo {width: 80%; left: 10%; top:37vh;}
	.section-two h1 {font-size: 25px;}
	.section-two {padding-top: 32px;}
}

@media (max-width: 530px) {
	header .header--logo {top:34vh; width: 90%; left: 5%;}
	header .header--insta {top: 20px; right: 20px;}
	#headerBG {height: 80px;}
	.s1--cover {height: calc(100vh - 175px);}
	.section-two h1 {font-size: 35px;}
	.section-two {padding-top: 24px;}
}

@media (max-width: 420px) {
	.section-two h1 {font-size: 28px;}
	.section-two {padding-top: 33px;}
}


footer {
	text-align: left;
	padding: 20px;
	background-color: black;
	color: white;
}

footer p {
	all:unset;
	font-weight: 300;
	font-style: normal;
}