@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

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

:root{
    --accent:#1c8ce0;
}

html,body{
    height:100%;
    overflow:hidden;
}

body{
    font-family:'Inter',sans-serif;
    background:#090909;
    color:white;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top,#0b4f8a 0%,transparent 60%),
    linear-gradient(to bottom,#090909,#111);
    z-index:-1;
}

/* NAV */

nav{
    position:relative;
    height:80px;
    padding:0 30px;

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

.project-logo{

    width:80px;
    position:absolute;

    top:15px;
    left:20px;

    filter:drop-shadow(
    0 0 10px rgba(28,140,224,.35)
    );
}

.nav-right{
    display:flex;
    gap:20px;
}

/* BUTTONS */

.btn{

    padding:12px 24px;

    background:var(--accent);

    color:white;
    text-decoration:none;

    border-radius:10px;

    font-weight:700;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-3px);

}

.discord{

    background:#5865F2;

}

/* HERO */

.hero{

    height:calc(100vh - 80px);

    max-width:1400px;

    margin:auto;
    padding:20px 50px;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

}

/* LEFT SIDE */

.hero-left{

    display:flex;
    flex-direction:column;

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

    text-align:center;

}

.project-banner{

    width:100%;
    max-width:500px;

    margin-bottom:30px;

    border-radius:10px;

    filter:drop-shadow(
    0 0 20px rgba(28,140,224,.4)
    );

}

.hero-text{

    font-size:35px;
    font-weight:700;

    line-height:1.3;

    max-width:700px;

    margin-bottom:30px;

}

/* RIGHT SIDE */

.render-side{
    display:flex;
    justify-content:center;
    align-items:flex-end;

    height:100%;
    transform: translateX(150px);
}

.render-credit{

margin-top:10px;

font-size:13px;

opacity:.55;

letter-spacing:1px;

}

.render-credit span{

color:#1c8ce0;

font-weight:700;

}

footer{
    margin-top:auto;

    width:100%;
    padding:20px;

    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
}

footer p{
    margin:0;
    font-size:14px;
    letter-spacing:1px;
    opacity:0.8;
}

.character-render{

    height:75vh;
    width:auto;

    object-fit:contain;

    filter:drop-shadow(
    0 0 25px rgba(28,140,224,.4)
    );
}

/* Application Page */

.card{

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

margin:40px auto;

padding:40px;

background:rgba(20,20,20,.85);

backdrop-filter:blur(15px);

border-radius:20px;

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

box-shadow:
0 0 30px rgba(0,0,0,.5),
0 0 20px rgba(28,140,224,.15);

animation:fadeIn .5s ease;

}

.card h2{

font-size:38px;

font-weight:800;

text-align:center;

margin-bottom:25px;

color:white;

text-transform:uppercase;

letter-spacing:2px;

}

.card p{

text-align:center;

margin-bottom:25px;

font-size:16px;

}

.card strong{

color:#1c8ce0;

}

form{

display:flex;

flex-direction:column;

gap:18px;

}

input,
textarea{

width:100%;

padding:16px 18px;

border:none;

border-radius:12px;

background:#111;

color:white;

font-size:15px;

outline:none;

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

transition:.3s;

}

input::placeholder,
textarea::placeholder{

color:rgba(255,255,255,.45);

}

input:focus,
textarea:focus{

border:1px solid #1c8ce0;

box-shadow:
0 0 15px rgba(28,140,224,.3);

transform:translateY(-2px);

}

textarea{

min-height:150px;

resize:none;

}

form .btn{

margin-top:10px;

width:100%;

padding:16px;

font-size:16px;

text-transform:uppercase;

letter-spacing:1px;

}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* Mobile */

@media(max-width:900px){

.card{

width:95%;

padding:25px;

}

.card h2{

font-size:28px;

}

}

/* ======================
   DASHBOARD
====================== */

.dashboard-container{

width:100%;
height:calc(100vh - 80px);

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

padding:30px;

}

.dashboard-main-card{

width:1300px;
max-width:95%;

background:rgba(20,20,20,.75);

backdrop-filter:blur(15px);

border-radius:25px;

padding:40px;

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

box-shadow:
0 0 30px rgba(0,0,0,.4);

}

.dashboard-header{

text-align:center;

margin-bottom:40px;

}

.dashboard-header h1{

font-size:42px;

font-weight:800;

margin-bottom:10px;

}

.dashboard-header span{

color:#1c8ce0;

}

.dashboard-header p{

opacity:.7;

font-size:18px;

}


/* GRID */

.dashboard-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-bottom:25px;

}


/* BOXES */

.dashboard-box{

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

padding:30px;

border-radius:20px;

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

transition:.3s;

}

.dashboard-box:hover{

transform:translateY(-5px);

border-color:rgba(28,140,224,.5);

box-shadow:
0 0 25px rgba(28,140,224,.15);

}

.dashboard-box h3{

font-size:24px;

margin-bottom:25px;

color:#1c8ce0;

}


/* INFO */

.dashboard-info{

margin-bottom:20px;

}

.dashboard-info p:first-child{

font-size:13px;

opacity:.5;

margin-bottom:5px;

}

.dashboard-info p:last-child{

font-size:18px;

font-weight:600;

}


/* STATUS */

.status{

display:inline-block;

padding:10px 18px;

border-radius:999px;

font-weight:700;

margin-bottom:20px;

}

.pending{

background:rgba(255,180,0,.12);

color:#ffc400;

}

.accepted{

background:rgba(0,255,100,.12);

color:#31d67b;

}

.denied{

background:rgba(255,0,0,.12);

color:#ff4d4d;

}

.status-text{

opacity:.7;

line-height:1.7;

}


/* CHARACTER */

.character-card{

display:flex;
flex-direction:column;
align-items:center;

}

.dashboard-render{

height:350px;
width:auto;

object-fit:contain;

filter:drop-shadow(
0 0 25px rgba(28,140,224,.5)
);

transition:.3s;

}

.dashboard-render:hover{

transform:scale(1.04);

}


/* MOBILE */

@media(max-width:900px){

.dashboard-grid{

grid-template-columns:1fr;

}

.dashboard-main-card{

padding:20px;

}

.dashboard-header h1{

font-size:28px;

}

.dashboard-render{

height:250px;

}

}