* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #050505;
    color: white;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}


/* LOADER */

.loader {
    position: fixed;
    inset: 0;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: loadout 2s forwards;
}

.loader h1 {
    font-family: 'Bebas Neue';
    font-size: 70px;
    letter-spacing: 8px;
    color: white;
    text-shadow:
    0 0 10px #7a00ff,
    0 0 30px #7a00ff;
}

@keyframes loadout {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}



/* NAV */

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.4);
}


.logo {
    font-family: 'Bebas Neue';
    font-size: 32px;
    letter-spacing: 4px;
}


ul {
    display: flex;
    gap: 30px;
    list-style: none;
}


ul a {
    color: white;
    text-decoration: none;
    transition: .3s;
}


ul a:hover {
    color: #7a00ff;
}



/* HERO */

.hero {

    height: 100vh;

    background:
    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.9)
    ),
    url("assets/images/hero.jpg");

    background-size: cover;
    background-position: center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

}



.hero-content {
    max-width:900px;
}



.hero h1 {

    font-family:'Bebas Neue';
    font-size:110px;
    letter-spacing:10px;

    text-shadow:
    0 0 20px #7a00ff;

}



.hero h2 {

    font-size:50px;
    margin:20px 0;

}



.hero p {

    font-size:18px;
    color:#ccc;
    line-height:1.7;

}



.buttons {

    margin-top:40px;

}



.buttons a {

    display:inline-block;

    padding:15px 35px;

    margin:10px;

    border-radius:30px;

    background:#7a00ff;

    color:white;

    text-decoration:none;

    transition:.3s;

}



.buttons a:hover {

    transform:scale(1.05);

    box-shadow:
    0 0 30px #7a00ff;

}



/* SECTIONS */

section {

    padding:100px 8%;

    text-align:center;

}


section h2 {

    font-family:'Bebas Neue';

    font-size:60px;

    letter-spacing:5px;

    margin-bottom:40px;

}



/* CARDS */

.cards {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}


.card {

    width:320px;

    padding:40px;

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

    border:1px solid rgba(122,0,255,.4);

    border-radius:20px;

    backdrop-filter:blur(15px);

    transition:.4s;

}



.card:hover {

    transform:translateY(-10px);

    box-shadow:
    0 0 30px #7a00ff;

}


button {

    margin-top:20px;

    padding:12px 30px;

    border:none;

    border-radius:25px;

    background:#7a00ff;

    color:white;

    cursor:pointer;

}



/* GALLERY */

.gallery {

    display:grid;

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

    gap:20px;

}


.gallery div {

    height:250px;

    background:#111;

    border-radius:20px;

    border:1px solid #222;

    transition:.3s;

}



.gallery div:hover {

    transform:scale(1.05);

    box-shadow:0 0 25px #7a00ff;

}



/* MEDIA */

.youtube {

    max-width:600px;

    margin:auto;

    padding:50px;

    background:#111;

    border-radius:20px;

}



.youtube a {

    display:inline-block;

    margin-top:25px;

    padding:15px 35px;

    background:#7a00ff;

    color:white;

    text-decoration:none;

    border-radius:30px;

}



/* FORM */

form {

    max-width:500px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}



input,
textarea {

    background:#111;

    border:1px solid #333;

    padding:15px;

    color:white;

    border-radius:10px;

}



textarea {

    height:150px;

}



/* FOOTER */

footer {

    padding:40px;

    background:#020202;

    text-align:center;

}



/* MOBILE */

@media(max-width:768px){

nav ul {

display:none;

}


.hero h1 {

font-size:65px;

}


.hero h2 {

font-size:35px;

}


section h2 {

font-size:45px;

}

}