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


body{

    background:#050505;

    color:white;

    min-height:100vh;

    overflow-x:hidden;

}



.background{

    position:fixed;

    width:100%;

    height:100%;

    background:
    radial-gradient(circle at top,#8a2be255,transparent 40%),
    radial-gradient(circle at bottom,#5b00aa55,transparent 40%),
    #050505;

    z-index:-1;

}



header{

    display:flex;

    justify-content:center;

    padding:35px 20px;

}



.logo{

    font-size:65px;

    font-weight:800;

    letter-spacing:2px;

    text-shadow:
    0 0 15px #8a2be2,
    0 0 40px #8a2be2;

}



.main{

    min-height:80vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:20px;

}



.main h2{

    font-size:45px;

    text-align:center;

}



.main p{

    color:#bdbdbd;

    margin:15px;

    text-align:center;

}



.search{

    display:flex;

    gap:15px;

    margin-top:30px;

    justify-content:center;

    flex-wrap:wrap;

}



#searchInput{

    width:350px;

    max-width:90vw;

    padding:18px;

    border-radius:20px;

    border:none;

    outline:none;

    background:#111;

    color:white;

    font-size:18px;

    box-shadow:0 0 20px #8a2be255;

}



#searchButton,
#watchButton{


    padding:17px 40px;

    border:none;

    border-radius:20px;

    background:#8a2be2;

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 0 25px #8a2be2;

}



#searchButton:hover,
#watchButton:hover{

    transform:scale(1.05);

    box-shadow:0 0 45px #b04cff;

}





.result{


    margin-top:60px;

    width:900px;

    max-width:95%;

    background:#111111dd;

    border-radius:35px;

    padding:30px;

    display:flex;

    gap:35px;

    align-items:center;

    box-shadow:

    0 0 30px #8a2be266;


    animation:show .5s ease;


}



.hidden{

    display:none;

}



.animeImage{

    width:350px;

    height:450px;

    border-radius:30px;

    overflow:hidden;

    background:#000;

}



.animeImage img{

    width:100%;

    height:100%;

    object-fit:contain;

}



.animeInfo{

    flex:1;

}



.animeInfo h2{

    font-size:35px;

    margin-bottom:20px;

}



.animeInfo p{

    color:#ddd;

    line-height:1.7;

}



@keyframes show{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}




/* 📱 ТЕЛЕФОНЫ */


@media(max-width:700px){


.logo{

    font-size:45px;

}


.main h2{

    font-size:32px;

}


.result{

    flex-direction:column;

    padding:20px;

}


.animeImage{

    width:100%;

    height:420px;

}


.animeInfo{

    text-align:center;

}


.animeInfo h2{

    font-size:28px;

}


#searchInput{

    width:100%;

}


#searchButton{

    width:100%;

}


}



@media(max-width:400px){


.logo{

font-size:38px;

}


.animeImage{

height:350px;

}


}