@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700;800;900&display=swap');

@font-face{
    font-family: "DrukWideCyWeb-Bold";
    src: url("font/DrukWideCyWeb-Bold.eot");
    src: url("font/DrukWideCyWeb-Bold.eot?#iefix")format("embedded-opentype"),
	    url("font/DrukWideCyWeb-Bold.woff")format("woff"),
	    url("font/DrukWideCyWeb-Bold.woff2")format("woff2"),
	    url("font/DrukWideCyWeb-Bold.ttf")format("truetype"),
	    url("font/DrukWideCyWeb-Bold.svg#DrukWideCyWeb-Bold")format("svg");
	font-weight:normal;
	font-style:normal;
	font-display:swap;
}

:root {
  --headline-color: white;
  --background-color: #11151c;
  --text-color: rgba(255, 255, 255, 0.5);
}

html, body {
  margin:0;
  padding: 0;
  overflow: hidden;
  place-content: center;
  background-image: radial-gradient(circle at 50% 50%, #2f3040, #1f2020);
  font-family: 'Tektur', sans-serif;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
  max-height: 100vh!important;
}

.canvas-container {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.headline-container{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  top: 10%;
  left: 10%;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#text-behind, #text-front, #text-behind-blur {
  font-family: 'DrukWideCyWeb-Bold', sans-serif;
  position: absolute;
  text-align: left;
  font-size: clamp(24px, 20vw, 50px);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 10px;
  line-height: 0.2;
}

#text-behind {
  color: var(--headline-color);
  z-index: 1;
}

#text-behind-blur {
  color: var(--headline-color);
  filter: blur(7.5px);
  -webkit-filter: blur(7.5px);
  z-index: 0;
}

#text-front {
  /*  Set text-color to transparent to only show the outline  */
  color: transparent;
  text-stroke: 2px var(--headline-color);
  -webkit-text-stroke: 2px var(--headline-color);
  z-index: 3;
}

/* Less relevant code */

.more-content{
  height: 500vh;
  width: 100vw;
}

.text-container{
  display: flex;
  flex-direction: flex-start;
  justify-content: flex-start;
  align-items: center;
  top: 175px;
  height: 60%;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 3;
}

.title{
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 500;
  max-width: 70%;
  margin-left: 10%;
  text-align: left;
}

.socials{
}

.socials svg{
  margin: 0 5px;
  transition: all 0.5s ease-in-out;
  transform: scale(1);
}

.socials svg:hover{
  transform: scale(1.2);
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));
}

p{
  /* width: 300px; */
  font-size: 0.8rem;
  letter-spacing: 0px;
  text-transform: none;
}
h1, h2 {
	font-size:1.5rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.donlink {
	font-size: 1.25rem;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}


a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

a:hover{
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.9));
}

u {
	text-decoration: none;
}
.star {
	transform-style: preserve-3d;
	width: 1px;
	height: 1px;
	position: absolute;
	color: red;
  }
  
  .star:before {
	position: absolute;
	content: "✦";
	color: inherit;
	inset: 0;
	text-shadow: 0 0 0.8em #fff5;
  }
  
  .smalltext {
	font-size: clamp(32px, 10vw, 10px);
	line-height: 70px;
	letter-spacing: 3px;
  }
  .abg {
	font-size: clamp(64px, 10vw, 100px);
	position: fixed;
  }

  .gradtext {
	background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* transition: 0.3s cubic-bezier(.26,0,.51,.99); */
  }

  @CHARSET "UTF-8";
  .sbHolder{
	  background-color: transparent;
	  border: solid 1px transparent;
	  height: 20px;
	  position: relative;
	  width: 500px;
  }
  .sbHolder:focus .sbSelector{
	  
  }
  .sbSelector{
	  display: block;
	  left: 0;
	  outline: none;
	  overflow: hidden;
	  position: absolute;
	  font-weight:600;
	  letter-spacing: 0;
	  top: 0;
	  width: 500px;
	  margin-left:5px;
  }
  .sbSelector:link, .sbSelector:visited, .sbSelector:hover{
	  color: #EBB52D;
	  outline: none;
	  text-decoration: none;
  }
  .sbToggle{
	  background: url(../img/select-icons.png) 0 -116px no-repeat;
	  display: block;
	  height: 20px;
	  outline: none;
	  position: absolute;
	  right: 0;
	  top: 0;
	  width: 20px;
  }
  .sbToggle:hover{
	  background: url(../img/select-icons.png) 0 -167px no-repeat;
  }
  .sbToggleOpen{
	  background: url(../img/select-icons.png) 0 -16px no-repeat;
  }
  .sbToggleOpen:hover{
	  background: url(../img/select-icons.png) 0 -66px no-repeat;
  }
  .sbHolderDisabled{
	  background-color: transparent;
	  border: solid 1px transparent;
  }
  .sbHolderDisabled .sbHolder{
	  
  }
  .sbHolderDisabled .sbToggle{
	  
  }
  .sbOptions{
	  background-color: transparent;
	  border: solid 1px transparent;
	  list-style: none;
	  left: -1px;
	  margin: 0;
	  padding: 0;
	  position: absolute;
	  top: 20px;
	  width: 500px;
	  z-index: 1;
	  overflow-y: auto;
  }
  .sbOptions li{
	  padding: 0 7px;
  }
  .sbOptions a{
	  border-bottom: dotted 1px transparent;
	  display: block;
	  outline: none;
	  padding: 6px 0 6px 6px;
  }
  .sbOptions a:link, .sbOptions a:visited{
	  color: #ddd;
	  text-decoration: none;
  }
  .sbOptions a:hover,
  .sbOptions a:focus,
  .sbOptions a.sbFocus{
	  color: #EBB52D;
  }
  .sbOptions li.last a{
	  border-bottom: none;
  }
  .sbOptions .sbDisabled{
	  border-bottom: dotted 1px transparent;
	  color: #999;
	  display: block;
	  padding: 6px 0 6px 6px;
  }
  .sbOptions .sbGroup{
	  border-bottom: dotted 1px transparent;
	  color: #EBB52D;
	  display: block;
	  font-weight: bold;
	  padding: 6px 0 6px 6px;
  }
  .sbOptions .sbSub{
	  padding-left: 17px;
  }

  
  a {
    color: #5eaefe;
    text-decoration: none;
}
input {
    border: none;
    background: transparent;
    font: inherit;
    width: 120px;
    color: #fe6f5e;
	font-weight:600;
	text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fe6f5e85;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fe6f5e85;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fe6f5e85;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fe6f5e85;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fe6f5e85;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #fe6f5e85;
}
button {
  float: right;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 24px;
  padding: 5px;
  color: #fe6f5e;
  margin-top:25px;
  cursor: pointer;
  transition: all 200ms ease
}
button:hover {
	background: #fe6f5e22;
	filter: blur(.5px);
    -webkit-filter: blur(.5px);
}
.sbHolder {
    display: inline;
    list-style: none;
}
.sbOptions {
    left: 35% !important;
    top: 20% !important;;
    max-height: inherit!important;
    position: absolute;
    list-style: none;
    padding: 1px;
    background: #fe6f5e;
}
.sbOptions > li {
    border-bottom: 1px solid transparent;
}
.sbOptions > li > a {
    color: #fff;
}
.sbOptions > li a:hover {
    color: #5cb8ff;
}


.yufumessage {
	position: absolute;
	bottom: 55px;
	left: 15%;
	max-width: 750px;
}