/* ===========================
   NIXWINNAS OFFICIAL WEBSITE
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{

background:#050505;
color:white;
overflow-x:hidden;

}

/* Hintergrund */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at top,#8f2dff33 0%,transparent 40%),
radial-gradient(circle at bottom,#5900ff22 0%,transparent 55%);

z-index:-5;

}

/* Header */

header{

position:fixed;

top:0;
left:0;

width:100%;

padding:22px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(0,0,0,.45);

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:999;

}

/* Logo */

.logo{

font-size:38px;

font-weight:900;

letter-spacing:3px;

color:white;

}

.logo span{

color:#a135ff;

text-shadow:

0 0 15px #9f2dff,
0 0 40px #7b00ff;

}

/* Navigation */

nav{

display:flex;

gap:35px;

}

nav a{

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#a135ff;

}

/* Live Button */

.liveButton{

padding:14px 28px;

background:#9146FF;

border-radius:50px;

color:white;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.liveButton:hover{

transform:translateY(-3px);

box-shadow:0 0 25px #9146FF;

}

/* Hero */

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:180px 10% 120px;

min-height:100vh;

}

.heroLeft{

width:50%;

}

.heroLeft h1{

font-size:72px;

line-height:1;

margin-bottom:20px;

}

.heroLeft span{

color:#a135ff;

text-shadow:

0 0 20px #a135ff,

0 0 60px #7200ff;

}

.heroLeft p{

font-size:23px;

color:#cfcfcf;

margin-bottom:40px;

}

/* Buttons */

.heroButtons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.purpleButton{

padding:18px 35px;

background:#9146FF;

border-radius:60px;

text-decoration:none;

font-weight:700;

color:white;

transition:.3s;

}

.blackButton{

padding:18px 35px;

background:#151515;

border:2px solid #9146FF;

border-radius:60px;

text-decoration:none;

font-weight:700;

color:white;

transition:.3s;

}

.purpleButton:hover,
.blackButton:hover{

transform:translateY(-5px);

box-shadow:0 0 30px #9146FF;

}

/* Avatar */

.heroRight{

display:flex;

justify-content:center;

align-items:center;

}

.heroRight img{

width:430px;

border-radius:25px;

box-shadow:

0 0 30px #7d2cff,

0 0 90px #5f00ff;

animation:float 5s ease-in-out infinite;

}

/* Animation */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/* Responsive */

@media(max-width:1000px){

nav{

display:none;

}

.hero{

flex-direction:column;

text-align:center;

padding-top:150px;

}

.heroLeft{

width:100%;

}

.heroLeft h1{

font-size:50px;

}

.heroRight img{

width:280px;

margin-top:50px;

}

.heroButtons{

justify-content:center;

}

}
/* ===== SECTION ===== */

.section{

padding:120px 10%;

}

.sectionTitle{

text-align:center;

margin-bottom:60px;

}

.sectionTitle h2{

font-size:48px;

color:#b84dff;

margin-bottom:15px;

}

.sectionTitle p{

color:#bdbdbd;

font-size:18px;

}

/* Twitch */

.streamContainer{

display:flex;

justify-content:center;

}

.streamContainer iframe{

width:100%;

max-width:1100px;

height:620px;

border:none;

border-radius:25px;

box-shadow:

0 0 30px #9146FF,

0 0 70px #5d00ff;

}

/* Karten */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.card{

padding:35px;

background:rgba(255,255,255,.05);

border-radius:20px;

border:1px solid rgba(145,70,255,.25);

backdrop-filter:blur(20px);

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 0 35px #9146FF;

}

.card h3{

margin-bottom:15px;

font-size:28px;

}

.card p{

margin-bottom:25px;

color:#cfcfcf;

}

.card a{

display:inline-block;

padding:14px 30px;

background:#9146FF;

border-radius:40px;

text-decoration:none;

color:white;

font-weight:700;

}

/* Partner */

.partnerImage{

width:100%;

max-width:850px;

display:block;

margin:auto;

border-radius:25px;

transition:.35s;

box-shadow:

0 0 35px #9146FF;

}

.partnerImage:hover{

transform:scale(1.02);

box-shadow:

0 0 60px #9146FF;

}
/* =========================
        FOOTER
========================= */

footer{

padding:90px 10%;

text-align:center;

background:#090909;

border-top:1px solid rgba(255,255,255,.08);

}

.footerLogo{

font-size:55px;

font-weight:900;

margin-bottom:25px;

}

.footerLogo span{

color:#9146FF;

text-shadow:

0 0 20px #9146FF,

0 0 45px #7b00ff;

}

.footerLinks{

display:flex;

justify-content:center;

gap:30px;

margin:35px 0;

flex-wrap:wrap;

}

.footerLinks a{

color:white;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.footerLinks a:hover{

color:#9146FF;

}

.copyright{

opacity:.6;

margin-top:40px;

}

/* Cursor Glow */

#cursorGlow{

position:fixed;

width:350px;

height:350px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(circle,

rgba(145,70,255,.25),

transparent 70%);

transform:translate(-50%,-50%);

filter:blur(45px);

z-index:-2;

}

/* Scroll Animation */

.fade{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

/* Schöne Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#080808;

}

::-webkit-scrollbar-thumb{

background:#9146FF;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#b84dff;

}
/* ABOUT */

.about{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

flex-wrap:wrap;

}

.aboutText{

flex:1;

}

.aboutText h3{

font-size:40px;

margin-bottom:20px;

color:#9146FF;

}

.aboutText p{

font-size:20px;

line-height:1.8;

color:#d2d2d2;

margin-bottom:40px;

}

.aboutImage{

flex:1;

display:flex;

justify-content:center;

}

.aboutImage img{

width:380px;

border-radius:25px;

box-shadow:

0 0 35px #9146FF,

0 0 80px #5d00ff;

}

.stats{

display:flex;

gap:35px;

flex-wrap:wrap;

}

.stats div{

background:#101010;

padding:25px;

border-radius:18px;

text-align:center;

min-width:160px;

border:1px solid rgba(145,70,255,.25);

}

.stats h1{

font-size:42px;

color:#9146FF;

}

.stats p{

margin-top:10px;

}
/* HIGHLIGHTS */

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.galleryCard{

overflow:hidden;

border-radius:20px;

box-shadow:0 0 25px rgba(145,70,255,.35);

transition:.4s;

}

.galleryCard img{

width:100%;

display:block;

transition:.4s;

}

.galleryCard:hover{

transform:translateY(-10px);

box-shadow:0 0 40px #9146FF;

}

.galleryCard:hover img{

transform:scale(1.08);

}

/* SOCIAL BUTTONS */

.socialButtons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.socialButtons a{

padding:18px 35px;

background:#9146FF;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.socialButtons a:hover{

transform:translateY(-5px);

box-shadow:0 0 30px #9146FF;

}
.streamLayout{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

}

.streamVideo iframe{

width:100%;

height:650px;

border:none;

border-radius:20px;

}

.streamChat iframe{

width:100%;

height:650px;

border:none;

border-radius:20px;

}

@media(max-width:1100px){

.streamLayout{

grid-template-columns:1fr;

}

}
#loader{

position:fixed;

inset:0;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:1s;

}

#loader h1{

font-size:80px;

font-weight:900;

}

#loader span{

color:#9146FF;

}