/*BOTÃO 1*/
.simple_button{
    position: relative;
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical */

    height: 100%;
    width: 60%;
    margin-left: 5%;
    margin-right: 5%;

    background-color: black;
    color: white;

    text-decoration: none;

    transition: background-color 0.08s steps(1);
    z-index: 2;

    font-size: var(--font-micro);
}

.simple_button::before,
.simple_button::after {
    
    position: absolute;
    content: "";
    width: 0;
    height: 65%;
    background-color: var(--green_1);
    transition: width 0.01s steps(2);
    z-index: -1;
}

.simple_button::before {
    bottom: 0%;
    left: 20%;
}

.simple_button::after {
    top: 0%;
    right: 20%;
}

.simple_button:hover::before,
.simple_button:hover::after {
    width: 25%;
}

.simple_button:hover {
    cursor: pointer;
    background-color: var(--green_1);
    color: white;
}

/*BOTÃO IMPORTANTE*/
.button-important{
    width: 95%;
    height: 95%;
    

    font-family: 'Consolas';
    font-size: var(--font-md);
    color: white;

    border: none;
    background-color: var(--green_1);
}

.button-important:hover{
    color: var(--green_1);
    background-color: white;

    box-shadow: 0 0 8px var(--green_1) ;

    transform: translateY(-2px) scale(1.015);
}

/*BOTÃO SECUNDÁRIO*/
.button-secondary{
    width: 95%;
    height: 95%;
    

    font-family: 'Consolas';
    font-size: var(--font-md);
    color: white;

    border: solid 2px var(--green_1);
    background-color: transparent;
}

.button-secondary:hover{
    color: var(--green_bright);
    background-color: transparent;

    transform: translateY(-2px) scale(1.015);
}

/* 'abas' de pastas */

.portifolio-line{
    position: absolute;
    width: 90%;

    left: -5%;
    top: 8%;

    z-index: -1;
    overflow: visible;
}

.portifolio-line.mid{
    position: absolute;
    width: 80%;

    left: 0;
    top: 12%;

    z-index: -1;
    overflow: visible;
}

.portifolio-line.right{
    position: absolute;
    width: 65%;

    left: 10%;
    top: 16%;

    z-index: -1;
    overflow: visible;
}

.portifolio-line::after{
    content: "";
    position: absolute;

    right: 0;
    top: 0;

    width: 2px;
    height: 25vh;

    background-color: white;
}

.portifolio-line::before{
    content: "";
    position: absolute;

    left: 25vw;
    bottom: 0;

    width: 4vw;
    height: 2vw;

    background-color: white;
}

.portifolio-line.mid::before{
    left: 30vw;
}

.portifolio-line.right::before{
    left: 32vw;
}

.certification-badge{
    width: 15vw;
    background-color: white;
    border-radius: 5px;
}

#btn_subir{
    position: fixed;
    right: 5vw;
    bottom: 8dvh;
    transform: rotate(-90deg);

    width: 4vw;
    
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1000;
}

#btn_subir.visivel {
    pointer-events: all;
    opacity: 1;
}