* {
    box-sizing:border-box;
}



body {

    margin:0;

    font-family:Arial,sans-serif;

    background:
    linear-gradient(
        rgba(0,0,0,.78),
        rgba(0,0,0,.92)
    ),
    url("../img/background.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:white;

}







header {

    text-align:center;

    padding:40px 20px;

}



header h1 {

    font-size:42px;

    margin:0;

    color:#d4af37;

    text-shadow:0 0 10px #000;

}



header h2 {

    color:#eee;

    font-weight:normal;

}







main {

    max-width:1200px;

    margin:auto;

    padding:20px;

}








.compare-box {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    flex-wrap:wrap;

}







.item-box {


    background:
    linear-gradient(
        145deg,
        #2b2b2b,
        #151515
    );


    border:2px solid #d4af37;


    border-radius:15px;


    padding:25px;


    width:360px;


    text-align:center;


    box-shadow:
    0 0 20px rgba(212,175,55,.25);

}





.item-box h3 {

    color:#d4af37;

    font-size:24px;

}








input {

    width:95%;

    padding:14px;

    border-radius:8px;

    border:1px solid #555;

    background:#111;

    color:white;

    font-size:16px;

}



input:focus {

    outline:none;

    border-color:#d4af37;

}







.item-option {

    background:#333;

    padding:10px;

    margin:5px 0;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;

}



.item-option:hover {

    background:#d4af37;

    color:#111;

}







.vs {

    font-size:35px;

    font-weight:bold;

    color:#d4af37;

}








button {


    display:block;


    margin:40px auto;


    padding:15px 50px;


    background:#d4af37;


    color:#111;


    border:none;


    border-radius:10px;


    font-size:20px;


    font-weight:bold;


    cursor:pointer;


}









#comparisonResult {


    background:

    linear-gradient(
        145deg,
        rgba(34,34,34,.95),
        rgba(10,10,10,.95)
    );


    border:2px solid #444;


    border-radius:15px;


    padding:30px;


    margin-top:30px;


}







/* CABEÇALHO DOS ITENS */


.items-header {


    display:grid;


    grid-template-columns:1fr 120px 1fr;


    align-items:center;


    gap:20px;


    margin-bottom:35px;


}






.item-header {


    text-align:center;


    background:

    linear-gradient(
        145deg,
        #333,
        #181818
    );


    border:2px solid #d4af37;


    border-radius:15px;


    padding:20px;


}






.item-header h2 {


    color:#d4af37;


    margin:15px 0;


}







.item-image {


    width:110px;


    height:110px;


    object-fit:contain;


    image-rendering:pixelated;


    background:transparent;


}






.vs-result {


    font-size:30px;


    font-weight:bold;


    color:#d4af37;


    text-align:center;


}







/* SETAS */


.better {

    color:#00ff66;

    font-weight:bold;

    font-size:22px;

}



.worse {

    color:#ff3333;

    font-weight:bold;

    font-size:22px;

}



.equal {

    color:#d4af37;

    font-weight:bold;

}







table {


    width:100%;


    border-collapse:collapse;


    margin-top:25px;


}





th {


    background:#d4af37;


    color:#111;


    padding:14px;


}



th:first-child {


    text-align:center;


    width:35%;


}



td {


    padding:14px;


    text-align:center;


    border-bottom:1px solid #444;


}






td:first-child {


    font-weight:bold;


    color:#d4af37;


}







tr:hover {


    background:#292929;


}








@media(max-width:700px){



.items-header {


    grid-template-columns:1fr;


}



.item-header {


    width:100%;


}



.compare-box {


    flex-direction:column;


}


}
/* ==========================
   BOTÃO VOLTAR HOME
========================== */


.back-home{

    max-width:600px;

    width:100%;

    margin:20px auto;

}



.back-button{

    display:flex;

    justify-content:center;

    align-items:center;


    width:100%;

    padding:14px;


    background:

    linear-gradient(
        180deg,
        #ffd700,
        #c9a227
    );


    color:#111827;


    text-decoration:none;


    font-size:18px;

    font-weight:bold;


    border-radius:12px;


    box-shadow:

    0 4px 15px rgba(0,0,0,.35);


    transition:.2s;

}



.back-button:hover{


    transform:translateY(-3px);


    background:

    linear-gradient(
        180deg,
        #ffe66d,
        #fbbf24
    );


}