/* =====================================
   SEALOWLANDER WEBSITE
   STYLE.CSS - DEEL 1
===================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#081421;

    color:white;

    overflow-x:hidden;

}

/* Achtergrond */

.background{

    position:fixed;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:

    radial-gradient(circle at top left,#0d5dff33,transparent 40%),

    radial-gradient(circle at bottom right,#ff000022,transparent 40%),

    #081421;

    z-index:-999;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#0aa7ff;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#081421;

}

/* HERO */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

/* Banner */

.hero-banner{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:zoom 25s infinite alternate;

}

/* Overlay */

.dark-overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:linear-gradient(

    rgba(0,0,0,.4),

    rgba(0,0,0,.8)

    );

}

/* Navbar */

nav{

    position:absolute;

    top:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 70px;

    z-index:10;

    backdrop-filter:blur(20px);

    background:rgba(5,15,30,.35);

}

.logo-box{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    width:65px;

    border-radius:50%;

    border:3px solid #0aa7ff;

}

.logo-box span{

    font-size:28px;

    font-weight:700;

}

nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}

nav ul a{

    color:white;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}

nav ul a:hover{

    color:#00c8ff;

}

/* Hero */

.hero-content{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.floating-logo{

    width:170px;

    border-radius:50%;

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

    margin-bottom:20px;

}

.hero h1{

    font-size:90px;

    font-weight:800;

    text-shadow:

    0 0 15px #0aa7ff,

    0 0 40px #006eff;

}

.hero p{

    margin-top:20px;

    font-size:28px;

    color:#d7f3ff;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}

.btn{

    padding:16px 35px;

    border-radius:15px;

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.blue{

    background:#008cff;

}

.red{

    background:#ff3434;

}

.btn:hover{

    transform:translateY(-8px);

    box-shadow:0 0 30px rgba(0,170,255,.7);

}

/* Glass Cards */

.cards{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.game-card,
.social-card,
.discord-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:35px;

    transition:.4s;

}

.game-card:hover,
.social-card:hover,
.discord-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 0 30px #00aaff;

}

.game-card h3,
.social-card h3,
.discord-card h3{

    margin-bottom:20px;

    color:#00bfff;

}

.game-card a,
.social-card a,
.discord-card a{

    display:inline-block;

    margin-top:25px;

    text-decoration:none;

    padding:12px 28px;

    border-radius:12px;

    background:#00aaff;

    color:white;

}