@-webkit-keyframes shine {
  0% {
    background-position: -50rem 0;
  }
  25% {
    background-position: -50rem 0;
  }
  100% {
    background-position: 30rem 0;
  }
}
@keyframes shine {
  0% {
    background-position: -50rem 0;
  }
  25% {
    background-position: -50rem 0;
  }
  100% {
    background-position: 30rem 0;
  }
}
@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html {
  font-size: 150%;
}



.gold-button {
    color: #000000;
    background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 5px;
    border-width: 0;
    display: inline-flex;
    align-items: center;
  
    box-shadow: 0 4px 12px 0 #ffcd57;
    transition: all 0.5s ease;

  justify-content: center;
  text-align: center;
  text-decoration: none;
  
    position: relative;
    overflow: hidden;
  
  flex: 1;
}

/* Shine */

.shine-button {
  position: relative;
  overflow: hidden;
}

.shine-button:after {
	content:'';
  top:0;
	transform:translateX(100%);
	width:100%;
	height:220px;
	position: absolute;
	z-index:1;
	animation: slide 2s infinite;

  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}

/* shine animation */

@keyframes slide {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(100%);}
}







#box {
  width: 60vmin;
  height: 50vmin;
  display: grid;
  place-content: center;
  color: white;
  text-shadow: 0 1px 0 #000;
  
  --border-angle: 0turn; // For animation.
  --main-bg: conic-gradient(
      from var(--border-angle),
      #213,
      #112 5%,
      #112 60%,
      #213 95%
    );
  
  border: solid 5px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  
  background: 
    // padding-box clip this background in to the overall element except the border.
    var(--main-bg) padding-box,
    // border-box extends this background to the border space
    var(--gradient-border) border-box, 
    // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
    var(--main-bg) border-box;
  
  background-position: center center;

  animation: bg-spin 3s linear infinite;
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

  &:hover {
    animation-play-state: paused;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}



/*Golddust*/
.Golddust{ position:fixed; top:0; left:0; width:100%; height:113%; pointer-events:none; z-index:99;} 
#Golddust{ pointer-events:none; }





.seperator-wrapper {
  padding-top: 50px;
  width: 100%;
}
.seperator-wrapper .seperator {
  width: 100%;
  height: 8px;
  animation: rotate 4s infinite linear;
  -webkit-animation: rotate 4s infinite linear;
}

@-webkit-keyframes rotate {
  from {
    background-position: -3000px;
  }
  to {
    background-position: 0px;
  }
}
@keyframes rotate {
  from {
    background-position: -3000px;
  }
  to {
    background-position: 0px;
  }
}
.gradient {
  box-shadow: 0px 0px 10px #ce9733;
  background: #c28831;
  /* Old browsers */
  background: -moz-linear-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #a97622 100%);
  /* FF3.6+ */
  background: -webkit-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #c28831 100%);
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #c28831 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #c28831 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #c28831 100%);
  /* IE10+ */
  background: linear-gradient(to right, #c28831 0%, #e6b336 10%, #f6d153 20%, #f9eb99 30%, #e6b336 40%, #a97622 50%, #e6b366 60%, #f6d153 70%, #f9eb99 80%, #e6b336 90%, #c28831 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c28831', endColorstr='#e6b336',GradientType=1 );
  /* IE6-9 */
}





.confetti {
background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%, rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%, rgba(255,216,99,1) 50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%, rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%);
	border: 1px solid #A57C01;
	position: absolute;
	display: flex;
	width: 10px;
	height: 25px;
	top: -100px;
	}

.confetti:nth-child(1) {
	animation: fall 2.5s linear infinite;
	left: 10%;
	}

.confetti:nth-child(2) {
	animation: fall 2.3s linear infinite .2s;
	left: 20%;
	}

.confetti:nth-child(3) {
	animation: fall 2.4s linear infinite .4s;
	left: 30%;
	}

.confetti:nth-child(4) {
	animation: fall 2.7s linear infinite .1s;
	left: 40%;
	}

.confetti:nth-child(5) {
	animation: fall 2.6s linear infinite .7s;
	left: 50%;
	}

.confetti:nth-child(6) {
	animation: fall 2.4s linear infinite .2s;
	left: 60%;
	}

.confetti:nth-child(7) {
	animation: fall 2.1s linear infinite .7s;
	left: 70%;
	}

.confetti:nth-child(8) {
	animation: fall 2.4s linear infinite .9s;
	left: 80%;
	}

.confetti:nth-child(9) {
	animation: fall 2.9s linear infinite .9s;
	left: 90%;
	}

.confetti:nth-child(10) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 100%;
	}

.confetti:nth-child(11) {
	animation: fall2 2.5s linear infinite;
	left: 95%;
	}

.confetti:nth-child(12) {
	animation: fall2 2.3s linear infinite 1.1s;
	left: 85%;
	}

.confetti:nth-child(13) {
	animation: fall2 2.4s linear infinite 1.2s;
	left: 75%;
	}

.confetti:nth-child(14) {
	animation: fall2 2.7s linear infinite 1.3s;
	left: 65%;
	}

.confetti:nth-child(15) {
	animation: fall2 2.6s linear infinite 1.4s;
	left: 55%;
	}

.confetti:nth-child(16) {
	animation: fall2 2.4s linear infinite 1.5s;
	left: 45%;
	}

.confetti:nth-child(17) {
	animation: fall2 2.1s linear infinite 1.6s;
	left: 35%;
	}

.confetti:nth-child(18) {
	animation: fall2 2.4s linear infinite 1.7s;
	left: 25%;
	}

.confetti:nth-child(19) {
	animation: fall2 2.9s linear infinite 1.8s;
	left: 15%;
	}

.confetti:nth-child(20) {
	animation: fall2 2.2s linear infinite 1.9s;
	left: 5%;
	}

.confetti:nth-child(21) {
	animation: fall 2.5s linear infinite;
	left: 3%;
	}

.confetti:nth-child(22) {
	animation: fall 2.3s linear infinite 1.3s;
	left: 13%;
	}

.confetti:nth-child(23) {
	animation: fall 2.4s linear infinite 1.4s;
	left: 23%;
	}

.confetti:nth-child(24) {
	animation: fall 2.7s linear infinite 1.5s;
	left: 33%;
	}

.confetti:nth-child(25) {
	animation: fall 2.6s linear infinite 1.6s;
	left: 43%;
	}

.confetti:nth-child(26) {
	animation: fall 2.4s linear infinite 1.2s;
	left: 53%;
	}

.confetti:nth-child(27) {
	animation: fall 2.1s linear infinite 1.7s;
	left: 63%;
	}

.confetti:nth-child(28) {
	animation: fall 2.4s linear infinite 1.8s;
	left: 73%;
	}

.confetti:nth-child(29) {
	animation: fall 2.9s linear infinite 1.9s;
	left: 83%;
	}

.confetti:nth-child(30) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 93%;
	}

.confetti:nth-child(31) {
	animation: fall2 2.2s linear infinite 1.1s;
	left: 7%;
	}

.confetti:nth-child(32) {
	animation: fall2 2.9s linear infinite .9s;
	left: 17%;
	}

.confetti:nth-child(33) {
	animation: fall2 2.4s linear infinite .1s;
	left: 27%;
	}

.confetti:nth-child(34) {
	animation: fall2 2.1s linear infinite .7s;
	left: 37%;
	}

.confetti:nth-child(35) {
	animation: fall2 2.4s linear infinite .2s;
	left: 47%;
	}

.confetti:nth-child(36) {
	animation: fall2 2.6s linear infinite .7s;
	left: 57%;
	}

.confetti:nth-child(37) {
	animation: fall2 2.7s linear infinite .9s;
	left: 67%;
	}

.confetti:nth-child(38) {
	animation: fall2 2.4s linear infinite .4s;
	left: 77%;
	}

.confetti:nth-child(39) {
	animation: fall2 2.3s linear infinite .2s;
	left: 87%;
	}

.confetti:nth-child(40) {
	animation: fall2 2.5s linear infinite .3s;
	left: 97%;
	}

@keyframes fall {
	0% {top:-110px; transform: rotate(0deg) rotateY(-90deg); opacity:1;}
	100% {top:900px; transform: rotate(360deg) rotateY(180deg); opacity:0.7;}
}

@keyframes fall2 {
	0% {top:-110px; transform: rotate(0deg) rotateY(90deg); opacity:1;}
	100% {top:900px; transform: rotate(-360deg) rotateY(-180deg); opacity:0.5;}
}










body {
  /*height: 100vh;*/
  /*min-height: 16rem;*/
  width: 100vw;
  padding: 2rem;
  /*overflow: hidden;*/
overflow:scroll;
  /*background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#container {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 36rem;


}

.gold-text {
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 4rem;
  word-spacing: 0.2em;
  display: inline-block;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background-color: #E8A95B;
  background-image: radial-gradient(ellipse farthest-corner at right bottom, white 0%, #F0BB7A 20%, #E8A95B 60%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, white 0%, #F0BB7A 50%, #DE9945 75%, #E8A95B 100%);
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  margin: 0 0 0.5rem 0;
}
.gold-text:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #E8A95B;
  z-index: -1;
  text-shadow: 0 -1px 0 #f4cc9b, 0 1px 0 #a77334, 0 2px 0 #9b6b30, 0 3px 0 #90632d, 0 4px 0 #7a5426, 0 4px 2px #7a5426, 0 0.075em 0.1em rgba(26, 35, 39, 0.3), 0 0.15em 0.3em rgba(222, 153, 69, 0.2);
}
.gold-text__highlight {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.gold-text__highlight:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-image: linear-gradient(100deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
  background-clip: text;
  background-size: 60rem 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.gold-text__highlight:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  color: transparent;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, transparent 35%, transparent 75%, #DE9945 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-animation-name: flash;
          animation-name: flash;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.decoration-text {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  /*color: transparent;*/
  color: #000000;
  /*background-image: radial-gradient(ellipse at top left, #CFD8DC 0%, rgba(69, 90, 100, 0.75) 75%, transparent 100%);*/
  background-clip: text;
  -webkit-background-clip: text;
}