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


:root{

    --bg:#050505;
    --card:#0d0d0d;
    --white:#ffffff;
    --gray:#bdbdbd;

}




body{

    background:var(--bg);

    color:white;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    min-height:100vh;

}





/* =========================
HEADER
========================= */


header{

    text-align:center;

    padding:40px 20px 25px;

}




.logo-img{

    width:190px;

    max-width:80%;

    height:auto;


    filter:

    drop-shadow(0 0 8px white)
    drop-shadow(0 0 25px white);



    animation:logoGlow 3s infinite alternate;


}





@keyframes logoGlow{


from{

filter:

drop-shadow(0 0 8px white);

}


to{


filter:

drop-shadow(0 0 30px white);


}



}





.title{


    font-size:60px;

    letter-spacing:4px;

    margin-top:15px;


    text-shadow:


    0 0 5px white,

    0 0 20px white,

    0 0 40px white;



}




.logo p{


    margin-top:15px;

    color:var(--gray);

    font-size:18px;


}





/* =========================
NAVIGATION
========================= */



nav{


    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}



nav a{


    color:white;

    text-decoration:none;

    padding:10px 25px;

    border:1px solid white;

    border-radius:30px;


    box-shadow:

    0 0 10px white;



    transition:.3s;



}



nav a:hover{


    background:white;

    color:black;


    box-shadow:

    0 0 30px white;


}





/* =========================
ADS
========================= */


.ads{


    width:90%;

    max-width:1000px;

    height:90px;


    margin:30px auto;


    border:1px solid white;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#aaa;


    box-shadow:

    0 0 15px rgba(255,255,255,.7);



}




/* =========================
LAYOUT
========================= */


.layout{


    display:flex;

    gap:30px;

    width:95%;

    max-width:1400px;

    margin:auto;


}




main{

    flex:1;

}




aside{


    width:300px;

    height:max-content;


    background:#090909;


    border:1px solid white;


    padding:25px;


    border-radius:10px;



    box-shadow:

    0 0 20px white;


}





aside h2{


    text-align:center;

    margin-bottom:20px;


}





#news{


    color:#ccc;

    line-height:1.6;


}





/* =========================
SEARCH
========================= */


.search{


    margin-bottom:30px;


}



.search input{


    width:100%;

    padding:18px;


    background:black;


    color:white;


    border:1px solid white;


    border-radius:10px;


    font-size:18px;


    outline:none;



    box-shadow:

    0 0 15px rgba(255,255,255,.5);



}





.search input:focus{


    box-shadow:

    0 0 30px white;


}







/* =========================
GRID
========================= */


.section-title{


    text-align:center;

    margin:30px 0;

    font-size:32px;


    text-shadow:

    0 0 15px white;


}




.grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;



}





.card{


    background:var(--card);


    border:1px solid white;


    border-radius:12px;


    overflow:hidden;


    cursor:pointer;



    transition:.3s;



    box-shadow:

    0 0 10px rgba(255,255,255,.5);



}




.card:hover{


    transform:

    translateY(-10px)
    scale(1.03);



    box-shadow:


    0 0 35px white;


}





.card img{


    width:100%;


    height:300px;


    object-fit:cover;


}





.card h3{


    padding:15px;


    text-align:center;


}






/* =========================
BUTTONS
========================= */



button{


    background:black;


    color:white;


    border:1px solid white;


    padding:12px 30px;


    margin:10px;


    border-radius:30px;


    cursor:pointer;



    font-size:16px;



    box-shadow:

    0 0 15px white;



    transition:.3s;



}





button:hover{


    background:white;


    color:black;



    box-shadow:

    0 0 35px white;


}





/* =========================
ANIME PAGE
========================= */


.anime-page{


    width:90%;

    max-width:1100px;

    margin:auto;


}




.anime-info{


    text-align:center;


}





#cover{


    width:300px;


    max-width:90%;


    border-radius:15px;


    border:1px solid white;


    box-shadow:


    0 0 30px white;


}





#title{


    margin:25px 0;


    font-size:45px;


}





#description{


    color:#ccc;

    font-size:18px;

    line-height:1.5;


}







.season{


    background:#090909;


    border:1px solid white;


    border-radius:15px;


    padding:25px;


    margin:25px 0;


    box-shadow:


    0 0 15px rgba(255,255,255,.6);


}





.season h3{


    margin-bottom:15px;


}






/* =========================
PLAYER
========================= */


.player{


    width:90%;


    max-width:1100px;


    margin:auto;


    text-align:center;


}




#episode-title{


    font-size:35px;


    margin-bottom:30px;


}




.video-box{


    width:100%;


    aspect-ratio:16/9;


    border:1px solid white;


    border-radius:15px;


    overflow:hidden;



    box-shadow:


    0 0 35px white;


}




.video-box iframe{


    width:100%;


    height:100%;


    border:0;


}







/* =========================
RESPONSIVE
========================= */


@media(max-width:900px){


.layout{


    flex-direction:column;


}


aside{


    width:100%;


}


.grid{


    grid-template-columns:

    repeat(2,1fr);


}


.title{


    font-size:45px;


}



}




@media(max-width:550px){



.grid{


    grid-template-columns:

    1fr;


}



.title{


    font-size:35px;


}



nav{


    gap:15px;


}



}