body{
    
    font-family: 'poppins', sans-serif;
    max-width: 1920px;
    margin: 0 auto;
    background: url(../images/claro.jpg);
    background-size: cover;
    backdrop-filter: blur(5px);
    color: #333333;
    transition: 0.2s ease-in-out;
}

body.modo-escuro{
    background: url(../images/escuro.jpg);
    background-size: cover;
    backdrop-filter: blur(5px);
    color: #5e1515af;
}
header{
    display: flex;
    justify-content: space-between;
    padding: 25px;
}
header .logo{
    width: 120px;
    transition: 0.2s ease-in-out;  
}
header .image-button{
    width: 50px;
    transition: 0.2s ease-in-out;
}

header #botao-alterar-tema{
    background: none;
    border: none;
}

header .logo:hover,
header .image-button:hover,
main .cartao-valorant:hover{
    transform: scale(1.10);
}
main{
    padding: 25px;
}
main .agentesvalorant{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
main .agentesvalorant .card-1{
    background: url(../images/astra.png);
    background-size: cover;
}
main .agentesvalorant .card-2{
    background: url(../images/breach.png);
    background-size: cover;
}
main .agentesvalorant .card-3{
    background: url(../images/brimstone.png);
    background-size: cover;
}
main .agentesvalorant .card-4{
    background: url(../images/chamber.png);
    background-size: cover;
}
main .agentesvalorant .card-5{
    background: url(../images/cypher.png);
    background-size: cover;
}
main .agentesvalorant .card-6{
    background: url(../images/fade.png);
    background-size: cover;
}
main .agentesvalorant .card-7{
    background: url(../images/gekko.png);
    background-size: cover;
}
main .agentesvalorant .card-8{
    background: url(../images/harbor.png);
    background-size: cover;
}
main .agentesvalorant .card-9{
    background: url(../images/jett.png);
    background-size: cover;
}
main .agentesvalorant .card-10{
    background: url(../images/kayo.png);
    background-size: cover;
}
main .agentesvalorant .card-11{
    background: url(../images/killjoy.png);
    background-size: cover;
}
main .agentesvalorant .card-12{
    background: url(../images/neon.png);
    background-size: cover;
}
main .agentesvalorant .card-13{
    background: url(../images/omen.png);
    background-size: cover;
}
main .agentesvalorant .card-14{
    background: url(../images/phoenix.png);
    background-size: cover;
}
main .agentesvalorant .card-15{
    background: url(../images/raze.png);
    background-size: cover;
}
main .agentesvalorant .card-16{
    background: url(../images/reyna.png);
    background-size: cover;
}
main .agentesvalorant .card-17{
    background: url(../images/sage.png);
    background-size: cover;
}
main .agentesvalorant .card-18{
    background: url(../images/skye.png);
    background-size: cover;
}
main .agentesvalorant .card-19{
    background: url(../images/sova.png);
    background-size: cover;
}
main .agentesvalorant .card-20{
    background: url(../images/viper.png);
    background-size: cover;
}
main .agentesvalorant .card-21{
    background: url(../images/yoru.png);
    background-size: cover;
}
main .agentesvalorant .card-1{
    background: url(../images/astra.png);
    background-size: cover;
}

main .cartao-valorant{
    width: 268px;
    height: 400px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
    gap: 15px;   
}
main .cartao-valorant:hover{
    box-shadow: 1px 1px 10px black;
}
main .cartao-valorant .informacoes{
    background-color: #f5f5f57a;
    display: flex;
    justify-content: space-between;
    border: 1px solid #333333;
    border-radius: 10px;
    box-shadow: 1px 1px 5px black;
}

main .cartao-valorant .informacoes span{
    padding: 5px;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
}
main .cartao-valorant .tipos{
    display: flex;
    gap: 15px;
    margin-top: 180px;
}
main .cartao-valorant .tipo{
    padding: 8px;
    border-radius: 10px;
    border: 1px solid;
    box-shadow: 1px 1px 5px black;
}

.habilidades,
.funcao{
    background-color: #070707af;
    color: #f5f5f593;
    transition: 0.2s ease-in-out;
}

.habilidades:hover,
.funcao:hover{
    transform: scale(1.10);
    cursor: pointer;
}

main .descricao{
    background-color: #f5f5f59f;
    max-height: 80px;
    overflow-y: scroll;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 10px;
}