@font-face {
    font-family: 'TextFont';
    src: url("../Fonts/FoundersGroteskCond-Lt.otf");
}

@font-face {
    font-family: 'TextFontMd';
    src: url("../Fonts/FoundersGroteskCond-Med.otf");
}

@font-face {
    font-family: 'TextFontBd';
    src: url("../Fonts/FoundersGroteskCond-SmBd.otf");
}

@font-face {
    font-family: 'Pagkaki';
    src: url("../Fonts/PAGKAKI-Regular.otf");
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #FDEFE2;
    font-family: 'TextFont';
    overflow: hidden;   
    font-size: 1.1rem;
    background-image: url("../IMG/Shapes/forme\ 8\ beige.png");
    background-repeat: no-repeat;
    background-size: cover;

    color: #192845;

    text-align: justify;
}

a {
    text-decoration: none;
    color: #192845;
}

h1 {
    font-family: 'Pagkaki';
    font-size: 1.8rem;
}

header {
    position: absolute;
    top: 0;
    right: 0%;
    z-index: 1000;

}

.header_right {
    float: right;

}

header a {
    float: left;
    text-align: center;
    padding: 1vw;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;

}

.header_home:hover {
    background-image: url(../IMG/Shapes/forme\ 0\ mandarine_rotated.png);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}

.header_projects:hover {
    background-image: url(../IMG/Shapes/forme\ 0\ bleu_rotated.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}

.header_valeurs:hover {
    background-image: url(../IMG/Shapes/forme\ 0\ magenta_rotated.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}

.header_activites:hover {
    background-image: url(../IMG/Shapes/forme\ 0\ jaune_rotated.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}

.header_contact:hover {
    background-image: url(../IMG/Shapes/forme\ 0\ magenta_rotated.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}

.shapes {
    overflow: hidden;
}

.shape1,
.shape2,
.shape3,
.shape4,
.shape5,
.shape6,
.shape7,
.shape8,
.shape9,
.shape10 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    height: 25vh;
    width: 25vw;
    transition: all 300ms linear;
    z-index: 1;
}

.footer {
    position: absolute;
    bottom: 0%;
    right: 1%;
    font-size: 16px;
    z-index: 999;

}

@media (max-width: 900px) {
    body {
        overflow: auto;
        font-size: 1rem;
    }
}