@charset "UTF-8";

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter-Thin';
    src: url('/fonts/Inter-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter-ExtraLight';
    src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    color: white;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

body {
    margin: 0;
    background-color: #00040D;
}

a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.namef1 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef2 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef3 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef4 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef5 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef6 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef7 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef8 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.namef9 {
    font-size: 10px;
    opacity: 0;
    cursor: default;
}

.p1,
.p2,
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8,
.p9 {
    opacity: 0;
    position: relative;
    top: -50px;
}

#img {
    margin-top: 100px;
}

.d-grid {
    display: grid;
    align-items: center;
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.text-justify {
    text-align: left;
}

/* Padding Start */

.pt-auto {
    padding: auto;
}

.pt-5 {
    padding-top: 80px;
}

.pb-1 {
    padding-bottom: 10px;
}

.pb-2 {
    padding-bottom: 20px;
}

.pb-3 {
    padding-bottom: 30px;
}

.pb-4 {
    padding-bottom: 40px;
}

.pb-5 {
    padding-bottom: 50px;
}

/* Padding End */

.size-w1 {
    font-size: 25px;
}

@media (max-width: 668px) {
    .img-spaccing {
        height: 100px;
    }
}

@keyframes name-of-animation {
    0% {
        letter-spacing: 0.20em;
    }

    50% {
        letter-spacing: 0.30em;
    }

    100% {
        letter-spacing: 0.20em;
    }
}

.mark {
    font-family: 'Inter-ExtraLight';
    font-weight: 900;
    font-weight: 200;
    line-height: 20px;
}

.mark2 {
    font-family: 'Inter-ExtraLight';
    font-weight: 100;
    line-height: 20px;
}

.justify-content-center {
    justify-content: center;
}

.img-spaccing {
    box-shadow: 0px 0px 4px #00000046;
    border-radius: 15px;
    padding: 20px;
    height: 50px;
    margin-left: 30px;
    background-color: #030027;
}

.font-s {

    animation: name-of-animation 5s cubic-bezier(.39, .18, 0, .85) infinite;

    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    letter-spacing: 0.46em;
}

/* Margins Start*/

.mt-1 {
    margin-top: 5px;
}

.mt-2 {
    margin-top: 10px;
}

.mt-3 {
    margin-top: 15px;
}

.mt-4 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 25px;
}

.mt-auto {
    margin: 15px auto;
}

.mb-1 {
    margin-bottom: 5px;
}

.ml-1 {
    margin-left: 10px;
}

.mg-auto {
    margin: auto 15px;
}

.mg2-auto {
    margin: 50px 50px;
}

.mg-2 {
    margin: 5px 57px;
}

/* Margins End*/

/* Interação Habilidades Start */

.d-none1 {
    opacity: 0;
    cursor: default;
}

.d-none2 {
    opacity: 0;
    cursor: default;
}

.d-none3 {
    opacity: 0;
    cursor: default;
}

.zoom1 {
    transition-duration: 1s;
}

/* Interação Habilidades End */


#img {
    border-radius: 999px;
}

h3 {

    font-family: 'Inter-Thin';
    font-style: normal;
    font-weight: 100;
    font-size: 20px;
    line-height: 24px;

}

.footer {
    margin-top: 50px;
    position: relative;
    z-index: 10;
}

.justify-content-start {
    justify-content: start;
}

.justify-content-end {
    justify-content: end;
}

.align-items-center {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 500px;
}

.SHIROEDITS {

    font-family: 'Inter';
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;

    margin-top: 20px;
    margin-left: 10px;

}

.d-justify {
    margin: 0 calc(((100% - 700px) / 2) + 70px);
}

.sans-serif {

    font-family: 'Inter-Thin';
    font-style: normal;
    font-weight: 100;
    font-size: 20px;
    line-height: 24px;

}

.text-center {
    text-align: center;
}

.tm-img {
    margin-bottom: 50px;
    height: 190px;
}

/* interação de linhas start*/

#linenav1 {
    border-bottom: 1px solid white;
    width: 0px;
    margin-left: 56px;
}

#linenav2 {
    border-bottom: 1px solid white;
    width: 0px;
    margin-left: 30px;
}

#linenav3 {
    border-bottom: 1px solid white;
    width: 0px;
    margin-left: 25px;
}

#line {
    border-bottom: 1px solid white;
    width: 0px;
}

#line2 {
    border-bottom: 1px solid white;
    width: 0px;
}

#line3 {
    border-bottom: 1px solid white;
    width: 0px;
}

#line4 {
    border-bottom: 1px solid white;
    width: 0px;
}

#line5 {
    border-bottom: 1px solid white;
    width: 0px;
}

#line6 {
    border-bottom: 1px solid white;
    width: 0px;
}

/* interação de linhas end */

.conteiner {
    min-height: 50%;
    display: flex;
    justify-content: center;
}

#close {
    opacity: 0;
}

.closejustify {
    position: relative;
    left: 260px;
    margin: 30px;
}

.bloco {
    background-color: #030027;
    border-radius: 10px;
    height: 0px;
}

.mg-calc {
    margin: 50px calc((100% - 600px) / 2);
}

.sobremim {
    height: 650px;
    background: rgba(0, 21, 39, 0.41);
}

a:hover {
    opacity: 0.7;
}

/* NAV BAR start */

.mobile-nav {
    font-family: sans-serif;
    background: #00000000;
}

.nav-menu {
    display: flex;
    align-items: center;
    font-family: sans-serif;
    background: #00000000;
    height: 60px;
}

.nav-list {
    list-style: none;
    transition: transform 0.3s ease-in;
}

.backg-nav {
    position: fixed;
    width: 100%;
    z-index: 3;
    background-color: #012340f6;
}

.nav-spaccing {
    margin: 0px auto;
    display: flex;
    justify-content: center;
}

.nav-list li {
    letter-spacing: 3px;
    text-align: center;
    width: 176px;
}

#img2 {
    margin-top: 5px;
    height: 50px;
}

.mobile-menu {
    display: none;
    cursor: pointer;
}

.mobile-menu div {
    width: 32px;
    height: 2px;
    display: grid;
    justify-content: left;
    background-color: #fff;
    margin: 4px;
    transition: 0.3s ease-in-out;
}
@media (max-width: 998px) {
    .img-spaccing {
        padding: 20px;
    }

    #img2 {
        margin-top: 5px;
    }

    .SHIROEDITS {
        margin-top: 20px;
        font-size: 20px;
    }

    .size-w1 {
        font-size: 20px;
    }

    .align-items-center {
        text-align: center;
        align-items: center;
        justify-content: center;
        margin: 0 300px;
    }

    .font-a {
        font-size: 14px;
    }
}

.d-flex2 {
    background-color: #012340;
    display: flex;
    justify-content: center;
    padding-bottom: 1vh;
}

.justify-header {
    padding-top: 20px;
    padding-bottom: 100px;
}

.spami1 {
    margin: 7px 0px;
}

.spami2 {
    margin: 7px 0px;
}

.spami3 {
    margin: 7px 0px;
}

@media(max-width: 798px) {
    .justify-size {
        font-size: 15px!important;
    }
}


@media (max-width: 498px) {

    .SHIROEDITS {
        font-size: 5px;
    }

    .font-a {
        font-size: 7px;
    }

    .font-s {
        font-size: 17px;
    }

    .size-w1 {
        font-size: 5px;
    }

    .font-size {
        font-size: 5px;
    }

    .justify-size {
        font-size: 7px;
    }
}

@media (max-width: 598px) {

    .d-justify {
        margin: 0 calc(((100% - 660px) / 2) + 70px);
    }

    .bloco {
        background-color: #030027;
        height: 0px;
        border-radius: 10px;
    }

    #img2 {
        height: 36px;
        display: flex;
        margin-top: 5px;
    }

    .sobremim {
        height: 400px;
    }

    .SHIROEDITS {
        font-size: 15px;
        margin-top: 11px;
    }

    .align-items-center {
        text-align: center;
        align-items: center;
        justify-content: space-around;
        margin: 0 100px;
    }

    .font-a {
        font-size: 10px;
    }

    .img-spaccing {
        padding: 10px;
    }

    .size-w1 {
        margin-bottom: 50px;
        font-size: 12px;
    }

    .mg-calc {
        margin: 0 calc((100% - 400px) / 2);
    }

    .justify-size {
        font-size: 12px!important;
    }

    .p1size {
        font-size: 12px;
    }

    .p2size {
        font-size: 12px;
    }

    .p3size {
        font-size: 12px;
    }

    .p4size {
        font-size: 12px;
    }

    .p5size {
        font-size: 12px;
    }

    .p6size {
        font-size: 12px;
    }

    .p7size {
        font-size: 12px;
    }

    .p8size {
        font-size: 12px;
    }

    .p9size {
        font-size: 12px;
    }

    .nav-list li {
        padding: 20px 0px !important;
        margin-left: 0;
        opacity: 0;
    }

}

@media (max-width: 398px) {

    .nav-list li {
        padding: 10px 0px !important;
        margin-left: 0;
        opacity: 0;
    }

    .p1size {
        font-size: 10px;
    }

    .p2size {
        font-size: 10px;
    }

    .p3size {
        font-size: 10px;
    }

    .p4size {
        font-size: 10px;
    }

    .p5size {
        font-size: 10px;
    }

    .p6size {
        font-size: 10px;
    }

    .p7size {
        font-size: 10px;
    }

    .p8size {
        font-size: 10px;
    }

    .p9size {
        font-size: 10px;
    }

    .bloco {
        background-color: #030027;
        height: 0px;
        border-radius: 10px;
    }

    .mg-calc {
        margin: 0 calc((100% - 259px) / 2);
    }

    .sobremim {
        height: 490px;
    }

    .font-size {
        font-size: 5px;
    }

    .justify-size {
        font-size: 8px!important;
    }

    #img2 {
        margin-top: 6px;
        height: 27px;
    }

    .SHIROEDITS {
        margin-top: 8px;
        font-size: 10px;
    }

    .align-items-center {
        text-align: center;
        align-items: center;
        justify-content: center;
        margin: 0 100px;
    }

    .img-spaccing {
        padding: 10px;
    }

    .font-a {
        font-size: 7px;
    }

    .font-s {
        font-size: 20px;
    }

    .size-w1 {
        font-size: 10px;
    }
}

.conteiner2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.justify-size {
    font-size: 20px;
}

@media (max-width: 999px) {
    body {
        overflow-x: hidden;
    }

    .conteiner {
        margin: auto 0;
    }

    .justify-size {
        font-size: 20px;
    }

    .nav-list {
        top: -100%;
        width: 100%;
        height: 100%;
        background-color: #012340fa;
        flex-direction: column;
        position: fixed;
        z-index: 1;
        justify-content: center;
        transition: all 0.3s ease-out;
    }

    #sobre-mim {
        width: 100%;
        background-color: #493737;
    }

    .nav-list li {
        padding: 30px 0px;
        margin-left: 0;
        opacity: 0;
    }

    .mobile-menu {
        z-index: 4;
        position: fixed;
        right: 0;
        display: grid;
        justify-content: right;
        margin: 10px;
    }
}

.nav-list.active {
    top: 0;
    transition: all 0.3s ease-in-out;
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
    opacity: 0;
}

.mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
}

/* NAV BAR end */