*{
    padding: 0;
    margin: 0;
    font-family: "Outfit","Quicksand", sans-serif;
    box-sizing: border-box;
}

body{
    background-color: #09122C;
}


.headerContent{
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 25vh;
}

.wildSpace{
    width: 25%;
    height: 50%;
}

.headTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
}

.headTitle div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 50%;
    border-radius: 15px;
}

.headTitle div a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color:#34313154;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.headTitle div a:hover{
    border: 2px solid rgb(175, 0, 0);
    transform: translateY(-5px);
    transition-delay: 50ms;
}

.headTitle div a span{
    font-size: 1.3rem;
    font-weight: bold;
    color: #fffaf3;
}


.headLinks{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 25%;
    height: 50%;
}

.headLinks .link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 50%;
    border-radius: 10px;
}

.headLinks .link a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color:#34313154;
    text-decoration: none;
    transition: transform 0.3s ease;
}


.headLinks .link a:hover{
    border: 2px solid rgb(175, 0, 0);
    transform: translateY(-5px);
    transition-delay: 50ms;
}

.headLinks .link a img{
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.homeContent{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 75vh;
}

.homeContainer{
    width: 100%;
    height: 80%;
}

.homeTitle{
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 75%;
}

.homeTitle div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.homeTitle div h1{
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-size: 2rem;
    color: #fffaf3;
}

.homeTitle div span{
    color: #fffaf3;
    font-size: 1.3rem;
}

.homeTitle div .subTitle{
    color: #fffaf3;
    font-size: 1.5rem;
}

.homeTitle div b{
    color: rgba(231, 0, 0, 0.952);
}


.homeTitle .homeLinks{
    width: 100%;
    height: 25%;
}

.homeLinks .link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    height: 80%;
    border-radius: 15px;
}

.homeLinks .link a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}


.homeLinks .link a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color:#33313196;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.homeLinks .link a:hover{
    border: 2px solid rgb(175, 0, 0);
    transform: translateY(-5px);
    transition-delay: 50ms;
}

.homeLinks .link a span{
    font-size: 1.2rem;
    font-weight: bold;
}

.skillContent{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.skillTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 20%;
}

.skillTitle .title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
}

.skillTitle .title div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35%;
    height: 80%;
    border-radius: 15px;
    background-color:#33313196;
    transition: transform 0.3s ease;
}

.skillTitle .title div:hover{
    border: 2px solid rgb(175, 0, 0);
    transform: translateY(-1px);
    transition-delay: 50ms;
}

.skillTitle .title span{
    font-size: 1.5rem;
    font-weight: bold;
    color: #fffaf3;
}

.skillContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
}

.skillContainer .skills{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.skills .title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 20%;
    margin-top: 2rem;
    background-color: #eeeeee4b;
    border-radius: 15px;
}

.skills .title span{
    font-size: 1.5rem;
    color: #fffaf3;
}

.skills .languagesContainer{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    width: 80%;
    height: 80%;
}

.languagesContainer .gridLanguages{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    height: 100%;
    margin-top: 25px;
    border-radius: 15px;
    background-color: #eeeeee17;
}

.gridLanguages .gridItem{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
    border-radius: 15px;
}

.gridLanguages .gridItem img{
    object-fit: contain;
    width: 80%;
    height: 80%;
}

.skills .frameworkContainer{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    width: 80%;
    height: 80%;
}

.frameworkContainer .gridFrameworks{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    height: 100%;
    margin-top: 25px;
    border-radius: 15px;
    background-color: #eeeeee17;
}

.gridFrameworks .gridItem{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 50%;
    border-radius: 15px;
}

.gridFrameworks .gridItem img{
    object-fit: contain;
    width: 80%;
    height: 80%;
}


.skills .toolsContainer{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    width: 80%;
    height: 80%;
}


.toolsContainer .gridTools{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    height: 100%;
    margin-top: 25px;
    border-radius: 15px;
    background-color: #eeeeee17;
}

.gridTools .gridItem{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    height: 35%;
    border-radius: 15px;
    background-color:#33313196;
}

.gridTools .gridItem img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.selfContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 80vh;
}

.selfContent .self{
    display: flex;
    align-items: start;
    flex-direction: column;
    margin-top: 10em;
    width: 80%;
    height: 100%;
}

.selfContent .self .selfTitle{
    width: 15%;
    height: 15%;
}

.self .selfTitle span{
    font-size:2.2rem;
    color: #fffaf3;
}

.self .selfDescribe{
    display: flex;
    align-items: center;
    width: 75%;
    height: 50%;
}

.self .selfPicture{
    display: flex;
    align-items: center;
    justify-content: center;
    width:  25%;
    height: 60%;
}

.self .selfPicture div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    height: 100%;
}

.self .selfPicture div img{
    object-fit: contain;
    width: 80%;
    height: 90%;
    border-radius: 100%;
    object-fit: cover;
}

.self .selfInfo{
    display: flex;
    align-items: center;
    margin-left: 15px;
    width: 60%;
    height: 60%;
}

.selfInfo div{
    width: 80%;
    height: 60%;
}

.selfInfo div span:first-child{
    font-size: 1.5rem;
    color: #fffaf3;
}

.selfInfo div span{
    font-size: 1.2rem;
    color: #fffaf3;
}


.scolarityContent{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 50vh;
}

.scolarityTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20%;
}

.scolarityTitle span{
    font-size: 1.5rem;
    color: #fffaf3;
}

.scolarityTitle .underline{
    width: 100%;
    height: 2px;
    background-color: #cccccc;
    border-radius: 15px;
}


.scolarityContent .scolarityContainer{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 80%;
    height: 80%;
}

.scolarityContainer .grades{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 30%;
    height: 60%;
    border-radius: 15px;
    background-color: #33313196;
}

.grades .gradeTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 1em;
    width: 80%;
    height: 20%;
}

.gradeTitle span{
    font-size: 1.5rem;
    color: #fffaf3;
}

.gradeTitle .underline{
    width: 50%;
    height: 2px;
    background-color: #cccccc;
    border-radius: 15px;
}

.grades .gradeContent{
    display: flex;
    align-items: start;
    justify-content: center;
    width: 60%;
    height: 60%;
}

.gradeContent .grade{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
}

.grade span{
    font-size: 1rem;
    color: #fffaf3;
}


.projetContent{
    width: 100vw;
    height: 100vh;
}

.projetContent .projetTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20%;
}

.projetTitle .title{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
    height: 50%;
    border-radius: 15px;
    background-color: #33313196;

}

.projetTitle .title span{
    font-size: 1.5rem;
    color: #fffaf3;
}

.projetTitle .title .underline{
    width: 50%;
    height: 2px;
    background-color: #cccccc;
    border-radius: 15px;
}

.projetContent .projetGrid{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
}


.projetGrid .gridItem{
    width: 65%;
    height: 65%;
    background-color: #33313196;
    border-radius: 15px;
}

.projetGrid .gridItem a{
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-radius: 15px;
}

.projetGrid .gridItem img{
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.projetGrid .gridItem:hover{
    border: 2px solid rgb(175, 0, 0);
    transform: translateY(-5px);
    transition-delay: 50ms;
}