@charset "utf-8";
/* CSS Document */

		body, html{
			margin: 0;
			padding: 0;
			height: 100%;
		}
		
		.bg-wrapper{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url("Images/backgroundComp.png");
			background-size: cover;
			background-position: center;
			filter: blur(6px);
			transform: scale(1.1);
			z-index: -1;
		}
		
		.container{
			display: flex;
			justify-content: center;
			min-height: 100vh;
			padding: 15px 0;
			box-sizing: border-box;
		}
		
		.content-column{
			display: flex;
			flex-direction: column;
				min-height: -450px;
			background-color: rgba(87, 13, 51, 0.8);
    		border-radius: 25px;
			border: 2px solid rgba(220, 34, 130, 0.8);
    		width: 1300px; 
    		padding: 40px;
    		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			color: #ffffff;
			backdrop-filter: grayscale();
			overflow: hidden;
			/*min-height: 85vh;*/
		}
		
		.content-column img{
			border-radius: 25px 25px 25px 25px;
			 width: calc(100% + 80px);
    margin-left: -40px;
    margin-top: 10px;
    display: block;
    margin-bottom: 20px;
		}
		
		.fhead {
    text-align: center;
    color: #ffffff;
    margin-top: 20px;
			
	-webkit-text-stroke: 1px #460061;
			font-size: 80px;
			font-weight: bold;
			text-decoration: overline underline #ff9dff;
			text-decoration-style: double;
}

.fhead2{
	text-align: center;
	font-size: 50px;
	font-weight: bold;
	text-decoration:  underline;
	font-family: sans-serif;
}
		
		.ftext {
			text-align: center;
			font-size: 30px;
			font-family: sans-serif;
		}

		
			.fintro {
			text-align: center;
			font-size: 30px;
			font-family: sans-serif;
		}

		.top-nav{
			display: flex;
    align-items: center;    
    justify-content: flex-start; 
    padding-left: 10px;   
    margin-bottom: -10px;
		}
		
		.top-nav a{
			color: #9ccdff;
			text-decoration: none;
			font-family: sans-serif;
			font-weight: bold;
			margin: 0 15px;
			align-items: center;
			transition: color 0.3s;
		}
		
		.top-nav img{
			width: 80px;
			height: auto;
			align-items: center;
		}
		
		.top-nav a:hover{
			
			color: #6dfc85;
				text-decoration: underline;
		}
		
		.discord-btn{
    display: inline-block;
    background-color: #5865F2;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-family: sans-serif;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 15px rgba(192, 0, 255, 0.3);
			
			transition: transform 0.3s ease-in-out, background-color 0.3s;
		}
		
		.discord-btn:hover{
			background-color: #4752c4;
		
		color: #4AFF14;
			transform: scale(1.3) translateY(-2px);
		}
		
		.discord-btn:active{
			transform: scale(0.95);
			transition: transform 0.1s;
		}
		
		.button-container{
			text-align: center;
			margin-top: auto;
			margin-top: 30px;
			margin-bottom: -20px;
		}
		
		.banner-fade{
			width: 100%;
			display: block;
			-webkit-mask-image: linear-gradient(to bottom,
			black 0%,
				black 75%,
				transparent 100%
			);
			mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
		}

@keyframes fadeIn{
	from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


html {
    background-color: #31071d; 
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    opacity: 0;
    background-color: transparent;
    transition: opacity 0.6s ease-in-out;
    height: 100%;
}

body.loaded {
    opacity: 1;
}

.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/Images/backgroundComp.png");
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    transform: scale(1.1);
    z-index: -1;
}


/*Social Meida Page*/

.social-grid{
	display: flex;
	justify-content: center;
	gap: 145px;
	max-width: 800px;
	margin: 40px auto;
	padding: 0 20px;
}

.big-social-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;     
    
  
    width: 250px;            
    height: 250px;           
    border-radius: 15px;     
    
 
    text-decoration: none;  
    color: white;           
    font-family: sans-serif;
    font-weight: bold;
    
  
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.big-social-box.insta {

    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}


.big-social-box.tiktok {

    background-color: #010101; 
}


.big-social-box .icon-spacer {
    font-size: 5rem;         
    margin-bottom: 20px;
}

.big-social-box .social-name {
    font-size: 1.5rem;      
}


.big-social-box:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 30px rgba(192, 0, 255, 0.4); 
}

.big-social-box:active {
    transform: scale(0.98) translateY(0);
    transition: transform 0.1s;
}