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

:root {
    font-size: 62.5%;
    --ff-body: 'Roboto', sans-serif;
    
    --fc-body:rgb(180, 179, 179);
    
    --bg-color: #222222;
}

body {
    font-size: 1.6rem;
    background-color: var(--bg-color);
    font-family: var(--ff-body);
    color: var(--fc-body);
    overflow-x: hidden;
}


/*main::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 65.0rem;
    top: -100px;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: -1;
    background-image:url(../img/img06.jpg);
    object-fit: cover;
    filter: brightness(.4);
}*/

main {
    margin: 7.7rem auto 0;
    max-width: 120rem;
    /* border: 1px solid red;*/
    padding: 1rem;
}
header {
    position:fixed;
    width: 100vw;
    content: '';
    top: 0;
    left: 0;
    z-index: 3;
    background-color: hsla(0, 0%, 5%, 0.486);
    animation: top-to-down 1000ms 200ms cubic-bezier(0.075, 0.82, 0.165, 1) backwards;
}

#navbar {
    transition: top 1s;
}

nav {
    /*border: 1px solid red;*/
    margin: 0 auto;
    max-width: 100rem;
    backdrop-filter: blur(1px);
    
}

ul{
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    font-size: 2.2rem;
    font-weight: 400;
}


ul img {
    margin-right: 40rem;
    max-width: 100%;
    display: flex;
    padding-left: 1.0rem;
    transition:  2s all;
}

ul img:hover {
    animation: glitch 2s infinite;
}

a {
    text-decoration: none;
    color: var(--fc-body);
}

ul li a {
    transition: font-weight 200ms, background-color 500ms;
    font-size: 1.6rem;
    padding: 2.2rem 2.2rem ;
}

ul li a:hover {
    font-weight: bold;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}



.sub-tittle .logo .img {
    box-shadow: none;

}


.logo-navbar{
    max-width: 100rem;
    max-height: 100%;
}

.tittle-image-background img{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100vw;
    max-height: 52rem;
    object-fit: cover;
    filter: brightness(.3) opacity(80%);
    box-shadow: 0 2rem 2rem -1rem rgba(0, 0, 0, 0.199);
}
main::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 52rem;
    background: url(../img/img06.avif) no-repeat ;
    background-repeat:no-repeat;
    background-size: cover;
    object-fit: cover;
    filter: brightness(.5) opacity(80%);
    box-shadow: 0 2rem 2rem -1rem rgba(0, 0, 0, 0.199);
    animation: top-down-background 1500ms 250ms cubic-bezier(0.075, 0.82, 0.165, 1) backwards;
}

@keyframes top-down-background {
    0% {
        transform: translateY(-800px);
    }
    100% {
        transform: translateY(0);
    }
}

.home-content{
    max-width: 60rem;
    align-items: center;
    text-align: center;
   
    
}

@keyframes opacity {
    0%{
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.home-content {
    margin: 0 auto;
}

.container-tittle {
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
    margin: 4.5rem auto;
    max-width: 60.0rem;
    max-height: 30.0rem;
   /* border: 1px solid red;*/
   color: rgb(255, 255, 255);
   animation: opacity 500ms 300ms backwards, top-to-down 500ms 300ms backwards;
}

.container-tittle h1 {
    font-size: 4.8rem;
    font-weight: bold;
    
    
}

.glitch {
    animation: glitch 2s ease-in-out infinite ;
}

button:hover{
    animation: glitch 2s ease-in-out infinite ;
    filter: brightness(200%);
}

@keyframes glitch {
    0%{
        filter: drop-shadow(0 0 0 #ff0000) drop-shadow(0 0 0 #00e1ff);
        transform: scale(1.1);
    }
    5%{
        filter: drop-shadow(8px 5px 0 #ff0000) drop-shadow(-8px -5px 0 #00e1ff);
        transform: scale(1.3s);
    }
    40%{
        filter: drop-shadow(-3px -1px 0 #ff0000) drop-shadow(3px 1px 0 #00e1ff);
        transform: scale(1.1s);
    }
    45%{
        filter: drop-shadow(3px 1px 0 #ff0000) drop-shadow(-2px -1px 0 #00e1ff);
        transform: scale(1.3s);
    }
    55%{
        filter: drop-shadow(-3px -1px 0 #ff0000) drop-shadow(3px 1px 0 #00e1ff);
        transform: scale(1.1s);
        
    }
    65%{
        filter: drop-shadow(3px 1px 0 #ff0000) drop-shadow(-2px -1px 0 #00e1ff);
        transform: scale(1.3s);
    }
    70%{
        filter: drop-shadow(-8px 5px 0 #ff0000) drop-shadow(8px -5px 0 #00e1ff);
        transform: scale(1.1s);
    }
    80%{
        filter: drop-shadow(3px 1px 0 #ff0000) drop-shadow(-2px -1px 0 #00e1ff);
        transform: scale(1.3s);
    }
    85%{
        filter: drop-shadow(-3px -1px 0 #ff0000) drop-shadow(3px 1px 0 #00e1ff);
        transform: scale(1.1s);
    }
    95%{
        filter: drop-shadow(3px 1px 0 #ff0000) drop-shadow(-2px -1px 0 #00e1ff);
        transform: scale(1.3s);
    }
    100% {
        filter: drop-shadow(-3px -1px 0 #ff0000) drop-shadow(3px 1px 0 #00e1ff);
    }
}

.container-tittle p {
    font-family: var(--ff-body);
    font-size: 1.8rem;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.644);
    filter: drop-shadow(2px 1px 1px #1a1a1a);
}


.container-tittle button {
    background: none;
    padding: 2.0rem 4.0rem;
    margin: 1.0rem auto;
    border: 1px white solid;
    border-radius: 4px;
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    transition: transform 1s, background-color 1s ;
    cursor: pointer;
    backdrop-filter: blur(100px);
}

.container-tittle button:hover{
    transform: scale(1.1);
    background-color: white;
    color: black;
}

.section-main-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: start;
    margin: 0 auto;
    gap: 2.0rem;
}



.section-main-content p{
    font-size: 1rem ;
}

.card {
    display: flex;
    max-width: 100rem;
    align-items: center;
    gap: 3.5rem;
}

.card h2 {
    font-size: 2.0rem;
    margin-bottom: 2.5rem;
}

.card p {
    min-height: 10rem;
    font-size: 1.4rem;
    line-height: 160%;
    max-width: 70rem;
}

.card h2::before{
    display: flex;
    content: '';
    transform: translateY(-5px);
    width: 5.0rem;
    margin-bottom: 5px;
    filter: opacity(.3);
    border-top: 3px solid rgb(255, 255, 255);
    border-radius: 5px;
}

.card img {
    width: 50%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1), filter 1s, box-shadow 500ms;
    cursor: pointer;
    box-shadow: 0 1rem 1rem -1rem rgb(0, 0, 0);
    
}

.card img:hover{
    transform: scale(1.1);
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.233);
    
    
}

.card:nth-child(1){
    animation: left-to-right-cards 1s  700ms backwards;
}
.card:nth-child(2){
    animation: right-to-left-cards 1400ms  900ms backwards;
}
.card:nth-child(3){
    animation: left-to-right-cards 1800ms  1100ms backwards;
}
.card:nth-child(4){
    animation: right-to-left-cards 2000ms  1300ms backwards;
}

@keyframes left-to-right-cards {
    0% {
        opacity: 0;
        transform: translateX(-500px);
    }
    100% {
        opacity: 100;
        transform: translateX(0);
    }
}
@keyframes right-to-left-cards {
    0% {
        opacity: 0;
        transform: translateX(500px);
    }
    100% {
        opacity: 100;
        transform: translateX(0);
    }
}

.section-main-content .container-content {
    font-size: 10rem;
    text-align: start;
}

.sub-tittle img {
    width: 15rem;
    height: auto;
    margin: 3rem;
    border-radius: 5px;
    filter: opacity(100%);
    
}


.sub-tittle {
    margin: 10rem auto 7rem;
    max-width: 100rem;
    text-align: center;
    animation: bottom-to-top 1s 300ms backwards;
}

@keyframes bottom-to-top {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 100;
        transform: translateY(0);
    }
}

.sub-tittle h2 {
    font-size: 2rem;
    margin: 0px auto 20px;
}

.sub-tittle p {
    font-size: 1.8rem;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.0rem;
    max-width: 60rem;
    max-height: 900%;
    margin: 0 auto;
   
}

@keyframes identifier {
    
}

p {
    color: rgb(129, 129, 129);
}

.subtittle p br{
    display: flex;
    
}
/* text carousel */
.carousel {
    margin: 10rem auto 0;
}

.carousel h1 {
    text-align: center;
}

.content-slider {
    width: 100%;
    height: 36rem;  
    
}

.carousel h1:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 1;
    bottom: 1;
    left: 0;
    height: 25rem;
    padding-top: 1rem;
    transform: translateY(-10px);
    z-index: -1;
    background-color: rgb(26, 26, 26);
    box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.753);
    
    
    
    
    
}

.slider {
    height: 32rem;
    width: 68rem;
    margin: 4rem auto 0;
    overflow: visible;
    position: relative;
    
}

.mask {
    overflow: hidden;
    height: 32rem;
}

.slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

.slider li {
    width: 68rem;
    height: 32rem;
    position: absolute;
    top: -32.5rem;
    list-style: none;
}

.slider .quote {
    font-size: 2.0rem;
}

.slider .source {
    font-size: 2.0rem;
    text-align: right;
}

.slider li.anim1 {
    animation: cycle 15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite ;
}

.slider li.anim2 {
    animation: cycle2 15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite ;
}

.slider li.anim3 {
    animation: cycle3 15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 
}

.slider li.anim4 {
    animation: cycle4 15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite ;
}

.slider li.anim5 {
    animation: cycle5 15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite ;
}

.slider:hover li {
    animation-play-state: paused;
}

.footer{
    position: absolute;
    display: flex;
    bottom: 1;
    flex-direction: column;
    width: 100vw;
    background:#000;
    padding:3.0rem 0;
    font-family: 'Play', sans-serif;
    text-align:center;
}

    .footer .row{
        width:100%;
        margin:1% 0%;
        padding:0.6% 0%;
        color:gray;
        font-size:0.8em;
    }
    
    .footer .row a{
        text-decoration:none;
        color:gray;
        transition:0.5s;
    }
    
    .footer .row a:hover{
        color:#fff;
    }
    
    .footer .row ul{
        width:100%;
    }
    
    .footer .row ul li{
        display:inline-block;
        margin:0px 3rem;
    }
    
    .footer .row a i{
        font-size:2em;
        margin:0% 1%;
    }
    
   
    
    .footer a:hover {
        background: none;
    }
    
    .footer ul {
        padding: 0;
    }
    
    @keyframes cycle {
        0% {
            top: 0px;
        }
        4% {
            top: 0px;
        }
        16% {
      top: 0px;
      opacity: 1;
      z-index: 0;
    }
    20% {
        top: 180px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
    50% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -180px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -180px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

  @keyframes cycle2 {
      0% {
          top: -180px;
          opacity: 0;
        }
        16% {
            top: -180px;
            opacity: 0;
        }
        20% {
            top: 0px;
            opacity: 1;
        }
        24% {
            top: 0px;
            opacity: 1;
        }
        36% {
            top: 0px;
            opacity: 1;
            z-index: 0;
        }
        40% {
            top: 180px;
            opacity: 0;
            z-index: 0;
        }
        41% {
      top: -180px;
      opacity: 0;
      z-index: -1;
    }
    100% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle3 {
    0% {
        top: -180px;
        opacity: 0;
    }
    36% {
        top: -180px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    60% {
        top: 180px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle4 {
    0% {
        top: -180px;
        opacity: 0;
    }
    56% {
        top: -180px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
      top: 0px;
      opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 180px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -180px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle5 {
    0% {
        top: -180px;
        opacity: 0;
    }
    76% {
        top: -180px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 180px;
        opacity: 0;
        z-index: 0;
    }
    
  }@media (max-width:900px) {
        .slider {
            max-width: 300px;
            font-size: 1.6px;
        }
        .slider li{
            max-width: 30rem;
        }
        .slider .quote{
            font-size: 1.4rem;
        }
        .card {
            display: flex;
            flex-direction: column;
            text-align: center;
            margin: 0 auto;
        }
        .secondRow{
            display: flex;
            flex-direction: column-reverse;
        }
        
        .forthRow{
            display: flex;
            flex-direction: column-reverse;
        }
        .section-main-content img{
            width: 90%;
            height: 100%;
        }
        .home-content {
            max-width: 50rem;
        }
        nav ul li {
            display: flex;
        }
        ul img {
            margin-right: 0;

        }
  }
  @media (max-width:720px){
    .footer{
        text-align:left;
        padding:5%;
        gap: 0;
    }
    .footer ul {
        display: flex;
        gap: 0;
        font-size: 1rem;
    }
    .footer .row ul li{
        display:block;
        margin:1rem 0px;
        text-align:left;
        gap: 0;
        font-size: 1rem;
    }
    .footer ul a {
        font-size: 1.2rem;
    }

    .footer .row a i{
        margin:0% 3%;
    }
    .footer .row p {
        text-align: center;
        font-size: 1rem;
    }
    .foooter {
        padding: 0;
    }
    .card h2::before{
        margin: 0 auto;
        transform: translateY(-10px);
        width: 40%;
        filter: opacity(.3);
    }
}

@media (max-width: 500px){
    main{
        padding: 15px;
    }
   nav ul img{
        display: none;
    }
    header{
        background: #03030388;
    }
    .footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        gap: 0;
        margin-bottom: 4rem;
    }
    .footer ul a {
        font-size: 1.4rem;
        
    }
    .footer .row p {
        font-size: 1.2rem;
    }
    .container-tittle {
        gap: 24px;
    }
    .container-tittle p {
        font-size: 1.4rem;
       
        text-align: center;
        margin: 0 auto;
    }
    .card img {
    width: 100%;    
    }
    main::before{
    width: 100%;
    height: 52rem;
    }
    .container-tittle h1{
        font-size: 3.5rem;
    }
    
}

/* Página download */
.container-tittle-download {
   text-align: center;
   max-width: 80rem;
   margin: 10rem auto ;
   
   
}
.container-tittle-download h1{
    margin: 0 auto 2rem;
}
.ranks{
    display: flex;
    max-width: 80rem;
    align-items: center;
    align-content: center;
    text-align: center;
    gap: 3rem;
    margin: 0 auto;
    background: rgba(44, 44, 44, 0.747);
    padding: 3rem;
    border-radius: .6rem;
    box-shadow: 0 3rem 2rem -1rem rgba(0, 0, 0, 0.438);
}
.ranks img{ 
    display: flex;
    padding: 10px;
    border-radius: .6rem;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 9rem;
    height: auto;
    box-shadow: 0 2rem 2rem -1rem rgba(0, 0, 0, 0.445);
    transition: animation cubic-bezier(0.075, 0.82, 0.165, 1);
    
}
.ranks img:hover{
    animation: glitch 1s infinite;
}

.ranks a {
    display: flex;
     align-items: center;
    align-content: center;
    text-align: center;
}

.ranks a:nth-child(1) {
    transform: scale(95%);
}
.ranks a:nth-child(3) {
    transform: scale(115%);
}
.ranks a:nth-child(4) {
    transform: scale(120%);
}

.h1-download{
filter:  drop-shadow(0px -4px 0 #000000) ;
}
.sub-tittle-download img{
    width: 9rem;
    height: auto;
    box-shadow: none;
    filter:  drop-shadow(0px 3px 1px #00000010) ;
    align-items: flex-start;
}




.division {
    margin-bottom: 6rem;
}
.beneficio-list {
    max-width: 700px;
    height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   font-size: 1.2rem;
   align-items: flex-start;
   margin: 0 auto 4rem;
   text-align: left;
   background: rgb(44, 44, 44);
   padding: 3rem;
   border-radius: 1.5rem;
   box-shadow: 0 2rem 1rem -1rem rgb(0 0 0 / 47%);
   border-top: 2rem rgba(255, 255, 255, 0.068) solid;
}

.beneficio-list span {
    font-size: 1.2rem;
    color: rgb(172, 0, 0);
}

.beneficio-list .span-2{
    color: rgb(140, 197, 55);
    font-size: 1.2rem;
}


.beneficio-list {
   transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1), border-top 500ms cubic-bezier(0.075, 0.82, 0.165, 1), filter 1950ms cubic-bezier(0.075, 0.82, 0.165, 1);
   cursor: pointer;
}

.beneficio-list:hover {
    transform: scale(1.1);
    filter: brightness(130%) ;
}
.beneficio-list img {
    margin: 0 auto;
    padding: 10px;
}

.button-apoio {
    margin: 1rem auto 3rem;
    background: none;
    width: 70%;
    height: auto;
    padding: 10px;
    border: 1px white solid;
    border-radius: 6px;
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    transition: transform 1s, background-color 1s  ;
    cursor: pointer;
    backdrop-filter: blur(100px);
    justify-content: center;
    text-align: center;
}

.button-apoio:hover{
    background: #d3d3d3;
    border: none;
    color: black;
}

@media (max-width:500px) {
    .beneficio-list {
        max-width: 350px;
       display: flex;
       flex-direction: column;
       font-size: 1.2rem;
       align-items: flex-start;
       margin: 0 auto 3rem;
       height: 500px;
    }
    .ranks{
        gap: 1rem;
    }
    .ranks a:nth-child(1){
        display: none;
    }
    .container-tittle-download{
        max-width: 40rem;
    }
    .sub-tittle-download{
        padding: 0 .5rem;
    }
}

@media (max-width:400px) {
    .ranks a:nth-child(2){
        display: none;
    }
    nav ul a{
        font-size: 12px;
    }
}
@media (max-width:200px) {
    .ranks a:nth-child(3){
        display: none;
    }
}

/* requirements page */

.requirements{
    max-width: 15rem;
    margin-bottom: 10px;
}

.requirements img{
    color: white;
    background: none;
    border-top: .3rem rgba(255, 255, 255, 0.068) solid;
}

.requirements img:hover {
    cursor: pointer;
}

.container-tittle-requirment{
    margin: 5rem auto;
}
.quirements-information{
    background: rgb(44, 44, 44);
    padding: 3rem;
    border-radius: 6px;
    margin: 0 auto;
    border-radius: .6rem;
    box-shadow: 0 2rem 1rem -1rem rgb(0 0 0 / 47%);
    border-top: 2rem rgba(255, 255, 255, 0.068) solid;
}


@media (min-width: 1001px) {
    .rankstyle {

        max-width: 1000px;
        display: grid;
        grid-template-columns: 25rem 25rem 25rem 25rem;
        grid-row: 2/1;
        gap: 30px;
        margin: 0 auto;
         justify-content: center;
         align-items: stretch;
     
     }
     
     .last-grid{
         margin: 0 auto;
     }
}

@media (min-width:851px) {
        .quirements-information{
         display: flex;
         justify-content:center;
         gap: 2rem;
         text-align: left;
         margin: 0 15rem ;
         padding: 3rem 2rem;
        max-width: 100rem;
        }
        
    }



@media (max-width:850px){
    .quirements-information{
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        max-width: 600px;
    }
}

@media (max-width:350px) {
    .sub-tittle-requirements p {
        font-size: 1.2rem;
    }
}

/* Wiki page*/
.button-manual {
    margin: 5rem auto;
    background: none;
    max-width: 25rem;
    height: auto;
    padding: 10px;
    border: 1px white solid;
    border-radius: 4px;
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    transition: transform 1s, background-color 1s  ;
    cursor: pointer;
    backdrop-filter: blur(100px);
}
.button-manual a{
    align-items: center;
    align-content: center;
    text-align: center;
    margin: 0 auto;
}

.button-manual:hover{
    transform: scale(1.1);
    background-color: white;
    color: black;
    animation: glitch 1s infinite;
}
.button-manual:hover, a:hover{
    color: black;
}

.sub-tittle .manual-h2 {
    margin: 0 auto;
}

.manual-pages{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}
.manual-pages img:nth-child(1){
   animation: left-to-right-cards 1s 600ms backwards;
}
.manual-pages img:nth-child(2){
   animation: left-to-right-cards 1100ms 800ms backwards;
}
.manual-pages img:nth-child(3){
   animation: left-to-right-cards 1200ms 1000ms backwards;
}
.manual-pages img:nth-child(4){
   animation: left-to-right-cards 1300ms 1200ms backwards;
}
.manual-pages img:nth-child(5){
   animation: left-to-right-cards 1400ms 1400ms backwards;
}
.manual-pages img:nth-child(6){
   animation: left-to-right-cards 1500ms 1600ms backwards;
}
.manual-pages img:nth-child(7){
   animation: left-to-right-cards 1600ms 1800ms backwards;
}
.manual-pages img:nth-child(8){
   animation: left-to-right-cards 1700ms 2000ms backwards;
}
.manual-pages img:nth-child(9){
   animation: left-to-right-cards 1700ms 2200ms backwards;
}
.manual-pages img:nth-child(10){
   animation: left-to-right-cards 1800ms 2400ms backwards;
}
.manual-pages img:nth-child(11){
   animation: left-to-right-cards 1100ms 2600ms backwards;
}

.manual-pages img{
    margin: 0 auto;
    width: 800px;
    border-radius: 6px;
    filter:  drop-shadow(0px 1px 2px #ffffffa8)
}

.copyright-inversus{
    margin: 0 auto;
    text-align: center;
    filter: opacity(.5);
    margin-bottom: 3rem;
   
}

@media (max-width: 850px) {
    .manual-pages img {
        max-width: 50rem;
    }
}

@media (max-width: 550px) {
    .manual-pages img {
        max-width: 35rem;
    }
}
@media (max-width: 351px) {
    .manual-pages img {
        max-width: 29rem;
    }
}
@media (max-width: 291px) {
    .manual-pages img {
        max-width: 24rem;
    }
}


/* Button exception design*/

.button-substituto-menu{
    border: 1px solid white;
    padding: 2.0rem 5.0rem;
    color: white;
    margin: 0 auto;
    border-radius: 6px;
    font-size: 1.6rem;
    transition: transform 1s, animation 1s, background 500ms ;
    backdrop-filter: blur(1px);
}
.button-substituto-menu{
    font-size: 1.8rem;
    margin-top: 1.5rem;
}

.button-substituto-menu:hover{
    background-color: white;
    animation: glitch 2s infinite;
}

/* animações de entrada*/
@keyframes top-to-down {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: 0;
    }
}