.projects-session div.Overview {
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    grid-template-rows: 2fr 7fr;
    grid-template-areas:
        "Nav Nav Nav"
        "Skills Tech Contact"
    ;
    background-color: var(--tertiary-background);
    transition: 200ms;
    z-index: 1;
}

.Overview nav {
    border-bottom: 2px solid var(--secondary-background);
    width: 100%;
    grid-area: Nav;
    align-self: start;
    display: flex;
    align-items: center;
    height: fit-content;
}

.Overview nav h1 {
    flex: 1;
    margin-left: 10px;
}



.Overview .skills {
    border-right: 1px solid var(--secondary-background);
    height: fit-content;
    align-self: center;
    width: 100%;
    grid-area: Skills;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Skills Session */

.skills .skillItem {
    width: 94%;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-content: center;
    height: 40px;
    gap: 10px;
}

.skills .skillItem .skillName {
    align-self: center;
    text-align: center;
    font-size: 15px;
    width: 100%;
    color: var(--secondary-color-text);
    border-right: 2px solid var(--secondary-background);
}

.skills .skillItem:not(:first-child) {
    border-top: 1px solid var(--secondary-background);
}

.skills .ProgressBar {
    align-self: center;
    background-color: var(--secondary-background);
    padding: 0;
    height: 40%;
}

.skills .ProgressBar div {
    height: 100%;
}

.Iniciante {
    color: #34D399;
    background-color: #34D399;
}

.Intermediário {
    color: #FBBF24;
    background-color: #FBBF24;
}

.Avançado {
    color: #8b5cf699;
    background-color: #8b5cf699;
}

.skills .NivelText {
    background-color: transparent;
    text-align: center;
    font-size: 15px;
    width: 100%;
}



.skillItem .Projects {
    border-left: 2px solid var(--secondary-background);
    text-align: left;
    padding-left: 10px;
    font-size: 15px;
}

/* tech */
.tech {
    grid-area: Tech;
    height: 80%;
    align-self: center;
    justify-self: center;
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tech h1 {
    text-align: center;
    justify-self: start;
    margin: 0;
    padding: 0;
    font-size: 30px;
}

.TechUl {
    align-self: center;
    width: 90%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flexbox;

}

.TechUl li {
    position: relative;
    margin: 5px 0;
    padding: 2px;
    font-size: 1.3rem;
    transition: 200ms;
    color: var(--secondary-color-text);
}

.TechUl li span {
    color: var(--vibrant);
    position: absolute;
    border-left: 1px solid var(--secondary-background);
    padding-left: 10px;
    right: 0;
    transition: 200ms;
}

.TechUl li.isClickable:hover {
    background-color: var(--secondary-background);
    transform: scale(1.025);
}

.TechUl li.isClickable:hover span {
    border-left: 1px solid var(--vibrant);
}




/* Contact Session */
.Contact {
    border-left: 1px solid var(--secondary-background);
    grid-area: Contact;
    height: 90%;
    align-self: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.Contact h1 {
    font-size: 25px;
    margin: 0 0 0 10px;
    flex: 1fr;
}

.Contact ul {
    flex: 4fr;
    height: 100%;
    list-style: none;
}

.Contact li {
    margin: 30px 10px;
    display: flexbox;
    position: relative;
}

.Contact ul li a {
    color: white;
    transition: 300ms;
    text-decoration: none;
}

.Contact ul li a svg {
    position: absolute;
    left: -17.5px;
    bottom: 0;
    transition: 300ms;
}

.Contact ul li:hover a {
    text-decoration: underline;
    color: var(--vibrant);
}

.Contact ul li:hover a svG {
    fill: var(--vibrant)
}


/* Clickable */

.isClickable {
    color: var(--main--text) !important;
    transition: 200ms;
}

.isClickable:hover {
    cursor: pointer !important;
    color: var(--vibrant) !important;
}

/* Active */
.TechUl li.Active,
.skillName.Active,
.Projects.Active {
    color: var(--vibrant) !important;
    text-decoration: underline;
}