@font-face {
    font-family: Antique;
    src: url(/fonts/Antique-Legacy-Regular.woff2);
}

:root{
    --gap: 18px;
}

h1, h2, h3, a, p{
    font-family: Antique;
    text-transform: none;  
}

img{
    max-width: 100%;
}
body{
    padding-bottom: var(--gap);
}
.textBouton{
    font-size: 18px;
    transition: all .3s ease;
}

header{
    display: grid;
    grid-template-columns: 60% 40%;
    column-gap: var(--gap);
    position: fixed;
    width: calc(100vw - var(--gap) - var(--gap));
    background-color: white;

    padding-left: var(--gap);
    padding-right: var(--gap);
    padding-top: var(--gap);

    z-index: 2;
}
main{
    padding: 36px var(--gap) 0px var(--gap);
    display: grid;
    grid-template-columns: 60% 40%;
    column-gap: var(--gap);
}
.navigation{
    display: flex;
}
.marginRight{
    margin-right: var(--gap);
}
.bouton{
    border-bottom: 1.5px solid black;  
}
.bouton:hover .textBouton{
    opacity: 25%;
}
.navBouton{
    width: calc(100%/3);
}
.active{
    opacity: 25%;
}
.multiText{
    display: grid;
    grid-template-columns: 20% 20% 20%;
}

.marginTop{
    margin-top: 5px;
}

.one{
    grid-column: 1/2;
}
.two{
    grid-column: 2/3;
}
.three{
    grid-column: 3/4;
}

.imgsContainer{
    width: calc(100% - var(--gap));
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: var(--gap);
    row-gap: var(--gap);
}

.half{
    grid-column: span 1;
}

.full{
    grid-column: span 2;
}

.projectImg{
    width: 100%;
    background-color: rgb(255, 255, 255);
    object-fit: cover;
}


.projetTexte{
    padding-top: 22px;
    width: calc(100% - var(--gap));
    position: fixed;
    width: calc(40% - 36px);
    right: 18px;

}

.paragraphe{
    text-indent:30px;
    margin-bottom: 30px;
}