* {
    box-sizing:border-box;
}



body {

    margin:0;

    min-height:100vh;


    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.9)
    ),

    url("https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg");


    background-size:cover;

    background-position:center;

    background-attachment:fixed;


    color:white;


    font-family:

    Arial,
    Helvetica,
    sans-serif;

}



.container {

    max-width:1200px;

    margin:auto;


    padding:40px 20px;


    text-align:center;

}



h1 {

    font-size:48px;

}



.subtitle {

    color:#aaa;

}



input {


    width:80%;

    max-width:600px;


    padding:15px;


    margin:25px;


    border-radius:12px;


    border:none;


    background:

    rgba(20,20,30,.9);


    color:white;


    font-size:18px;

}



#champions {


    display:grid;


    grid-template-columns:

    repeat(
        auto-fill,
        minmax(150px,1fr)
    );


    gap:15px;


    max-height:450px;


    overflow-y:auto;


    padding:10px;

}



.champ {


    background:

    rgba(20,20,30,.9);


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:15px;


    padding:15px;


    transition:.2s;

}



.champ:hover {

    transform:

    translateY(-5px);

}



.champ img {


    width:80px;


    height:80px;


    border-radius:50%;


}



.champ label {


    display:block;

    margin-top:10px;

}



.champ input {

    transform:scale(1.3);

    margin-right:8px;

}



button {


    margin-top:25px;


    padding:

    14px 30px;


    border:none;


    border-radius:12px;


    background:

    linear-gradient(
        135deg,
        #c89b3c,
        #8c6a1f
    );


    color:white;


    font-size:20px;


    font-weight:bold;


    cursor:pointer;


    transition:.2s;

}



button:hover {

    transform:scale(1.05);

}



.toggle-btn {

    background:#333;

}



.random {

    margin-top:40px;

}



.build-btn {

    background:

    linear-gradient(
        135deg,
        #1f8cff,
        #0050aa
    );

}



#result {

    margin-top:40px;

    font-size:30px;

}



.result-img {


    width:700px;


    max-width:90%;


    border-radius:20px;


    margin-top:20px;


    box-shadow:

    0 0 40px rgba(0,0,0,.8);

}



.spin {


    animation:

    shake .1s infinite;

}



@keyframes shake {


0% {

transform:translateX(-8px);

}


50% {

transform:translateX(8px);

}


100% {

transform:translateX(-8px);

}


}



::-webkit-scrollbar {

    width:10px;

}



::-webkit-scrollbar-thumb {

    background:#c89b3c;

    border-radius:10px;

}



@media(max-width:600px){


h1 {

font-size:32px;

}


#champions {

grid-template-columns:

repeat(
auto-fill,
minmax(120px,1fr)
);

}


}