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


body {
    background: #09090d;
    color: white;
}


header {

    height: 60vh;

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

    background:
    radial-gradient(circle,#ffffff22,transparent 55%),
    #080808;

}



#logoArea {

    text-align:center;

}



#seriesLogo {

    max-width:550px;
    max-height:300px;
    object-fit:contain;

}





button {

    border:none;

    cursor:pointer;

    background:white;

    color:black;

    width:42px;

    height:42px;

    border-radius:50%;

    font-size:25px;

    transition:.25s;

}



button:hover {

    transform:scale(1.15) rotate(90deg);

}







section,
footer {

    padding:45px 8%;

}






.title {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}



.title h2 {

    font-size:32px;

}







#episodes,
#characters,
#teams,
#gallery,
#news {

    display:grid;

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

    gap:25px;

}






.card {

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

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

    border-radius:22px;

    padding:20px;

    backdrop-filter:blur(10px);

    transition:.3s;

}



.card:hover {

    transform:translateY(-8px);

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

}







iframe {

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:15px;

}







.character {

    cursor:pointer;

    text-align:center;

}



.character img {

    width:100%;

    border-radius:20px;

}







.team img {

    width:90px;

    border-radius:15px;

    margin:5px;

}







.galleryImage {

    width:100%;

    border-radius:20px;

    transition:.3s;

}



.galleryImage:hover {

    transform:scale(1.05);

}







.newsCard {

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

    padding:20px;

    border-radius:20px;

}







#about,
#footer {

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

    padding:25px;

    border-radius:20px;

    line-height:1.7;

}








#popup,
#exportPopup,
#characterPopup {

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:100;

}







#editorBox,
#exportBox,
#characterBox {

    background:#111;

    padding:30px;

    border-radius:25px;

    width:450px;

    max-width:90%;

}







#editorContent input,
#editorContent textarea {

    width:100%;

    margin-top:15px;

    padding:12px;

    border:none;

    border-radius:12px;

}



#editorContent textarea {

    height:120px;

    resize:none;

}







#editorBox button,
#exportBox button {

    width:auto;

    height:auto;

    border-radius:12px;

    padding:12px 25px;

    margin-top:20px;

}







/* Contestant popup */


#characterBox {

    text-align:center;

}



#characterBox img {

    width:240px;

    border-radius:20px;

}



#characterBox p {

    margin-top:20px;

    color:#ccc;

    line-height:1.6;

}







#exportButton {

    position:fixed;

    right:30px;

    bottom:30px;

    width:auto;

    height:auto;

    padding:15px 25px;

    border-radius:15px;

    z-index:50;

}







#exportBox {

    width:800px;

    max-height:90vh;

    overflow:auto;

}







#exportBox textarea {

    width:100%;

    height:220px;

    margin:15px 0 30px;

    padding:15px;

    background:#050505;

    color:white;

    border-radius:15px;

    resize:none;

}







@media(max-width:700px){

    header {

        height:45vh;

    }


    section,
    footer {

        padding:30px 5%;

    }


    #seriesLogo {

        max-width:90%;

    }

}