:root{
    --font-menu-hover:#ffffff60;
    --font: #fff;
    --fundo: #252525;
    --menu-fundo:#ffffff60;
    --fundo-menu-scroll-:rgba(0,0,0,0.6);
}

body{
    margin: 0;
    font-family:'Segoe UI', sans-serif;
    background-color: var(--fundo);
    color: var(--font);
}

.pag{
    display: block;
}


.cabecalho{
    top: 0px ;
    width: 100%;
    position: sticky;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    z-index: 1000;
    background-color: #ffffff10;
    transition: background .3s;
}

.cabecalho.down-scroll{
    background-color: var(--fundo-menu-scroll-);
}

.menu-nav{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 85%;
    z-index: 2;
}

.menu-nav .btn-home{
    position: relative;
    top: 17%;
    cursor: pointer;
}

.menu-nav .btn-open-menu-recursive{
    display: none;
    font-size: 2rem;
    border: 2px solid red;
    padding: .4rem;
    border-radius: .3rem;
    transition: background .3s ease-out, box-shadow .3s ease-out, transform .5s ease-in-out;
    cursor: pointer;
}

.menu-nav ul{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    gap: 1.9rem;
    padding: 0 .5rem;
}

.menu-nav ul li , a{
    color: var(--font);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: .3rem .5rem;
}

.menu-nav ul li:last-child a{
    outline-offset: 2px;
    padding: 0.3rem 1rem;
    overflow: hidden;
}

.menu-nav ul li:last-child{
    display: block;
    border: 2px solid red;
    border-radius: 100px;
    outline-offset: 2px;
    overflow: hidden;
    box-sizing: border-box;
    transition: background .3s ease-out, box-shadow .3s ease-out;
}

.menu-nav ul li:last-child:hover, .menu-nav .btn-open-menu-recursive:hover{
    background: red;
    box-shadow: 0 0 8px #f80000;
}

.menu-nav img{
    width: 100px;
    height: 100px;
}

.div-list-menu{
    display: none;
}

.section-central{
    position:relative;
    display: flex;
    width: 100%;
    height: calc(85vh);
    justify-content: center;
    align-items:center;
}

.section-central .slide-initial{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 70%;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    background-color: #f8000030;
    z-index: 1;
    overflow: hidden;
    box-shadow: 10px 10px 20px #00000060;
    transition: widht .3s, height .3s;
}

.section-central .slide-initial img{
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    filter:blur(10px) saturate(1.9) brightness(80%);
}

.section-central .slide-initial h1{
    font-size: 3.5rem;
    -webkit-text-stroke: 3px #000;
    transition: all ease-out .3s;
}

.section-central .slide-initial h1:hover{
    scale: 110%;
}

.section-central .slide-initial p{
    margin-top: 0;
    font-size: 2rem;
    color: #fff;
    font-weight: 600;
    width: 70%;
    text-align: center;
    word-wrap: break-word;
}
/*ANIMES CATALOGO*/

/* catalogo central */
.catalog-section{
    width: 100%;
    min-height: 100vh;
    box-shadow: inset 0 15px 15px -5px #252525,
                inset 0 -15px 15px #252525;
    background-color: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.catalog-section .title-catalog-section{
    margin: 0;
    padding: 1.2rem 0;
    font-size: 3vw;
}

.catalog-section .title-catalog-section span{
    color: #f80000;
}

/* catalogo das cards dentro da section central */
.catalog-section .catalog-div{
    width: 85%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, 215px);
    grid-template-rows: repeat(auto-fill, 280px);
    gap: 1.5rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-bottom: 2rem;
    justify-items: center;
    justify-content: center;
}
/* card dos animes */
.catalog-section .catalog-div .mini-card{
    width: 215px;
    height: 280px;
    background: gray;
    border-radius: .3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    cursor: pointer;
    box-shadow: 2px 2px 8px #252525;
    margin: 0;
}

.catalog-section .catalog-div .mini-card:hover{
    box-shadow: 2px 2px 8px #ffffff70;
    transform:scale(1.05);
    transition: .4s;
}

/* imagem da card */
.catalog-section .catalog-div .mini-card img{
    position: absolute;
    width: 215px;
    height: 280px;
    z-index: 0;
    border-radius: .3rem;
}
/* descrição das cards */
.mini-card .description-card{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: #25252590;
    transform: translateY(215px);
    position: relative;
    overflow: hidden;
}

.mini-card .description-card h5{
    margin: 0;
    padding: 1.3rem .3rem 1.3rem .3rem;
    max-height: 60px;
    text-align: center;
    z-index: 2;
    font-size: .85rem;
    word-wrap: break-word;
    text-overflow: ellipsis;
    white-space:pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mini-card .description-card .description-text{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: -webkit-box; /*display para deixar o conteúdo com ellipsis em várias linhas*/
    z-index: 2;
    font-size: .85rem;
    text-align: justify;
    max-height: 100%;
    width: 80%;
    white-space:pre-wrap;
    overflow: hidden;
    -webkit-line-clamp: 9; /* informa a quantidade de linhas que você deseja antes da ellipsis*/
    -webkit-box-orient: vertical; /*informa a direção que você deseja que aconteça a ellipse*/
}

.catalog-section .catalog-div .mini-card:hover .description-card {
    transform: translateY(0px);
    transition: .5s;
}

.catalog-section .catalog-div .mini-card:hover .description-text{
    display: block;
    display: -webkit-box;
    transition: .5s;
    word-wrap: break-word;
}

/* scroll bar edit */
::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}

::-webkit-scrollbar-thumb{
    background: grey;
}

/* footer */

.end-page{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.2rem;
}

.end-page .socials, .socials a{
    box-sizing: border-box;
    font-size: 1.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 10rem;
}

.end-page .socials i{
    transition: 0.4s;
    cursor: pointer;
}

.end-page .socials i:hover{
    transform: scale(1.5);
}

/* PÁGINA DE LOGIN */

.section-login{
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    background-color: #00000090;
    backdrop-filter: blur(10px);
}

.section-login:target{
    display: flex;
    -webkit-animation-name:backview-login;
    -webkit-animation-duration: .5s;

}

@-webkit-keyframes backview-login{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.section-login .login-page{
    padding: 1rem;
    width: 30rem;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF30;
    border-radius: 1rem;
    text-align: center;
    backdrop-filter: blur(5px);
    box-shadow: 8px 8px 15px #00000060;
}

.login-page h2{
    font-size: 2rem;
    padding: 0;
    margin: 0.5rem 0.1rem 1rem 0.1rem;
}

.login-page .btn-close{
    padding: 0 1rem 0.5rem 1rem;
    right: 0;
    top: 0;
    position: absolute;
    font-size: 2rem;
    transition: transform .3s, color .2s;
    font-weight: 700;
}

.login-page .btn-close:hover{
    color: #f80000;
}

.input-direction, .input-direction div{
    text-align: left;
    display: flex;
    flex-direction: column;
}

.input-direction div label{
    font-size: 1.1rem;
    position: absolute;
    padding: .6rem 0.8rem;
    color: #FFFFFF80;
    letter-spacing: 0.05rem;
    pointer-events: none;
    transition: .3s;
}

.login-page input, .input-direction input, .login-page a{
    border-radius: 0.3rem;
}

.login-page .input-direction input{
    background-color: transparent;
    border: 2px solid #FFFFFF80;
    padding: 0.5rem 0.8rem;
}

.input-direction div input:focus + label,
.input-direction div input:valid + label,
.input-direction div input:not(:placeholder-shown) + label{ /*permite que a label volte somente se o placeholder estiver por lá, caso ele não esteja, ela vai ficar no posicionamento do focus*/
    color: black;
    background: #FFFFFF;
    font-size: .8rem;
    transform: translateX(.7rem) translateY(-0.7rem);
    border-radius: .2rem;
    padding: 0.1rem 0.5rem;
}

.input-direction input:focus{
    border: 2px solid white;
    transition: .3s;
}

/* .login-page input:not([type=submit]){
    background: black;
    a utilização do not é pra definir neste caso que "todos os inputs menos o not(que eu desejar) vão receber essa alteração "
} */

.input-direction div{
    margin-bottom: .8rem;
}

.login-page input[type=submit]{
    background-color: #f80000;
    font-weight: 600;
    color: white;
    border: 2px solid #f80000;
    outline-offset: 2px;
    outline: 2px solid transparent;
}
.login-page input[type=submit]:hover, .login-page input[type=submit]::selection {
    transition: .3s;
    cursor: pointer;
    outline: 2px solid whitesmoke;
}

.login-page input, .register-link{
    padding: 0.5rem 0rem;
    font-size: 1.2rem;
    outline: none;
    margin-bottom: .3rem;
    color: white;
}

.register-link{
    border: 2px solid transparent;
    background-color: #363636;
}

.register-link:hover{
    border: 2px solid white;
    transition: .3s;
    background-color: #5f5f5f34;
}

.access-others{
    margin: 1.3rem 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.access-others a{
    text-align: center;
    box-sizing: border-box;
    font-size: 1.1rem;
    border-radius: 2rem;
    background-color: #FFFFFF20;
    padding: .8rem .6rem .8rem .6rem;
    color: #fff;
    border: 2px solid transparent;
    transition: .3s;
}

.access-others a:hover{
    border: 2px solid white;
}

.access-others i{
    position: relative;
    font-size: 1.7rem;
    box-sizing:border-box;
    top: 0.1rem;
}

.access-others .btn-others{
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content:space-around;
    align-items: center;
    column-gap: .5rem;
}

.access-others{
    margin-top: 1rem;
}

.access-others .icon-f{
    background: -webkit-linear-gradient(137deg, rgba(9,51,121,1) 35%, rgba(0,212,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color:  #FFF;
    font-weight: 900;
}

.access-others .icon-g{
    background: -webkit-linear-gradient(310deg, rgba(180,58,58,1) 25%, rgba(250,151,0,1) 50%, rgba(2,115,19,1) 75% ,rgba(0,212,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

/* PÁGINA DE REGISTRO  */

.s-register{
    display: none;
}

.register-page .input-direction div:last-child{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items:center;
}

.register-page .input-direction div p:last-child{
    margin: 0;
    padding: 0;
}

.register-page .input-direction input[type=checkbox]{
    display: block;
    width: 1.2rem;
    height: 1.1rem;
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 0;
    margin: 0 .5rem 0 0;
}

.s-register .register-others{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .1rem;
}

.s-register .register-others a{
    font-size: 1.05rem;
}
.register-others .btn-others{
    column-gap: .5rem;
}

.s-register .return-login{
    margin-top: .3rem;
    font-size: 1.1rem;
    transition: color .3s;
}

.s-register .return-login:hover{
    color: #f80000;
    text-decoration:underline;
}

.s-register div [type=checkbox]{
    accent-color: #f80000;
}

/* ARTS.HTML PART */

.main-arts{
    width: 100%;
    margin-bottom: 2rem;
}

.main-arts h1{
    font-size: 3vw;
    text-align: center;
}

.main-arts h1 span{
    color: #f80000;
}


.section-arts{
    display: flex;
    justify-content: center;
}

.div-arts{
    display: flex;
    gap: .4rem;
    flex-flow: row wrap;
    width: 85%;
    justify-content:center;
}

.div-arts a{
    display: flex;
    justify-content: center;
    max-width: 310px;
    height: 220px;
    overflow: hidden;
    border-radius: .5rem;
    border: 2px solid #363636;
    padding: 0;
    margin: 0;
    transition: transform .3s;
}

.div-arts a:hover{
    transform: scale(1.03);
}

/* RESPONSIVIDADE */

@media only screen and (max-width: 1024px){

    /* RESPONSIVIDADE LIGADA AO MENU */

    .menu-nav ul{
        display: none;
    }
    .menu-nav .btn-open-menu-recursive{
        display: block;
    }

    .div-list-menu{
        display: flex;
        position: fixed;
        width: 30%;
        background-color: #363636;
        right: 0;
        height: 100vh;
        backdrop-filter: blur(10px);
        transform: translateX(100%);
        transition: transform .5s;
        z-index: 10;
    }
    
    .div-list-menu ul{
        width: 100%;
        flex-direction: column;
        list-style-type: none;
        padding-inline-start: 0;
        box-sizing: border-box;
        margin-top: 4rem;
    }
    
    .div-list-menu ul li{
        height: 4rem;
        width: 100%;
        /* box-sizing: border-box; */
        transition: background .3s;
        display: flex;
    }
    
    .div-list-menu ul li:last-child:hover{
        background-color: #f80000;
    }
    
    .div-list-menu ul li a{
        text-align: center;
        width: 100%;
        padding: 1rem 0 3rem 0;
    }
    
    .div-list-menu .btn-close-menu-recursive{
        position: absolute;
        font-size: 1.5rem;
        text-align: center;
        right: .5rem;
        top: .5rem;
        cursor: pointer;
        transition: .3s;
        font-weight: 700;
    }

    .div-list-menu .btn-close-menu-recursive:hover{
        color: #f80000;
    }

    /* RESPONSIVIDADE LIGADA AO SLIDE CENTRAL */

    .section-central .slide-initial{
        width: 70%;
        height: 60%;
    }

    .section-central .slide-initial h1{
        font-size: 3rem;
        transition: all ease-out .3s;
}   
    .section-central .slide-initial p{
        font-size: 2rem;
    }

    .section-central .slide-initial h1{
        font-size: 2.6rem;
        transition: all ease-out .3s;
}   
    .section-central .slide-initial p{
        margin-top: 0;
        font-size: 1.5rem;
        color: #fff;
        font-weight: 600;
        width: 70%;
        text-align: center;
        word-wrap: break-word;
    }

    /* RESPONSIVIDADE LIGADA A PÁGINA DE ARTES */

    .div-arts a{
        max-width: 240px;
        height: 160px;
    }
}

@media only screen and (max-width: 768px){
    .div-list-menu{
        width: 100%;
    }

    .section-central .slide-initial{
        width: 85%;
        height: 60%;
    }

    .section-central .slide-initial h1{
        font-size: 2.2rem;
        -webkit-text-stroke: 2px #000;
}   
    .section-central .slide-initial p{
        font-size: 1.2rem;
    }

    /* CATALOGO DE ANIMES */
    
    .catalog-section .title-catalog-section{
        font-size: 6vw;
        padding: 1.5rem 0;
    }

    /* alteração ligada ao H1 da pagina de artes */
    
    .main-arts h1{
        font-size: 6vw;
    }

    .catalog-section .catalog-div{
        grid-template-columns: repeat(auto-fill, 170px);
        grid-template-rows: repeat(auto-fill, 200px);
        gap: 1rem;
    }
    /* card dos animes */
    .catalog-section .catalog-div .mini-card{
        width: 170px;
        height: 200px;
    }

    .catalog-section .catalog-div .mini-card img{
        width: 170px;
        height: 200px;
    }

    .mini-card .description-card{
        transform: translateY(130px);
    }
}

@media only screen and (max-width: 500px){
    .section-central .slide-initial{
        width: 85%;
        height: 45%;
    }

    .section-central .slide-initial h1{
        font-size: 1.8rem;
        -webkit-text-stroke: 1px #000;

}   
    .section-central .slide-initial p{
        font-size: 1.2rem;
        width: 70%;
    }

/* RESPONSIVIDADE LIGADA AO LOGIN */

.section-login .login-page{
    width: 85%;
}

.login-page h2{
    font-size: 1.7rem;
}

.login-page input, .input-direction input, .login-page a{
    font-size: 1rem;
}

.login-page .input-direction input{
    background-color: transparent;
    border: 2px solid #FFFFFF80;
    padding: 0.5rem 0.8rem;
}

.input-direction div label{
    font-size: 1rem;
    position: absolute;
    padding: .5rem 0.8rem;
}

/* LIGADA AO REGISTRO */

.s-register .register-others a{
    font-size: 1rem;
}

.s-register .return-login{
    font-size: 1rem;
}

/* RESPONSIVIDADE LIGADA A PÁGINA DE ARTES */

    .div-arts{
        gap: .3rem;
        width: 90%;
    }

    .div-arts a{
        max-width: 150px;
        height: 160px;
    }
}