@charset "utf-8";
@font-face{
	src: url("fonts/Candles.TTF");
	font-family: candle;
	text-shadow: 20px 36px 7px #000000;
	color: #FFFFFF;
}
body{
	background: fixed;
	background-image:url("images/Background2.png");
	margin-left: auto;
		padding-left: 3%;
		margin-right: auto;
		background-size: cover;
		background-repeat: no-repeat;
		background-color:mediumorchid;
}

/*hamburger menu*/
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position:relative;
  display: inline-block;
  float: right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right:0;
  z-index: 1;
  }

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

h3{
	font-family: candle;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;

}
.hero{
		background-size: cover;
	 	background-repeat: no-repeat;
		padding: 0;
		font-family: candle;
	    font-weight:bold;
		color: #fff;
		font-size: 30px;
		
		-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}



	
	
.medialink1{
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: #FFFFFF;
   visited: none;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.medialink1::before {
   content: "";
	font-family: candle;
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #a043ff 0%, #32e0ff 100%);
   transition: transform .25s ease-out;
}
.medialink1:visited{
	color:#666666;
}
.medialink1:hover { 
   color: #fff; 
}
.medialink1:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}




.link2:hover {
 background-color: #fecb00;
	font-family: candle;
	 border-radius: 25px;
  box-shadow: 0 0 100px 15px #fecb00;
 display: inline-block;
	transform: translate(-10px, -10px);
}

.link3:hover{
	background-color: #7583d9;
	 border-radius: 25px;
	display: inline-block;
	 box-shadow: 0 0 100px 25px #7583d9;
	transform: translate(-10px, -10px);
}

.link4:hover{
	transform: translate(-10px, -10px);
}

.sociallink1 {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
	font-family: candle;
	font-size: 19px;
	
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: black;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.sociallink1::before {
   content: "";
   position: absolute;
	font-family: candle;
	    font-weight:bold;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #a043ff 0%, #32e0ff 100%);
   transition: transform .25s ease-out;
}

.sociallink1:hover { 
   color: #fff; 
}
.sociallink1:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}



.discordlink1 {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: #3569ec;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.discordlink1::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #a043ff 0%, #32e0ff 100%);
   transition: transform .25s ease-out;
}

.discordlink1:hover { 
   color: #fff; 
}
.discordlink1:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}


.platformlink1 {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: #24a6e3;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.platformlink1::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #a043ff 0%, #32e0ff 100%);
   transition: transform .25s ease-out;
}

.platformlink1:hover { 
   color: #fff; 
}
.platformlink1:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}
.button{
	 display:inline-block;
	 min-width: 300px;
	 padding-left: 13px;
	 padding-right: 13px;
	 padding-bottom: 13px;
	 padding-top: 13px;
	 border: 3px solid black;
	 color: black;
	 text-align:center;
	 font-family: "comic sans ms";
	 font-weight:100;
	 font-size: 17px

	position: relative;
	
   z-index: 0;
   overflow: hidden;
   color: #000000;
   vertical-align: bottom;
   transition: color .3s ease-out;
}
a:link {color:#000000;
   text-decoration: none;
}
a:hover {color:#ffffff;
   text-decoration:none;
}

   
.button{
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   overflow: hidden;
   color: #000000;
   visited: none;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.button::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #a043ff 0%, #32e0ff 100%);
   transition: transform .25s ease-out;
}

.button:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}
.button:hover { 
   color: #ffffff; 
}
.button:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}
footer {
  display: block;
}






div.position-sticky {
  position: -webkit-sticky;
  position: sticky;
  top:0;
}