@charset "UTF-8";

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* BODY */

body{

    font-family: "Kalam", cursive;
    color:white;

    background-image:url("./imagens/backgoundArkania006.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}


/* CONTAINER */

.container{

    max-width:1000px;
    width:95%;
    margin:auto;
    text-align:center;
    padding-bottom:40px;

}


/* BANNER */

.banner{

    display:flex;
    justify-content:center;
    margin-top:30px;

}

.banner{
    display:flex;
    justify-content:center;
    margin-top:30px;
}

.banner img{

    width:100%;
    max-width:700px;
    height:auto;

    border-radius:12px;

}


/* MARQUEE */

.marquee{

    width:100%;
    max-width:700px;
    margin:20px auto;

    padding:10px;

    background:rgba(0, 0, 0, 0.614);
    border-radius:6px;

    font-size:18px;

}


/* MENU */

.menu{

    width:100%;
    max-width:700px;
    margin:20px auto;

    display:flex;
    justify-content:center;
    gap:15px;
}


/* BOTÕES DO MENU */

.menu-btn{

    display:inline-block;

    padding:10px 28px;

    background:rgba(0, 0, 0, 0.548);

    color:#f2eef7;

    text-decoration:none;
    font-size:16px;

    border-radius:8px;

    border:1px solid #dacaf5;

    transition:all 0.25s ease;

}


/* HOVER */

.menu-btn:hover{

    background:#cb9cf7;
    color:white;

}


/* CLICK */

.menu-btn:active{

    transform:scale(0.96);

}


/* CARDS */

.cards{

    margin-top:30px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;

}

.card{

    width:160px;
    text-decoration:none;
    color:white;

}


/* IMAGEM */

.card img{

    width:100%;
    border-radius:10px;

    filter: grayscale(100%) sepia(60%) hue-rotate(250deg) saturate(180%) brightness(1.1);

    transition:0.35s;

}

/* HOVER */

.card:hover img{

    filter:none;
    transform:scale(1.05);

}


/* NOME */

.card span{

    display:block;
    margin-top:8px;
    font-size:18px;

}


/* TEXTO */

.texto{

    width:100%;
    max-width:700px;
    margin:30px auto;

    padding:20px;

    background: rgba(0, 0, 0, 0.619);
    border-radius:8px;

    line-height:1.6;
    text-align:justify;

}


/* VOLTAR */

.voltar{

    margin-top:25px;

}

.voltar a{
    color: #c09ff5;
    text-decoration:none;
    transition:0.2s;
}

.voltar a:hover{
    color:#a855f7;
}

.voltar a:active{
    color:#6d28d9;
}


/* RODAPÉ */

footer{

    margin-top:25px;
    padding:15px;

    font-size:14px;
    color:#ccc;

}



/* RESPONSIVIDADE */



/* TABLET */

@media (max-width:900px){

.container{

    width:95%;

}

.cards{

    gap:15px;

}

.card{

    width:140px;

}

.menu-btn{

    padding:8px 20px;

}

}


/* CELULAR GRANDE */

@media (max-width:600px){

.menu{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

}

.menu-btn{

    width:80%;

}

.cards{

    gap:15px;

}

.card{

    width:180px;

}

.texto{

    font-size:15px;

}

/* 🔽 OCULTAR SCROLL MOBILE (VERSÃO FORTE) */

html, body{
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
    display: none;
}

}


/* CELULAR PEQUENO */

@media (max-width:400px){

.banner{

    margin-top:15px;

}

.marquee{

    font-size:16px;

}

.cards{

    flex-direction:column;
    align-items:center;

}

.card{

    width:200px;

}

.texto{

    padding:15px;

}

footer{

    font-size:12px;

}

}



/* SCROLL PERSONALIZADO (DESKTOP) */


::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb{
    background:#c09ff5;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#a855f7;
}