@media screen and (min-width:381px) and (max-width: 1023px) {
    .peinai span {
        top: 110%;
    }

    .pema h1 {
        font-size: 30px;
    }

    .conta li a:hover {
        border-bottom: 3px solid #F77E0C;
    }

    .conta a {
        font-size: 40px;
        border-bottom: 3px solid #F77E0C;
    }

    .conta h1 {
        font-size: 110px;
    }

    .con2 {
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .container.active .navItem li:hover a span {
        transform: translateX(0px);
        transition: .2s ease;
        color: #F77E0C;
    }

    .container.active .navItem li:hover a i {
        transition: .25s ease;
        color: #000;
    }

    .container.active .navItem li a span {
        opacity: 1;
        transform: translateX(0px);
        transition: .5s ease;
        transition-delay: calc(0.08s * var(--g));
    }
}

@media screen and (min-width:200px) and (max-width: 600px) {
    body {
        background: linear-gradient(180deg, #F77E0C, #F77E0C, #000);
    }

    .welcome {
        background: #000;
    }

    .wel2 {
        -webkit-text-stroke: 3px #F77E0C;
    }

    .welcome h1 {
        position: absolute;
        font-size: 45px;
        z-index: 1;
    }

    .bun span {
        font-size: 30px;
        white-space: normal;
    }

    .bun {
        border: 5px solid #F77E0C;
    }

    .mama {
        font-size: 20px;
        height: 240px;
    }


    .conta li a:hover {
        border-bottom: 3px solid #F77E0C;
    }

    .conta a {
        font-size: 30px;
        border-bottom: 3px solid #F77E0C;
    }

    .conta h1 {
        font-size: 80px;
        bottom: 50px;
    }

    .con2 {
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .conta p {
        font-size: 14px;
    }

    .peinai span {
        font-size: 15px;
        top: 95%;
        width: 100%;
    }

    .peinai img {
        width: 100%;
        height: 250px;
    }

    .peinai h1 {
        white-space: normal;
        font-size: 70px;
    }

    .pema h1 {
        font-size: 35px;
        white-space: normal;
    }

    .container.active .navItem li:hover a span {
        transform: translateX(0px);
        transition: .2s ease;
        color: #F77E0C;
    }

    .container.active .navItem li:hover a i {
        transition: .25s ease;
        color: #000;
    }

    .container.active .navItem li a span {
        opacity: 1;
        transform: translateX(0px);
        transition: .5s ease;
        transition-delay: calc(0.08s * var(--g));
    }
}