/* ===========================================
   CrystalLand v0.3
   style.css
=========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:#090912;
    color:white;
    overflow:hidden;
    min-height:100vh;

}

/* ==========================
   Animated Background
========================== */

#stars{

    position:fixed;
    inset:0;
    background:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(#b784ff 1px, transparent 1px);

    background-size:80px 80px,120px 120px;

    animation:starsMove 80s linear infinite;

    z-index:-1;

}

@keyframes starsMove{

    from{
        background-position:0 0,0 0;
    }

    to{
        background-position:0 1500px,0 1000px;
    }

}

/* ==========================
   Home
========================== */

#home,
#welcomeScreen{

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

    width:100%;
    height:100vh;

}

.glass{

    width:90%;
    max-width:650px;

    padding:50px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 0 50px rgba(150,90,255,.25);

}

.logo{

    font-size:60px;

    margin-bottom:20px;

    color:#d8bcff;

}

.quote{

    font-size:20px;

    color:#d8bcff;

    line-height:1.7;

    margin-bottom:40px;

}

/* ==========================
   Buttons
========================== */

button{

    border:none;

    cursor:pointer;

    padding:15px 30px;

    border-radius:14px;

    font-size:18px;

    color:white;

    background:#8b5cf6;

    transition:.3s;

}

button:hover{

    transform:translateY(-3px);

    background:#a970ff;

    box-shadow:0 0 25px #b784ff;

}

/* ==========================
   Popups
========================== */

.popup{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(12px);

    z-index:999;

}

.hidden{

    display:none !important;

}

.card{

    width:90%;
    max-width:450px;

    background:#151523;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:
    0 0 40px rgba(183,132,255,.35);

}

.card h2{

    margin-bottom:25px;

}

.card p{

    margin-bottom:25px;

    color:#d8bcff;

}

.card input{

    width:100%;

    margin-bottom:15px;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#222235;

    color:white;

    font-size:16px;

}

/* ==========================
   Community
========================== */

#community{

    display:grid;

    grid-template-columns:260px 1fr;

    height:100vh;

}

aside{

    background:#11111b;

    padding:25px;

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

}

aside h2{

    margin-bottom:30px;

    color:#d8bcff;

}

.sidebar{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.channel{

    width:100%;

    text-align:left;

}

.active{

    background:#a970ff;

}

main{

    display:flex;

    flex-direction:column;

    height:100vh;

}

header{

    padding:25px;

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

}

header p{

    color:#caa8ff;

    margin-top:8px;

}

#messages{

    flex:1;

    overflow-y:auto;

    padding:25px;

}

#chatBar{

    display:flex;

    gap:15px;

    padding:20px;

    background:#11111b;

}

#messageInput{

    flex:1;

    padding:15px;

    border:none;

    border-radius:14px;

    background:#222235;

    color:white;

    font-size:16px;

}