@font-face {
    font-family: 'JetBrains Mono';
    src: url(/sources/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf);
}

:root {
    --verde-claro: #99DB49;
    --verde-escuro: #069E8C;
    --rosa: #9e064a;
    --brancozada: #fff;
    --bgcolor-body: #211D19;

    --padding-padrao: 20px;
    --margin-padrao: 20px;

    --border-bottom-nav: rgba(255, 255, 255, .2);
    --border-grosso: 15px solid;

    --font-body: JetBrains Mono;
    --font-size-padrao: 16pt;
}

body {
    font-family: JetBrains Mono;
    font-size: 14pt;
    background-color: var(--bgcolor-body);
    color: var(--brancozada);

    opacity: 0;
    transition: opacity 0.8s;
}

body.loaded {
    opacity: 1;
}

/* NAV STYLES */

.nav-GVS {
    border-bottom: 1px solid var(--border-bottom-nav);
}

.nav-icons {
    height: 10vh;
}

.nav-icons img {
    height: 40px;
}

#GVS-txt-nav {
    color: transparent;
    background: linear-gradient(to right, var(--verde-claro), var(--verde-escuro), var(--rosa), var(--bgcolor-body), var(--brancozada));
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 7s linear infinite;
    white-space: nowrap;
    overflow: visible;
}

@keyframes gradientMove {
    to {
        background-position: 200%;
    }
}


/* PAGE 1 STYLES */

.page-1 {
    border-left: var(--border-grosso) var(--rosa);
    font-size: 14pt;
}

.saudacoes-txt {
    color: var(--verde-claro);
}

.ul-menus {
    height: 300px;
    list-style: none;
}

.menus-links a {
    color: var(--verde-claro);

    position: relative;
    transition: color 0.3s;
    overflow: hidden;
}

.menus-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: var(--verde-escuro);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
}

.menus-links a:hover,
.menus-links a:focus {
    color: var(--rosa);
}

.menus-links a:hover::after,
.menus-links a:focus::after {
    transform: scaleX(1);
}

.img-gabriel {
    height: 70vh;
}

/* PAGE 2 STYLES */

.txt-GVS {
    color: var(--verde-escuro);
}

.skills-icons {
    /* border: 1px solid red; */
    background-color: transparent;
    width: 200px;
}

#about-me {
    border-right: var(--border-grosso) var(--rosa);
}

#title-skills {
    color: var(--verde-claro);
}

/* .txt-about-me {
    height: 50vh;
} */

/* PAGE 3 STYLES */

.tit-projetos {
    color: var(--verde-claro);
    border-bottom: var(--border-grosso) var(--rosa);
}

.cards-projetos {
    width: 100%;
    max-width: 400px;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.btn-go-top {
    background-color: var(--verde-escuro);
    color: var(--bgcolor-body);

    width: 40px;
    height: 40px;
    border: none;

    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 999;
    transition: opacity .3s;
    opacity: 0;
    pointer-events: none;
}

.btn-go-top.show {
    opacity: .8;
    pointer-events: auto;
}

.btn-go-top.show:hover {
    background-color: var(--verde-claro);
    transition: .5s;
}