.container{
    padding: 8rem 4rem 8rem 9.25rem;
}
@media screen and (min-width: 901px) {
    h1, .h1{
        font-size: 5.5rem;
    }
}
/* HEROSECTION --------------------------------------------------------- */
.herosection .container{
    padding: 12rem 4rem 12rem 9.25rem;
    gap: 6rem;
}
.herosection .buttons{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    width: calc(100% / 12 * 5 - 1rem);
}
.herosection .buttons .btn p{
    font-size: 1.25rem;
    margin: unset;
}
.herosection .buttons .btn{
    background-color: var(--white);
    color: var(--colormid);
}
.herosection .buttons .btn:hover{
    background-color: var(--colorlight);
    color: var(--white);
}
.herosection .buttons .btn.active, .herosection .btn.active:hover{
    background-color: var(--colormid);
    color: var(--white);
}
.herosection .buttons .btn path{
    fill: var(--colormid);
}
.herosection .buttons .btn:hover path{
    fill: var(--white);
}
.herosection .buttons .btn.active path, .herosection .btn.active:hover path{
    fill: var(--white);
}
.herosection .card{
    width: calc(100% / 12 * 7 - 1rem);
    align-self: stretch;
    background-color: var(--colorlight32);
    border-radius: 1rem;
    position: relative;
}
.herosection .content{
    width: 100%;
    height: fit-content;
    display: flex;
    padding: 1rem;
    gap: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
}
.herosection .content.active{
    opacity: 1;
    transition: opacity 300ms 300ms;
    pointer-events: all;
}
.herosection figure{
    width: calc(100% / 3 - 1rem);
    height: calc(100% - 2rem);
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.herosection .text{
    width: calc(100% / 3 * 2 - 1rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    margin-left: auto;
}
.herosection .h4{
    color: var(--colormid);
}
.herosection .card .btn{
    margin-top: auto;
    margin-left: auto;
}
.herosection strong{
    color: var(--colormid);
}
/* EXPERIENCES / FORMATIONS --------------------------------------------------------- */
.experiences .wrapper, .formations .wrapper{
    flex-direction: column;
}
/* TEXT-CARD --------------------------------------------------------- */
.text-card{
    width: 100%;
    display: flex;
    gap: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--colorlight32);
}
.text-card strong{
    color: var(--colormid);
}
.dark .text-card{
    background-color: var(--black24);
}
.text-card .date{
    width: calc(100% / 12 * 3 - 1rem);
    padding-right: 2rem;
    border-right: solid var(--white64) 0.125rem;
    flex-shrink: 0;
}
.dark .text-card .date{
    border-color: var(--white32);
}
.date .italic{
    text-align: end;
}
.text-card h3{
    color: var(--black);
}
.text-card .content{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.text-card .title{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* .text-card .tag{
    color: var(--colormid);
    border: unset;
} */
.dark .text-card .italic, .dark .text-card h3, .dark .text-card p:not(.tag){
    color: var(--white);
}
/* ANCHORS --------------------------------------------------------- */
.anchors{
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}
.anchors .container{
    height: 100%;
    padding-left: 4rem;
    align-items: flex-start;
}
.anchors-wrapper{
    height: 100%;
    width: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}
.anchor{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}
.shape1{
    width: fit-content;
    height: fit-content;
    padding: 0.125rem;
    background-color: var(--white);
    border-radius: 0.25rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.shape2{
    width: fit-content;
    height: fit-content;
    padding: 0.125rem;
    background-color: var(--colordark);
    border-radius: 0.125rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.shape3{
    width: 0.625rem;
    height: 0.625rem;
    background-color: unset;
    border-radius: 0.0625rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.active .shape1, .anchor:hover .shape1{
    transform: rotate(-45deg);
}
.active .shape3{
    background-color: var(--white);
    width: 0.5rem;
    height: 0.5rem;
}
@media screen and (max-width: 1000px) {
    .herosection .wrapper{
        flex-direction: column-reverse;
    }
    .herosection .buttons{
        width: 100%;
        gap: 1rem;
    }
    .herosection .card{
        width: 100%;
    }
}
@media screen and (max-width: 900px) {
    .herosection .container{
        padding: 10rem 2rem 6rem 2rem;
        gap: 4rem;
    }
    .anchors .container{
        margin: auto;
        margin-top: 1rem;
        border-radius: 0.5rem;
        backdrop-filter: blur(1rem);
        height: fit-content;
        padding: 0.5rem 1rem;
        width: fit-content;
    }
    .container{
        padding: 6rem 2rem;
    }
    .anchors-wrapper{
        width: fit-content;
        height: 1.25rem;
        flex-direction: row;
    }
}
@media screen and (max-width: 800px) {
    .text-card{
        flex-direction: column;
        padding: 1rem;
        gap: 1.25rem;
    }
    .text-card .date{
        width: 100%;
        padding-right: unset;
        padding-bottom: 1rem;
        border-right: unset;
        border-bottom: solid var(--white64) 0.125rem;
    }
    .text-card .date .italic{
        gap: 1rem;
        display: flex;
        justify-content: flex-end;
    }
    .text-card .date br{
        display: none;
    }
}
@media screen and (max-width: 700px) {
    .herosection .content{
        flex-direction: column;
    }
    .herosection figure{
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        position: relative;
        top: unset;
        left: unset;
    }
    .herosection .text{
        margin-left: unset;
        width: 100%;
        flex-grow: 1;
    }
}
@media screen and (max-width: 600px) {
    .herosection .container{
        padding: 8rem 2rem 4.5rem 2rem;
    }
    .container{
        padding: 4.5rem 2rem;
    }
}
@media screen and (max-width: 450px) {
    .herosection .container{
        padding: 10rem 1rem 4.5rem 1rem;
    }
    .container{
        padding: 4.5rem 1rem;
    }
}