@keyframes appear_l {
    0% {
        transform: translateX(-100px);
        opacity : 0;
    }
    100% {
        transform : none;
        opacity : 1;
    }
}

@keyframes appear_r {
    0% {
        transform: translateX(100px);
        opacity : 0;
    }
    100% {
        transform : none;
        opacity : 1;
    }
}

@keyframes disappear_l {
    0% {
        transform : none;
        opacity : 1;
    }
    100% {
        transform: translateX(-100px);
        opacity : 0;
    }
}

@keyframes disappear_r {
    0% {
        transform : none;
        opacity : 1;
    }
    100% {
        transform: translateX(100px);
        opacity : 0;
    }
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

body {
    margin : 0;
    background-color : black !important;
    font-family: 'Poppins';
    width: 100%;
    height: 100%;
}

.active {
    background-color: black ;
    color: white;
    border-radius: 8px/8px;
}

.header {
    background: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: fit-content;
    position: sticky;
    top : 0;
    border-bottom-left-radius : 8px;
    border-bottom-right-radius : 8px;
    z-index: 35;
}

.header .top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.header > h1 {
    margin-top: 0;
    margin-bottom: 0;
    user-select: none;
}

.header .top-nav > p, .footer > p, .header .top-nav > a, .header .languages-button {
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 5px;
    transition : 0.2s;
    cursor: pointer;
    padding: 4px;
    text-decoration: none;
}

.header .top-nav > a {
    color: black;
}

.header .top-nav .cv-button {
    display: flex;
    align-items: center;
}

.header .top-nav > p:hover, .header .top-nav > a:hover, .header .languages-button:hover {
    opacity: 0.6;
}

.header .top-nav > p:active, .header .top-nav > a:active, .header .languages-button:active  {
    opacity: 0.4;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    width: 100%;
}

.main {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    overflow-y: hidden;
    min-height: 100vh ;
    margin-top: 8px;
}

.main > * {
    min-width: 250px;
    width: calc(100% - 40px);
    max-width: 1000px;
    min-height: calc(100vh - 80px);
    opacity: 0;
    transition : 0.8s;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.main > .personal-projects-section {
    flex-direction: row-reverse;
}

.main > * > .text {
    max-width: 700px;
}

.presentation-section > .visuals > .logo-ens {
    height: 100px;
    width: 100px;
}

.presentation-section > .visuals > .logo-univ-rennes {
    width : 120px;
    height: 50px;
}

.main > * > .visuals {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main > * > .visuals > .logo-ens {
    position: absolute;
    top: calc(50% + 40px);
    left: calc(50% - 70px);
    transform: translate(-50%,-50%);
}

.main > * > .visuals > .logo-univ-rennes {
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% + 50px);
    transform: translate(-50%,-50%);
}

.main > .presentation-section > .visuals > .blob {
    width: 260px;
    height: 260px;
    position: absolute;
    top : 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(ellipse 100% 70% at 7% -9%, #5e4292 28%, transparent 69%),
                radial-gradient(ellipse 33% 37% at 73% 37%, #140d72 65%, transparent 159%),
                radial-gradient(ellipse 64% 100% at 99% 80%, #b3c513 20%, transparent 54%);

    --r: 50%/50%;
    border-radius: var(--r);
	box-shadow: inset 0px 0px 10px 10px #000;
}

.logo-univ-rennes > path {
    fill : white;
}

.main  a {
    color: white;
    transition: 0.4s;
}

.main a i {
    margin-right: 20px;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

.main a:hover {
    opacity: 0.6;
    color: white;
}

.main a:hover i {
    transform: translateX(19px);
}

.main a:active {
    opacity: 0.4;
    color: white;
}

.suggestion {
    display: flex;
    justify-content: left;
    align-items: center;
}

.main .deco-imgs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 250px;
    height: 250px;
    opacity: 0.5;
    border-radius: 50%/50%;
}

.main {
    overflow-x: hidden;
}

.main .contact-deco-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    transform-origin: center;
    transform: skew(-41deg, 7deg) translate(-85%,-45%);
    border: 2px dashed white;
}

/* Languages */ 

.languages-button > svg {
    height: 18px;
    width: fit-content;
}

.languages-wrapper {
    position: relative;
}


.languages {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background : white;
    width: fit-content;
    box-shadow: 0px 0px 10px grey;
    border-radius: 4px/4px;
    z-index: 100;
}

.languages .flag {
    height: 20px;
    width: fit-content;
}


/* false copy of the languages button */
.languages .languages-button {
    margin-left: 0;
    margin-right: 0;
}

.languages > .language-choice {
    padding-left: 8px;
    padding-right : 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.languages > .language-choice:hover {
    background-color: lightgrey;
}

.languages > .language-choice:active {
    background-color: rgb(182, 176, 176);
}

.languages > .en {
    border-bottom-left-radius : 4px;
    border-bottom-right-radius : 4px;
}

.false-flag-button {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 5px;
    transition: 0.2s;
    cursor: pointer;
    padding: 4px;
    text-decoration: none;
    margin: 0;
}

.false-flag-button:hover {
    opacity: 1 !important;
}