@import url("css/theme/theme.css");
@import url("css/imgviewer.css");
header {
    width:100%;
    position:fixed;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    justify-content:space-evenly;
    flex-direction: row;
    align-items:center;
    z-index: 99;
}


a{
    text-decoration: none;
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

:root {
    color: var(--md-sys-color-on-surface);
}
#root{
    background-size: cover !important;
    background-blend-mode: normal;
    background: linear-gradient(0deg,#31375f39 0%,rgb(17 19 24) 10%,rgb(17 19 24) 78%,rgba(136, 128, 62, 0.13) 92%,rgba(136, 128, 62, 0.13) 100% ),url("images/landing.png");
}

.Ludo{
    display:flex;
    flex-wrap:nowrap;
    flex-grow:4;
    text-wrap: wrap;
    padding:0;
    flex-basis: 0;
    img{margin: auto 0.5em;}
    flex-direction: row;
}

@media all and (max-width: 675px) {
    .Ludo{
        display:flex;
        flex-wrap:nowrap;
        flex-grow:0;
        text-wrap: wrap;
        padding:0;
        flex-basis: 0;
        img{margin: auto 0.5em;}
        flex-direction: row;
    }
}

.Infos{
    display:flex;
    flex-grow:0.8;
    gap:1em;
    flex-basis: 25em;
    justify-content:space-evenly;
    align-items:center;
    text-align: center;
    flex-direction: row;
    flex-wrap:wrap;
}

.blurred-picture{
    background-image: url("images/blurred.png");
    margin:0;
    height: 30em;
    width: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.Intro{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    /*height:10em;*/
    align-items: center;
    text-align:center;
    justify-content:space-evenly;
    width:50vw;
}
.Main{
    width:95%;
    max-width: 90rem;
    margin: auto;
    padding-bottom: 3em;
    
}
.buttonCV, .buttonProjets, .buttonComp, .buttonForm
{
    cursor: pointer;
}
.buttonCV, .buttonProjets, .buttonComp, .buttonForm
{
    cursor: pointer;
    padding: 0.25em 0.5em;
}
.buttonCV:hover, .buttonProjets:hover, .buttonComp:hover, .buttonForm:hover
{
    cursor: pointer;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: 1rem;
    overflow: hidden;
    padding: 0.25em 0.5em;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4em 0px;
}

.Projets, .FormationTitle,.CVHEAD{
    text-align: center;
    margin: 0;
    padding: 1em 1.5em;
}

.Projet, .Formation{
    text-align: left;
    margin:0;
    padding: 1em 1.5em;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4em 0px;
    background-color: var(--md-sys-color-surface-container);

}
.CV{
    text-align: center;
    margin: 0 auto;
    width: 50%;
}

.picture {
    transform: translate(0, -50%);
    height:40vw;
    max-height:30em;
    z-index:2;
    box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.5);
    border-radius:50%;
}

.big-div{
    display:flex;
    width:80%;
    margin: 0 auto;
    justify-content: space-evenly;
    flex-wrap:wrap;
    flex-direction:row-reverse;
}

.post{
    width:95%;
    display:flex;
    padding: 1em;
    flex-direction:column;
    margin: 1em auto;
}

.post-footer{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.Projects-list{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
}

.separator{
    width: 250px;
    height: 3px;
    margin: 1rem auto;
}
.text-container{
    margin: auto;
    padding: 1.5em 1em;
}
.button{
    border-radius:0.5em;
    padding: 0.5em 1em;
    background-color: var(--md-sys-color-primary);
    color : var(--md-sys-color-on-primary);
}
.android{
    display: block;
    text-align: center;
    width: 50%;
    height: 50%;
    margin: 1em auto;
    border-radius: 1em;
}

Footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    color: var(--md-sys-color-on-background);
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1em;
    gap: 2em;
}