@font-face {
    font-family: "VIC Regular";
    src: url("../fonts/VIC-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "VIC Light";
    src: url("../fonts/VIC-Light.ttf") format("truetype");
}
@font-face {
    font-family: "VIC Medium";
    src: url("../fonts/VIC-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "VIC SemiBold";
    src: url("../fonts/VIC-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "VIC Bold";
    src: url("../fonts/VIC-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "VIC ExtraLight";
    src: url("../fonts/VIC-ExtraLight.ttf") format("truetype");
}
/* Style the header: fixed position (always stay at the top) */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}

/* The progress container */
.progress-container {
  width: 100%;
  height: 8px;
  /*background: #fff;*/
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: linear-gradient(
    to right,
    aquamarine,
    violet
  );
  width: 0%;
    display: block;
}

body {
  /* feel free to change height */
    height: 5000px;
    background: black;
  /*background: linear-gradient(
    to bottom,
    #FDCDDD,
    #fd5b78
  );*/
}

@-webkit-keyframes hvr-wobble-vertical {
 5.56% {
  -webkit-transform:translateY(8px);
  transform:translateY(8px)
 }
 11.11% {
  -webkit-transform:translateY(-6px);
  transform:translateY(-6px)
 }
 16.67% {
  -webkit-transform:translateY(4px);
  transform:translateY(4px)
 }
 22.22% {
  -webkit-transform:translateY(-2px);
  transform:translateY(-2px)
 }
 27.75% {
  -webkit-transform:translateY(1px);
  transform:translateY(1px)
 }
 33.33% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
}
@keyframes hvr-wobble-vertical {
 5.56% {
  -webkit-transform:translateY(8px);
  transform:translateY(8px)
 }
 11.11% {
  -webkit-transform:translateY(-6px);
  transform:translateY(-6px)
 }
 16.67% {
  -webkit-transform:translateY(4px);
  transform:translateY(4px)
 }
 22.22% {
  -webkit-transform:translateY(-2px);
  transform:translateY(-2px)
 }
 27.75% {
  -webkit-transform:translateY(1px);
  transform:translateY(1px)
 }
 33.33% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
}
.hvr-wobble-vertical {
 display:inline-block;
 vertical-align:middle;
 -webkit-transform:perspective(1px) translateZ(0);
 transform:perspective(1px) translateZ(0);
 box-shadow:0 0 1px transparent;
 -webkit-animation-name:hvr-wobble-vertical;
 animation-name:hvr-wobble-vertical;
 -webkit-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
}
@-webkit-keyframes hvr-wobble-horizontal {
 5.56% {
  -webkit-transform:translateX(8px);
  transform:translateX(8px)
 }
 11.11% {
  -webkit-transform:translateX(-6px);
  transform:translateX(-6px)
 }
 16.67% {
  -webkit-transform:translateX(4px);
  transform:translateX(4px)
 }
 22.22% {
  -webkit-transform:translateX(-2px);
  transform:translateX(-2px)
 }
 27.75% {
  -webkit-transform:translateX(1px);
  transform:translateX(1px)
 }
 33.33% {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
 100% {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
}
@keyframes hvr-wobble-horizontal {
 5.56% {
  -webkit-transform:translateX(8px);
  transform:translateX(8px)
 }
 11.11% {
  -webkit-transform:translateX(-6px);
  transform:translateX(-6px)
 }
 16.67% {
  -webkit-transform:translateX(4px);
  transform:translateX(4px)
 }
 22.22% {
  -webkit-transform:translateX(-2px);
  transform:translateX(-2px)
 }
 27.75% {
  -webkit-transform:translateX(1px);
  transform:translateX(1px)
 }
 33.33% {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
 100% {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
}
.hvr-wobble-horizontal {
 display:inline-block;
 vertical-align:middle;
 -webkit-transform:perspective(1px) translateZ(0);
 transform:perspective(1px) translateZ(0);
 box-shadow:0 0 1px transparent;
 -webkit-animation-name:hvr-wobble-horizontal;
 animation-name:hvr-wobble-horizontal;
 -webkit-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite
}
h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: 100;
  padding: 25px 15px;
  text-shadow: 1px 1px 1px #333;
}

/*svg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2000px;
    height: 2000px;
    margin: -450px 0 0 -350px;
    
}*/
svg {
    position: relative;
    /*top: 45%;*/
}
svg path {
    fill: none;
    stroke: #fd5b78;
    /*stroke: palevioletred;*/
    stroke-width: 1;
}
.btn {
	background-image: linear-gradient(to right, #008bff, #00bfff, #00e3f6, #00ffbc);
	border-radius: 40px;
    box-sizing: border-box;
	color: #fff;
	display: block;
	font: 1.125rem "VIC SemiBold", sans-serif; /*18*/
	height: 50px;
	letter-spacing: 1px;
	margin: 300px auto;
    left: 50%;
    margin-left: -125px;
	padding: 4px;
	position: absolute;
    text-decoration: none;
	text-transform: uppercase;
	width: 250px;
	z-index: 2;
}
.btn:hover {
	color: #000;
}

.btn span {
	align-items: center;
	background: rgb(8, 15, 130);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
}

.btn:hover span {
	background: transparent;
}

.btn-bottom {
	background-image: linear-gradient(to right, #f4ff00, #ffc000, #ff6c4e, #ff00a0, #ff00f4);
	border-radius: 40px;
    box-sizing: border-box;
	color: #fff;
	display: block;
	font: 1.125rem "VIC SemiBold", sans-serif; /*18*/
	height: 50px;
	letter-spacing: 1px;
	margin: 0 auto;
    margin-left: -130px;
    margin-top: 50px;
	padding: 4px;
	position: absolute;
    text-decoration: none;
	text-transform: uppercase;
	width: 250px;
	z-index: 2;
}

.btn-bottom:hover {
	color: #000;
}

.btn-bottom span {
	align-items: center;
	background: rgb(8, 15, 130);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
}

.btn-bottom:hover span {
	background: transparent;
}