@font-face {
    font-family: 'Agrandir';
    src: url(Typo/Agrandir_Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Agrandir Title';
    src: url(Typo/Agrandir_GrandHeavy.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Agrandir Description';
    src: url(Typo/Agrandir_GrandLight.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}



p {
    font-family: "Agrandir";
}

a {
    text-decoration: none;
    color: black;
    font-weight: 36px;
}

.header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    padding: 30px;
    margin: 20px;
}

@media(max-width:820px) {
    .header {
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px;
        margin: 10px;
    }
}

@media(max-device-width:820px){
    .header {
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px;
        margin: 10px;
    }
}


h1 {
    padding: 12px;
}

@media(max-width:820px) {
    h1 {
        padding: 0px;
        margin:0px;
        grid-column: 1/-1;
    }
}

@media(max-device-width:820px){
    h1 {
        padding: 0px;
        margin:0px;
        grid-column: 1/-1;
    }
}

.header-nav {
    font-family: "Agrandir Title", sans-serif;
    font-size: 20px;
    text-align: right;
    padding-top: 48px;
    margin: 15px;
    grid-column: 2/-1;
}

@media(max-width:820px) {
    .header-nav {
        padding-top: 20px;
        font-size: 18px;
        grid-column: 1/-1;
        text-align: center;
        margin: 0px;
    }
}

@media(max-width:440px) {
    .header-nav {
        font-size: 14px;
    }
}

@media(max-device-width:820px){
    .header-nav {
        padding-top: 20px;
        font-size: 18px;
        padding-right: 8px;
        grid-column: 1/-1;
        text-align: center;
    }
}

@media(max-device-width:400px) {
    .header-nav {
        font-size: 14px;
        padding-top: 20px;
    }
}



.logo {
    display: inline;
    width: 70%;
    grid-column: 1/2;
}


@media(max-width:820px) {
    .logo {
        width:80%;
        align-self: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-device-width:600px) {
    .logo {
        width:80%;
        align-self: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}


.main {
    margin: 50px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 20px;


}

@media(max-width:820px) {
    .main {
        display: grid;
        grid-template-columns: 1fr;

    }
}

@media(max-device-width:800px){
    .main {
        display: grid;
        grid-template-columns: 1fr;

    }

}

.main-link {
    margin-bottom: 60px;
}

@media(max-device-width:500px){
    .main-link {
        margin-bottom: 80px;
    }

}

.main-link:hover img {
    box-shadow: 0px 0px 12px rgb(134, 134, 134);
    transition: 0.3s;
}

.project-home{
    align-self: center;
}



.project {
    font-family: "Agrandir Title", sans-serif;
    font-size: 30px;
    margin-bottom: 0;
    margin-top: 0px;
    grid-column: 2/2;
    padding-bottom: 5px;
    text-align: right;
}

@media(max-width:800px) {
    .project {
        font-size: 35px;
        grid-column: 1/-1;
    }
}

@media(max-width:620px) {
    .project {
        font-size: 30px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-width:375px) {
    .project {
        font-size: 20px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:800px) {
    .project {
        font-size: 35px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:620px) {
    .project {
        font-size: 50px;
        text-align: center;
        grid-column: 1/-1;
    }
}




.description {
    font-family: "Agrandir Description", sans-serif;
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 5px;
    padding: 5px;
    grid-column: 2/2;
    text-align: right;
}

@media(max-width:800px) {
    .description {
        grid-column: 1/-1;
        font-size: 20px;
        margin-bottom: 10px;
    }
}

@media(max-width:620px) {
    .description {
        font-size: 17px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-width:375px) {
    .description {
        text-align: center;
        grid-column: 1/-1;
        font-size: 13px;
    }
}

@media(max-device-width:800px) {
    .description {
        grid-column: 1/-1;
        font-size: 17px;
        text-align: center;
    }
}

@media(max-device-width:620px) {
    .description {
        font-size: 15px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:375px) {
    .description {
        text-align: center;
        grid-column: 1/-1;
        font-size: 13px;
    }
}


.presentation {
    grid-column: 2/3;
    width: 100%;
}

@media(max-width:800px) {
    .presentation {
        display: block;
        align-content: center;
        grid-column: 1/-1;
    }
}

@media(max-width:620px) {
    .presentation {
        font-size: 15px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-width:375px) {
    .presentation {
        display: block;
        align-content: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:800px) {
    .presentation {
        display: block;
        align-content: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:620px) {
    .presentation {
        font-size: 15px;
        text-align: center;
        grid-column: 1/-1;
    }
}

@media(max-device-width:375px) {
    .presentation {
        display: block;
        align-content: center;
        grid-column: 1/-1;
    }
}

.bio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 20px;
}

@media(max-width:580px) {
    .bio {
        display: grid;
        grid-template-columns: 1fr;
        margin: 20px;
    }
}

@media(max-device-width:580px) {
    .bio {
        display: grid;
        grid-template-columns: 1fr;
        margin: 20px;
    }
}

.bio-txt {
    display: grid;
    grid-column: 2/2;
    margin: 10px;
}

@media(max-width:580px) {
    .bio-txt {
        display: grid;
        grid-column: 1/1;
    }
}
@media(max-device-width:580px) {
    .bio-txt {
        display: grid;
        grid-column: 1/1;
    }
}



.project-desc {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 20px;
    margin: 50px;
    padding-right: 50px;

}

@media(max-width:650px) {
    .project-desc {
        display: grid;
        grid-template-columns: 50% 50%;
        margin: 20px;
        padding-right: 0px;
    }
}

@media(max-device-width:650px) {
    .project-desc {
        display: grid;
        grid-template-columns: 50% 50%;
        margin: 20px;
        padding-right: 0px;
    }
}

.project-name {
    font-family: "Agrandir Title", sans-serif;
    font-size: 100px;
    grid-column: 1/-1;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0;
}

@media(max-width:695px) {
    .project-name {
        font-size: 70px;
    }
}

@media(max-width:600px) {
    .project-name {
        font-size: 40px;
    }
}

@media(max-width:375px) {
    .project-name {
        font-size: 30px;
        grid-column: 1/-1;
        margin-left: 20px;
    }
}

@media(max-device-width:695px) {
    .project-name {
        font-size: 70px;
    }
}

@media(max-device-width:600px) {
    .project-name {
        font-size: 40px;
    }
}

@media(max-device-width:375px) {
    .project-name {
        font-size: 30px;
        grid-column: 1/-1;
        margin-left: 20px;
    }
}


.project-name-fougue {
    font-family: "Agrandir", sans-serif;
    font-size: 80px;
    grid-column: 1/-1;
    margin-left: 30px;
    margin-top: 14px;
    margin-bottom: 0;
}

@media(max-width:375px) {
    .project-name-fougue {
        font-size: 40px;
        margin-left: 20px;
        margin-top: 14px;
    }
}
@media(max-device-width:375px) {
    .project-name-fougue {
        font-size: 40px;
        margin-left: 20px;
        margin-top: 14px;
    }
}

.description-project-0 {
    font-family: "Agrandir Description", sans-serif;
    font-size: 18px;
    margin: 40px;
    grid-column: 1/2;
    text-align: right;
}

@media(max-width:650px) {
    .description-project-0 {
        font-size: 14px;
        margin: 20px;
        grid-column: 1/-1;
        text-align: left;
    }
}

@media(max-device-width:650px) {
    .description-project-0 {
        font-size: 14px;
        margin: 20px;
        grid-column: 1/-1;
        text-align: left;
    }
}


.description-project-1 {
    font-family: "Agrandir", sans-serif;
    font-size: 18px;
    margin-top: 20px;
    padding-top: 20px;
    grid-column: 2/4;
    text-align: left;
}

@media(max-width:860px) {
    .description-project-1 {
        grid-column: 2/-1;
    }
}

@media(max-width:650px) {
    .description-project-1 {
        font-size: 14px;
        margin: 10px;
        padding: 10px;
        grid-column: 1/-1;
        text-align: left;
    }
}

@media(max-device-width:860px) {
    .description-project-1 {
        grid-column: 2/-1;
    }
}

@media(max-device-width:650px) {
    .description-project-1 {
        font-size: 14px;
        margin: 10px;
        padding: 10px;
        grid-column: 1/-1;
        text-align: left;
    }
}

.quote {
    grid-column: 1/-1;
    font-size: 36px;
    text-align: center;
    align-self: center;
}

@media(max-width:650px) {
    .quote {
        font-size: 20px;
    }
}

@media(max-device-width:650px) {
    .quote {
        font-size: 20px;
    }
}

.quote-side {
    font-family: "Agrandir", sans-serif;
    font-size: 50px;
    grid-column: 1/3;
    text-align: center;
    align-self: center;

}

@media(max-width:650px) {
    .quote-side {
        font-size: 25px;
        grid-column: 1/-1;
    }
}

@media(max-device-width:650px) {
    .quote-side {
        font-size: 25px;
        grid-column: 1/-1;
    }
}

.project-picture-center {
    width: 100%;
    align-content: center;
    display: block;
    margin-top: 20px;
    grid-column: 2/4;
}

@media(max-width:650px) {
    .project-picture-center {
        grid-column: 1/-1;
    }
}
@media(max-device-width:650px) {
    .project-picture-center {
        grid-column: 1/-1;
    }
}

.project-picture-l {
    width: 100%;
    align-content: center;
    display: block;
    margin-top: 20px;
    grid-column: 1/3;
}

@media(max-width:650px) {
    .project-picture-l {
        grid-column: 1/-1;
    }
}

@media(max-device-width:650px) {
    .project-picture-l {
        grid-column: 1/-1;
    }
}

.project-picture-l-archi {
    width: 100%;
    align-content: center;
    display: block;
    margin-top: 80px;
    margin-bottom: 60px;
    grid-column: 1/3;
}

@media(max-width:650px) {
    .project-picture-l-archi {
        grid-column: 1/-1;
    }
}
@media(max-device-width:650px) {
    .project-picture-l-archi {
        grid-column: 1/-1;
    }
}


.project-picture-r {
    width: 100%;
    align-content: center;
    display: block;
    margin-top: 20px;
    grid-column: 3/5;
}

@media(max-width:650px) {
    .project-picture-r {
        grid-column: 1/-1;
    }
}
@media(max-device-width:650px) {
    .project-picture-r {
        grid-column: 1/-1;
    }
}

.project-picture-r-archi {
    width: 100%;
    align-content: center;
    display: block;
    margin-top: 80px;
    margin-bottom: 60px;
    grid-column: 3/5;
}

@media(max-width:650px) {
    .project-picture-r-archi {
        grid-column: 1/-1;
    }
}
@media(max-device-width:650px) {
    .project-picture-r-archi {
        grid-column: 1/-1;
    }
}

.project-picture-all {
    width: 100%;
    align-content: center;
    grid-column: 1/-1;
    margin-top: 20px;
}


.project-picture-gif {
    width: 100%;
    grid-column: 3/5;
    margin-top: 20px;
}
@media(max-width:820px) {
    .project-picture-gif {
        grid-column: 1/-1;
    }
}
@media(max-device-width:820px) {
    .project-picture-gif {
        grid-column: 1/-1;
    }
}


@media(max-width:650px) {
    .Zodiaque {
        grid-column: 1/-1;
    }
}
@media(max-device-width:650px) {
    .Zodiaque {
        grid-column: 1/-1;
    }
}

.Mozaique{
    align-self: center;
    grid-column: span 2;
    display: inline;
    width:100%;
    padding-top:20px;
}

@media(max-width:650px) {
    .Mozaique{
        grid-column: 1/-1;
    }
}

@media(max-device-width:650px) {
    .Mozaique {
        grid-column: 1/-1;
    }
}


.Videosquare{
    align-self: center;
    grid-column: span 2;
    display: inline;
    width:100%;
    padding-top:20px;
}

@media(max-width:650px) {
    .Videosquare {
        grid-column: 1/-1;
    }
}

@media(max-device-width:650px) {
    .Videosquare {
        grid-column: 1/-1;
    }
}

.Mozaique4 {
    align-self: center;
    grid-column: span 1;
    display: block;
    width: 100%;
    padding-top: 20px;
}

@media(max-device-width:300px) {
    .Mozaique4 {
        grid-column: span 2;
    }
}