*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: 1s all;
}
:root{
    --priCor: #A5FF8E;
    --secCor: #167000;
    --accCor: #33FF00;
    --textCor: black;
}
.darkmodeON{
    --priCor: #167000;
    --secCor: #A5FF8E;
    --textCor: white;
    background-color: #0d050f;

    #darkmodeSW{
        filter: invert(100%);
    }
}
html{
    scroll-behavior: smooth;
}
body{
    margin: 0;
    overflow-x: hidden;
}
.inknut-antiqua-regular {
    font-family: "Inknut Antiqua", serif;
    font-weight: 400;
    font-style: normal;
}
.iceland-regular {
    font-family: "Iceland", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.kode-mono {
    font-family: "Kode Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.jersey-20-regular {
    font-family: "Jersey 20", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
a{
    text-decoration: none;
    color: var(--textCor);
}

nav{
    background-color: var(--priCor);
    height: 15vb;
    width: 100vw;
    display: grid;
    align-items: center;
    grid-template-rows: 1fr 4px;
    grid-template-columns: 1fr 8vw;
    position: fixed;
    z-index: 99;

    img{
        width: 8vw;
        height: 8vw;
        display: none;
        margin-left: 5vw;
        margin-top: 2vw;
    }

    ul{
        font-size: 1.5rem;
        margin-left:5vw;
        width: 70vw;
        height: 10vb;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        li{
            display: inline-block;
            margin: 0 1vw;
            height: 6vb;
            text-align: center;
            line-height: 2.5;
            font-weight: bold;
            font-weight: 600;
            position: relative;
        }

        a{
            transition: all 0.35s;
        }

        a:after{
            content: "";
            display: block;
            background-color: var(--textCor);
            position: absolute;
            left: 0;
            bottom: 16%;
            width: 0;
            border-radius: 50px;
            height: 3px;
            transition: 0.35s;
        }

        a:hover{
            font-weight: 800;
        }
        a:hover:after{
            width: 100%;
        }

        .liBar{
            background-color: var(--textCor);
            width: 5px;
        }
        li:first-child{
            border-left: 0px;
        }
        li:last-child{
            border-right: 0px;
        }
    }

    #darkmodeSW{
        display: block;
        height: 3vw;
        width: 3vw;
        margin: 0;
        justify-self: left;
        transition: 1s all;
        
    }
}
nav::after{
    content: "";
    width: 95%;
    height: 4px;
    margin: 0 2.5%;
    margin-bottom: 0.1vb;
    display: block;
    justify-self: center;
    background-color: var(--textCor);
    grid-column: 1/3;
}

#sec-inicio{
    padding-top: 30vb;
    display: flex;
    justify-content: center;

    >div{
        width: 80vw;
        background-color: var(--priCor);
        border-radius: 40px;
        height: 70vb;
        padding: 5%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;

        img{
            width: 20vw;
            height: 20vw;
        }

        span{
            font-family: "Kode Mono", monospace;
            font-size: 4rem;
            background-color: var(--accCor);
            padding: 1% 3%;
        }
        h2{
            font-family: "Iceland", sans-serif;
            font-size: 3rem;
            margin: 4% 0;
            color: var(--textCor);
        }
    }
}

#sec-about{
    padding-top: 30vb;
    display: flex;
    justify-content: center;

    >div{
        width: 80vw;
        background-color: var(--priCor);
        border-radius: 40px;
        padding: 5%;

        h1{
            color: white;
            font-family: "Kode Mono", monospace;
            font-size: 3rem;
            background-color: black;
            display: block;
            width: 70vw;
            padding-left: 2%;
            font-weight: 400;
        }
        span{
            width: 70vw;
            display: grid;
            justify-content: space-between;
            margin-top: 5vb;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;

            img{
                background-color: white;
                border-radius: 25px;
                display: inline-block;
                width: 20vw;
                height: 20vw;
            }
            >div{
                background-color: var(--accCor);
                color: black;
                width: 40vw;
                height: max-content;
                display: inline-block;
                font-family: "Kode Mono", monospace;
                font-size: 2rem;
                padding: 3%;
                border: 2px dotted var(--secCor);
            }
        }
    }
}

#sec-skill{
    padding-top: 30vb;
    display: flex;
    justify-content: center;


    svg{
        circle{
            stroke: var(--secCor) !important;
        }
        rect{
            fill: var(--secCor) !important;
        }
    }
    >div{
        width: 80vw;
        height: 80vb;
        background-color: var(--priCor);
        border-radius: 40px;
        padding: 5%;
        padding-bottom: 0;
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 1fr;
        position: relative;

        #fncObj{
            position: absolute;
            height: 0px;
            width: 0px;
            z-index: 10;
            left: 50%;
            top: 50%;
            padding: 0%;
            transform: translate(-50%, -50%);
            transition: width 1s, height 1s, opacity 0s, border 0s; 
            overflow: hidden;  
            display: flex;
            justify-content: center;
            flex-wrap: wrap;  
            
            >p{
                display: block;
                font-size: 3rem;
                padding: 4% 5%;
                justify-items: center;
                width: 60vw;

                p{
                    padding-top: 7%;
                    width: 55vw;
                }
            }
        }

        div:first-child{
            justify-self: left;
        }
        div:last-child{
            justify-self: right;
        }
        span{
            padding-top: 110px;
        }
        #sp1{
            text-align: left;

            span{
                background-color: var(--secCor);
                display: inline-block;
                width: 180px;
                height: 15px;
                position: absolute;
                transform: translateX(-100%);
                top: 32%;
                padding: 0;
            }
            span:nth-child(2){
                top: 51%;
            }
            span:nth-child(3){
                top: 72%;
            }
        }
        #sp2{
            text-align: right;
            position: relative;

            span{
                background-color: var(--secCor);
                display: inline-block;
                width: 180px;
                height: 15px;
                position: absolute;
                top: 22%;
                transform: translateY(7.5px);
                right: -180px;
                padding: 0;
            }
            span:nth-child(2){
                top: 43%;
            }
            span:nth-child(3){
                top: 65%;
            }
        }
        
        h1{
            background-color: white;
            border-radius: 40px;
            display: inline-block;
            border: var(--secCor) 10px solid;
            padding: 4% 5%;
            font-family: "Jersey 20", sans-serif;
            font-size: 2.5rem;
            font-weight: 500;
            position: relative;
            margin-bottom: 5vb;
            text-align: center;
            transition: all 1s;

            >p{
                display: none;
                text-align: justify;
            }
        }

        h1:hover{
            transform: scale(125%, 125%);
        }
    }

}

#sec-projetos{
    padding-top: 30vb;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    >div{
        width: 80vw;
        background-color: var(--priCor);
        border-radius: 40px;
        padding: 3%;

        span{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 0px;
            justify-items: center;
            width: 100%;
            height: 350px;
            position: relative;
            overflow-y: hidden;

            div{
                width: 350px;
                height: 350px;
                background-color: var(--secCor);
                color: var(--textCor);
                border-radius: 25px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: absolute;

                img{
                    width: 150px;
                    height: 150px;
                    margin: 100px;
                }
                
                p{
                    font-size: 2rem;
                    opacity: 0;
                    line-height: 1.5;
                    padding-bottom: 2%;
                    padding-right: 5%;
                    min-width: 700px;
                    filter: invert(100%);
                }
            }

            #proj-1{
                left: 0;
                z-index: 3;
            }
            #proj-2{
                left: 50% - 350px;
                z-index: 2;
            }
            #proj-3{
                right: 0;
                z-index: 1;
            }

            div:hover{
                grid-column-start: 1;
                grid-column-end: 4;
                width: 100%;
                position: absolute;
                z-index: 4 !important;

                p{
                    opacity: 1;
                }
            }
            #proj-1:hover{
                left: 0;
            }
            #proj-3:hover{
                right: 0;
            }
        }
    }
    a div{
        width: 80vw;
        height: 30vb;
        margin-top: 10vb;
        background-color: var(--accCor);
        border-radius: 40px;
        padding: 5%;
        display: flex;
        align-items: center;
        justify-content: right;

        h1{
            font-family: "Kode Mono", monospace;
            font-size: 5rem;
            font-weight: 500;
            text-align: center;
            width: 80%;
            color: black;
        }
        img{
            height: 20vb;
        }
    }
    a:hover{
        filter: brightness(80%);
    }


}

#sec-contact{
    padding-top: 30vb;
    display: flex;
    justify-content: center;

    >div{
        width: 80vw;
        background-color: var(--priCor);
        border-radius: 40px;
        padding: 5%;

        h1{
            font-family: "Kode Mono", monospace;
            font-size: 5rem;
            color: var(--textCor);
        }
        #contact-form{
            width: 100%;
            margin-top: 5vb;
            background-color: var(--secCor);
            height: 75vb;
            border-radius: 40px;
            padding: 4%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            input{
                background-color: var(--priCor);
                border-radius: 40px;
                border: 0;
                font-size: 2rem;
                width: 48%;
                height: 8vb;
                padding: 3%;
                font-family: "Jersey 20", sans-serif;
                outline: none;
                transition: 0s;
            }
            input[type="tel"] {
                margin-top: 2vb;
                width: 100%;
            }
            input:focus{
                border: black 2px solid;
            }
            textarea{
                background-color: var(--priCor);
                border-radius: 40px;
                border: 0;
                font-size: 2rem;
                width: 100%;
                height: 35vb;
                margin-top: 3vb;
                padding: 3%;
                font-family: "Jersey 20", sans-serif;
                outline: none;
            }
            textarea:focus{
                transition: outline 0s;
                outline: black 3px solid;
            }
            input[type="button"]{
                background-color: var(--accCor);
                width: 30%;
                height: 8vb;
                margin-top: 3vb;
                border-radius: 40px;
                border: 0;
                font-family: "Jersey 20", sans-serif;
                font-size: 3rem;
                margin: 2% 35%;
                cursor: pointer;
                padding: 0;
            }
            input[type="button"]:hover{
                filter: brightness(80%);
            }

        }
    }
}
#sec-rodape{
    padding-top: 30vb;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;

    >div{
        background-color: black;
        width: 100vw;
        height: 15vb;
        font-family: "Jersey 20", sans-serif;
        color: white;
        font-weight: 400;
        align-items: center;
        display: flex;
        
        >span{
            justify-content: center;
            flex-wrap: wrap;
            align-items: center;
            display: flex;
            width: 100%;

            >span{
                width: 15px;
                height: 7vb;
                background-color: white;
                margin: 0 4vw;
            }
            h1{
                font-weight: 400;
                font-size: 3rem;
            }
            h2{
                font-weight: 400;
                font-size: 2rem;
            }
        }
    }

}