:root {

    --secundary-color: #4A243B;
}

body {
    background-color: #3A0B2D;
    height: 100%;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    font-family: none;
    display: flex;
}

/*Barra de pesquisa*/
.pesquisar {
    background-color: #432544;
    height: 7rem;
    width: 100%;
    border-radius: 3cap;
    padding: clamp(0.5rem, 5vw, 1rem);
    gap: clamp(0.5rem, 5vw, 1rem);
    display: flex;

}

.iconpesquisar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 5vw, 1rem);
}

.barra {
    background-color: #5B3954;
    height: 70px;
    width: 70%;
    border-radius: 3cap;
    display: flex;
}

.sino {
    background-color: #543855;
    height: 8vh;
    width: 4vw;
    border-radius: 30cap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sino img {
    height: 4vh;
    width: 2vw;
}

.engrenagem {
    background-color: #543855;
    height: 8vh;
    width: 4vw;
    border-radius: 30cap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.engrenagem img {
    height: 4vh;
    width: 2vw;
}

.perfil {
    background-color: #543855;
    height: 8vh;
    width: 15vw;
    border-radius: 3cap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perfil img {
    height: 5vh;
    width: 3vw;
}

.subnome {
    color: #FFFFFF48;
    font-size: clamp(1rem, 0.1vw, 2rem);
}

.nome {
    font-size: 1rem;
    color: white;
}

.textoperfil {
    padding: 1rem;
}

.iconperfil {
    border-radius: 3cap;
}

.pesquisarNome {
    line-height: 7vh;
    font-size: clamp(0.5rem, 2.5vw, 2rem);
    color: #FFFFFF48;
    justify-content: center;
}

/*Barra de pesquisa*/
/*página central*/
.ladingpage {
    height: 70vh;
    width: 80vw;
}

/*página central*/
/*Coluna de amizades*/
.esquerda {
    background-color: #4A243B;
    height: 96vh;
    width: 15vw;
    border-radius: 3cap;
    margin-right: clamp(0.5rem, 2.5vw, 4rem);
}

.dash {
    background-color: #4A152E;
    margin-top: 2rem;
    border-radius: 3cap;
    height: 8vh;
    width: 12.5vw;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: clamp(0.25rem, 1vw, 1rem);
}

.mydash {
    font-size: clamp(0.5rem, 1vw, 2rem);
    color: white;
}

.icon {
    padding: clamp(0.5rem, 1vw, 1rem);
    max-height: 8vh;
    min-width: 2vw;
}

.nomes p {
    color: rgb(255, 255, 255);
    margin-left: clamp(0.25rem, 1vw, 1rem);
    font-size: clamp(0.5rem, 1vw, 0.8rem);
    display: flex;
    align-items: center;
}

.online p {
    color: rgba(211, 211, 211, 0.493);
    font-size: clamp(0.5rem, 1vw, 1rem);
    margin-left: clamp(2rem, 1vw, 2rem);
    padding: clamp(0.5rem, 1vw, 0.5rem);
}

.dashbaixo {
    background-color: #4a152e;
    border-radius: 3cap;
    height: 8vh;
    width: 12.5vw;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: clamp(0.25rem, 1vw, 1rem);
}

.mydashbaixo {
    font-size: clamp(0.5rem, 1vw, 2rem);
    color: white;
}

.container {
    margin-top: 2rem;
    display: flex;
}

/*Coluna de amizades*/
/*main*/
.homemaranha {
    align-items: center;
    border-radius: 3cap;
    height: 50vh;
    width: 40vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.507);
    background-image: url(./img/div_main/Homem\ aranha\ 1.png);

}

.raio {
    height: 5vh;
    width: 10vw;
    margin: clamp(0.5rem, 1vw, 1rem);
    background-color: #82708e70;
    border-radius: 3cap;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: clamp(0.5rem, 1vw, 2rem);
}

.raio img {
    background-color: #ffcd45b7;
    border-radius: 3cap;
    height: 2vw;
    width: 2vw;
}

.raio p {
    font-size: clamp(0.5rem, 1vw, 2rem);
    color: white;
}

.titulo {
    text-align: start;
    font-size: clamp(1.2rem, 2.5vw, 5rem);
    color: white;
    justify-content: flex-start;
    display: flex;
    margin-top: clamp(0.5rem, 1vw, 2rem);
    margin-left: 3rem;
}

.subtitulo {
    font-size: clamp(0.8rem, 1vw, 2rem);
    color: white;
    text-align: start;
    justify-content: start;
    display: flex;
    margin-top: clamp(0.5rem, 1vw, 2rem);
    margin-left: 3rem;
}

.book {
    background-color: #ff000059;
    width: 15vw;
    height: 5vh;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 3cap;
    margin-top: clamp(0.5rem, 1vw, 2rem);
    margin-left: 3rem;
}

.book p {
    font-size: clamp(1rem, 1vw, 2rem);
    color: white;
}

.setas {
    height: 5vh;
    width: 3vw;
    display: flex;
    margin-top: 1rem;
    margin-left: 5rem;
    gap: clamp(0.5rem, 7vw, 7rem);
}

.setadirecionadaparadireira {
    transform: rotate(180deg);
}

.carregando {
    align-items: center;
    display: flex;
    gap: clamp(0.25rem, 1vw, 1rem);
    font-size: clamp(1rem, 1vw, 2rem);
    color: white;
}

.carregando img {
    height: 3vh;
    width: 3vw;
}

/*biblioteca de livros*/
.libary {
    background-color: #3D0B25;
    height: 47vh;
    width: 30vw;
    border-radius: 5cap;
    margin-left: clamp(1rem, 6vw, 6rem);
    border: 0.5rem solid #461C3B;
    border-bottom-color: 2px solid #ccc;
    box-shadow: 0 0 20px rgb(117, 10, 121)
}

.titulolibary p {
    color: white;
    font-size: clamp(0.01rem, 2vw, 2rem);
    margin-top: clamp(0.1rem, 1vw, 1rem);
}

.libary p {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulococ {
    display: flex;
}

.imglibary {
    height: 5vh;
    width: 3vw;
}

.descricaococ {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 0.5rem;
}

.descricaococ0 {
    font-size: 1rem;
    height: 3vh;
    width: 6vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.descricaococ1 {
    font-size: 1rem;
    height: 3vh;
    width: 6vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.coc {
    display: flex;
    margin-left: 1rem;
    font-size: 1rem;
    gap: clamp(1rem, 2vw, 2rem);
    cursor: grab;
}

.nfs {
    display: flex;
    margin-left: 1rem;
    font-size: 1rem;
    gap: clamp(1rem, 2vw, 2rem);
    cursor: grab;
}

.titulonfs {
    display: flex;
}

.descricaonfs {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 0.5rem;
}

.descricaonfs0 {
    font-size: 1rem;
    height: 3vh;
    width: 5vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.descricaonfs1 {
    font-size: 1rem;
    height: 3vh;
    width: 4vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.got {
    display: flex;
    margin-left: 1rem;
    font-size: 1rem;
    gap: clamp(1rem, 2vw, 2rem);
    cursor: grab;
}

.titulogot {
    display: flex;
}

.descricaogot {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 0.5rem;
}

.descricaogot0 {
    font-size: 1rem;
    height: 3vh;
    width: 6vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.descricaogot1 {
    font-size: clamp(1rem, 2vw, 1rem);
    height: 3vh;
    width: 6vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.over {
    display: flex;
    margin-left: 1rem;
    font-size: 1rem;
    gap: 2rem;
    cursor: grab;
}

.tituloover {
    display: flex;
}

.descricaoover {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 0.5rem;
}

.descricaoover0 {
    font-size: 1rem;
    height: 3vh;
    width: 5vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.descricaoover1 {
    font-size: 1rem;
    height: 3vh;
    width: 5vw;
    background-color: #52254A;
    border-radius: 10cap;
}

.line {
    height: 0.1vh;
    width: 20vw;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 3rem;
}

.imagens {
    display: flex;
}

.setadireita {
    margin-top: 100px;
    height: 5vh;
    width: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*biblioteca de livros*/
/*Imagens*/
.imagens {
    display: flex;
    gap: 2rem;
}

.apex {
    height: 25vh;
    width: 15vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 40px rgb(129, 14, 175);
    background-image: url(./img/div_main/sddefault\ 1.png);
    border-radius: 3cap;
    cursor: grab;
}

.apex p,
.overwatch p,
.marvel p {
    color: white;
    font-size: clamp(1rem, 1vw, 2rem);
    margin-left: 1rem;
    margin-top: clamp(5rem, 3vw, 10rem);
}

.streetfighter p {
    color: white;
    font-size: clamp(1rem, 1vw, 2rem);
    margin-left: 1rem;
    margin-top: clamp(3rem, 4vw, 4rem);
}

.players {
    margin: 1rem;
    background-color: #303A4946;
    border-radius: 3cap;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: clamp(1rem, 3vw, 2rem);
    font-size: 1rem;
    color: white;
}

.overwatch {
    height: 25vh;
    width: 15vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 40px rgb(94, 131, 255);
    background-image: url(./img/div_main/download\ 1.png);
    border-radius: 3cap;
    cursor: grab;
}

.marvel {
    height: 25vh;
    width: 15vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 40px rgb(94, 131, 255);
    background-image: url(./img/div_main/thumb-350-1386761\ 1.png);
    border-radius: 3cap;
    cursor: grab;
}

.streetfighter {
    height: 25vh;
    width: 15vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 40px rgb(153, 171, 229);
    background-image: url(./img/div_main/ryu-street-fighter-4s-1280x2120\ 1.png);
    border-radius: 3cap;
    cursor: grab;
}

/*footer*/
footer {
    height: 5vh;
    width: 93vw;
    display: flex;
    background-color: #4A152E;
    color: white;
    margin-top: clamp(1rem, 3vw, 1rem);
    border-radius: 1cap;
}

.imgfooter {
    display: flex;
    margin-left: clamp(1rem, 3vw, 1rem);
    gap: clamp(1rem, 3vw, 1rem);
    font-size: clamp(1rem, 3vw, 1rem);
    justify-content: center;
    align-items: center;
}

.imgfooter img {
    background-color: #54375B;
    border-radius: 1cap;
    height: 3vh;
    width: 3vw;
}

.logout {
    height: 4vh;
    width: 30vw;
    margin-top: clamp(0.2rem, 3vw, 0.2rem);
    margin-left: clamp(0.1rem, 10vw, 5rem);
    margin-right: clamp(0.1rem, 10vw, 5rem);
    gap: clamp(0.1rem, 3vw, 1rem);
    font-size: clamp(1rem, 3vw, 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3C1123;
    border-radius: 3cap;
}

.logout img {
    height: 3vh;
    width: 3vw;
}

.pequenasimagens {
    gap: clamp(0.1rem, 3vw, 1rem);
    display: flex;
}

.caixa,
.amigos,
.cartao {
    background-color: #54375B;
    height: 4vh;
    width: 5vw;
    margin-top: clamp(0.1rem, 3vw, 0.2rem);
    border-radius: 3cap;
    justify-content: center;
    align-items: center;
    display: flex;
}

.caixa img,
.amigos img,
.cartao img {
    height: 3vh;
    width: 3vw;
    border-radius: 3cap;
    display: flex;
}

h1 {
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: clamp(20rem, 20vw, 20rem);
}

/*footer*/
@media screen and (min-width: 769px) {
    footer {
        display: none;
    }
}

@media (max-width: 1188px) {
    .textoperfil {
        display: none;
    }
}

@media (max-width: 850px) {
    .carregando {
        display: none;
    }
}

@media (max-width: 768px) {

    .nfs,
    .got,
    .over,
    .line,
    .esquerda,
    .overwatch,
    .marvel,
    .setabaixovermelha,
    .setasabaixodalibary,
    .textoperfil,
    .setavermelha,
    .setas {
        display: none;
    }

    .pesquisar {
        height: 10vh;
        width: 93vw;
    }

    .pesquisarNome {
        font-size: clamp(0.5rem, 2vw, 1.5rem);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .barra {
        height: 6vh;
        width: 50vw;
    }

    .engrenagem {
        height: 6vh;
        width: 9vw;
    }

    .sino {
        height: 6vh;
        width: 9vw;
    }

    .perfil {
        height: 6vh;
        width: 9vw;
    }

    .iconperfil {
        margin-left: clamp(0.1rem, 1vw, 0.5rem);
    }

    .libary {
        height: 15vh;
        width: 85vw;
        margin-left: 6rem;
    }

    .titulococ {
        font-size: 2rem;
    }

    .descricaococ {
        margin-left: clamp(2rem, 5vw, 5rem);
    }

    .descricaococ0,
    .descricaococ1 {
        height: 4vh;
        width: 15vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(0.5rem, 2vw, 1.5rem);
    }

    .imglibary {
        height: 8vh;
        width: 10vw;
        border-radius: 3cap;
    }

    .iconpesquisar {
        display: flex;
        align-items: center;
        text-align: center;
    }

    .homemaranha {
        height: 30vh;
        width: 75vw;
        top: 35%;
        right: 13%;
        position: absolute;
        cursor: grab;
    }

    .raio {
        height: 3vh;
        width: 15vw;
        margin-left: clamp(3rem, 2vw, 3rem);
    }

    .raio img {
        height: 2vh;
        width: 2vw;
    }

    .raio p {
        font-size: clamp(1rem, 1vw, 1rem);
    }

    .titulo {
        font-size: clamp(1.8rem, 2vw, 1.8rem);
        margin-top: 0px;
    }

    .subtitulo {
        font-size: clamp(0.8rem, 1vw, 0.8rem);
        margin-top: clamp(0.5rem, 1vw, 0.5rem);
    }

    .book {
        height: 2.5vh;
        width: 15vw;
        margin-left: clamp(3.5rem, 1vw, 1rem);
    }

    .book p {
        font-size: clamp(0.8rem, 1vw, 0.8rem);
    }

    .setas {
        height: 3vh;
        width: 3vw;
    }

    .carregando {
        margin-left: clamp(1rem, 1vw, 1rem);
    }

    .carregando img {
        height: 3vh;
        width: 3vw;
    }

    .carregando p {
        font-size: 1rem;
    }

    .imagens {
        gap: 1.5rem;
    }

    .apex,
    .streetfighter {
        height: 20vh;
        width: 38vw;
    }

    .apex p,
    .streetfighter p {
        font-size: clamp(1.2rem, 1vw, 1rem);
        margin-top: 70px;
    }
}

/*Mobile*/
@media (max-width: 480px) {

    .ladingpage{
               height: 55vh;
        width: 30vw; 
    }

    .libary,
    .pesquisarNome,
    .setas, .subtitulo {
        display: none;
    }

    .barra {
        margin-left: 0px;
        height: 7vh;
        width: 30vw;
    }

    .pesquisar {
        margin-top: 20px;
        height: 11vh;
        width: 100vw;
    }

    .sino {
        height: 7vh;
        width: 12vw;
    }

    .sino img {
        height: 7vh;
        width: 10vw;
    }

    .perfil {
        height: 7vh;
        width: 20vw;
    }

    .perfil img {
        height: 5vh;
        width: 5vw;
    }

    .engrenagem {
        height: 7vh;
        width: 12vw;
    }

    .engrenagem img {
        height: 5vh;
        width: 10vw;
    }

    .homemaranha {
        height: 30vh;
        width: 93vw;
        margin-top: 1.5rem;
        top: 20%;
        left: 8%;
        cursor: grab;
    }

    .raio {
        height: 4vh;
        width: 25vw;
    }

    .raio img {
        height: 3vh;
        width: 5vw;
    }

    .raio p {
        font-size: 1rem;
    }

    .book {
        margin-top: 1rem;
        height: 5vh;
        width: 30vw;
    }

    .imagens{
        gap: 1rem;
    }

    .apex,
    .streetfighter {
        height: 30vh;
        width: 38vw;
    }

    .apex p {
        font-size: 1rem;
    }

    .streetfighter p {
        font-size: 1rem;
    }

    footer {
        margin-top: 20px;
        height: 7vh;
        width: 100vw;
    }

    .imgfooter img {
        background-color: #54375B;
        height: 5vh;
        width: 5vw;
    }

    .imgfooter {
        font-size: clamp(1rem, 1vw, 1rem);
    }

    .logout {
        height: 5vh;
        width: 25vw;
        margin-top: clamp(0.5rem, 3vw, 0.2rem);
        margin-left: clamp(0.75rem, 1vw, 1rem);
        margin-right: clamp(0.75rem, 1vw, 1rem);
        gap: clamp(0.1rem, 3vw, 1rem);
        font-size: clamp(1rem, 3vw, 1rem);
    }

    .logout img {
        height: 4vh;
        width: 4vw;
    }

    .pequenasimagens {
        gap: clamp(0.5rem, 1vw, 0.5rem);
    }

    .caixa,
    .amigos,
    .cartao {
        height: 5vh;
        width: 7vw;
        margin-top: clamp(0.5rem, 1vw, 0.5rem);
    }

    .caixa img,
    .amigos img,
    .cartao img {
        height: 3vh;
        width: 3vw;
    }
}