* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Kanit";
}

body html {
        background-color: rgb(17, 17, 17);
        font-size: 16px;
        overflow: hidden;
        scroll-behavior: smooth;
}
.header {
        display: flex;
        align-items: center;
        justify-content: baseline;
        min-width: 100%;
        height: 100px;
        z-index: 1000;
        background: linear-gradient(to bottom, #3a3d47, transparent);
        position: fixed;
}
.header_title {
        font-family: Dosis;
        color: white;
        font-size: 1.5em;
        margin-left: 80px;
        text-transform: uppercase;
}
.container_leftSide {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: fixed;
        height: 1000px;
        gap: 40px;
        margin-left: 0px;
        margin-top: 35px;
        opacity: 0.7;
        z-index: 999;
        min-height: 100%;
}
.txt_leftSide {
        color: white;
        font-size: 0.7em;
        font-family: oswald;
        font-weight: 200;
        transform: rotate(90deg);
        letter-spacing: 3px;
}
.wrapper_txt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
}
.menu {
        color: white;
        margin-right: 20px;
        font-size: 70px !important;
}
.menu:hover {
        text-shadow: 0px 0px 10px white;
}

/* =================================== */
.imageA {
        background-image: url("./assets/Lana.jpg");
}
.imageB {
        background-image: url("./assets/book\ low-key.jpg");
}
.imageC {
        background-image: url("./assets/VTT\ course.png");
}

.imageD {
        background-image: url("./assets/Photographe\ professionnel\ packshot\ et\ produits.png");
}
.imageE {
        background-image: url("./assets/0O4A4148-2.jpg");
}
.imageF {
        background-image: url("./assets/Portrait_JeÌ_reÌ_mie_et_Morgane_w.png");
}
.imageG {
        background-image: url("./assets/Rayban.jpg");
}
.imageH {
        background-image: url("./assets/Charly.png");
}
.imageI {
        background-image: url("./assets/Amine\ Portrait\ IV.jpg");
}
.image-setting {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
}

/* =================================== */

section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: rgb(17, 17, 17);
        margin-top: 0px;
        gap: 200px;
}
.wrapper-setting-paysage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 1400px;

        /* background-color: rgb(17, 17, 17); */
}
.wrapper-setting-portrait {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 1600px;
        /* background-color: blue; */
}

.content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        opacity: 1;
        /* background-color: green; */
        margin-top: 30px;
}

.content,
p {
        font-size: 1rem;
        text-align: center;
        font-weight: 200;
}

.text {
        color: white;
        font-size: 4.5rem;
}

@keyframes effect {
        from {
                transform: scale(0.5);
                opacity: 0;
        }
        to {
                transform: scale(1);
                opacity: 1;
        }
}

.wrapper-end {
        width: 100%;
        min-height: 500px;
        background-color: rgb(17, 17, 17);
}
a {
        text-decoration: none;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        z-index: 999;
}

/* =================================== */

footer {
        background-color: #3a3c75;
        max-height: 100%;
        width: 100%;
        z-index: 999;
        display: flex;
        padding: 20px;
        flex-direction: column;
        align-items: first baseline;
}
.tel,
.mail {
        cursor: pointer;
        z-index: 1999;
}
.header_footer {
        font-family: Dosis;
        color: white;
        font-size: 1.5em;
        margin-left: 45px;
        text-transform: uppercase;
}
.contact_logos {
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 150px;
        gap: 30px;
        margin-left: 50px;
        background-color: transparent;
}
.contact_logo {
        color: rgb(255, 255, 255);
        transition: 0.1s ease-in-out;
        text-shadow: none;
        transform: scale() rotate();
        z-index: 0;
        font-size: 2em;
}
.contact_logo:hover {
        color: #75c257;
        transform: scale(1.5) rotate(3deg);
}

@media screen and (max-width: 768px) {
        .image-setting {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
}
        section {
                gap: 20px;
        }
        .wrapper-setting-paysage {
                width: 100%;
                height: 800px;
        }
        .text {
                font-size: 2.5rem;
        }
        .wrapper-setting-portrait {
                width: 100%;
                height: 1000px;
        }
        .wrapper-end {
                width: 100%;
                min-height: 100px;
                background-color: rgb(17, 17, 17);
        }
        .content{
                height: 600px;
        }
}