span { /* Used to highlight/bold text inside a paragraph. We use it for the big BOLD TITLE before the paragraph*/
	font-size: var(--fs-xl); /*min(6vw, 3rem); Take minimum of either 3vw or 12px for text size */ 
  font-family:Arial, Helvetica, sans-serif;
	background: -webkit-linear-gradient(white, #38495a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  
  .created-by {
	color: #ffffff;
  font-family:'MyCustomFont10';
	font-size: var(--fs-author); /*min(5vw, 0.5rem); */
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 10px; /* Adjust margin as needed */
  }




a.button { /* Anchors that have button class only*/
    display: block; /* Change display to block */
    margin-top: 60px;
    padding: 10px 20px;
    text-decoration: none;
    width: fit-content; /* Set width to fit the content */
    margin: 30px auto; /* Center the button horizontally */
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}



/* Hover effect */
a.button:hover {
    background-color: #45a049; /* Darker green */
}







.blue-button, a.bungie-button {
    flex: 1 1; /* Allow button to grow and shrink relative to its parent */
    font-family: Whitney, "Open Sans", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin: 30px auto; /* Center the button horizontally */
    border-radius: 3px;
    cursor: pointer;
    height: 45px;
    width: 250px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    max-width: 200px; /* Set a maximum width */
    }

.blue-button,
.bungie-button {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: #7289da;
    border: 2px solid #7289da;
    color: #fff;
    }
.blue-button{
    width: 250px;
	height: 65px;
	border-radius: 10px;

}




.discord-image{
    height: 80%;
    width:24%;
    padding: 5px;
}


.bungie-button{ /*center the bungie yellow button*/
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 2px solid #ffce1f;;
    color: #f5f5f5;
    background: rgba(183,140,37,.8);
    transition: .25s;

}

.bungie-image{
    height: 70%;
    width: 40%;
    padding-top:5%;
    
}
















/*------------------------------------------------- GLOWING CUBE CSS*/


.cube{
  display: flex;
}
.blur{
	position: absolute;
	filter: blur(10px);
	z-index: -100;
}

.cube,.blur{
  display: flex;
	width: 90vw;
	height: 80vh;
  max-width: 40%;
  max-height: 100vh;
	border-radius: 20px;
	justify-content: center;
	align-items: center;
}



@media screen and (max-width: 1600px)  { /* Goes from bigger screen check to smaller screen check*/
  .cube{
    max-width: 70%;
  }
}

@media screen and (max-width: 1150px)  {
  .cube{
    max-width: 90%;
  }
}


.box-text {
  color: white;
  text-align: center;
  padding: 5%; /* Add padding as needed */
  z-index: 1; /* Ensure text is in front of the canvas */
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  word-wrap: break-word; /* Ensure the text wraps */
  max-width: 90%; /* Limit the width to prevent overflow */
  max-height: 90%;
  overflow: auto;
    
}






.cube,.blur{
	content: "";
	background: linear-gradient( 120deg,
    rgba(156, 8, 179, 0.8) 30%, /* (x,y,z colors, transparency) gradient_range */
    rgb(115, 15, 165) 45%, 
    rgb(91, 2, 136) 55%,     
    rgba(160, 25, 128, 0.6) 90%   
	);
  background-size: 200% 100%;
	position: absolute;
	animation: moveGradient 15s infinite linear;
}




@keyframes moveGradient {
  0% {
      background-position: 0% 0%;
  }
  50% {
      background-position: 40% 0%;
  }
  100% {
      background-position: 0% 40%;
  }
}




  /*----------------------------------------------------- ADJUST RESOLUTION FOR BIG + SMALL SCREENS*/
  /*-----------Small screeen first*/
  .blue-button-form-width{ /* cellphone first approach*/
    justify-content: center; /* Center horizontally */
    display: flex;
    
  }

  /* ---------Big screen after*/