/* reset css*/

html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-wrap-style: balance;

}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #F7D581;
}




/* premier div top logo plus icon perceuse et boite*/

.top {
    height: 200px;
    display: flex;
    padding-left: 30px;

    gap: 21%;
}

.logo {
    width: 117.623px;

    align-self: self-start;
}


.perceuse {
    width: 141px;

    align-self: center;
}

.boite {
    width: 157px;

    align-self: center;
}



/* deuxième div middle clef et lettre*/

.middle {
    position: relative;
    height: 425px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 55px;

}

.cercle {
    width: 115px;


}

.mail {
    width: 141px;


}


/* troisième div bottom mme tikit,camino,clef,mr tikit*/

.bottom {
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;

}

.Mmetikit {
    width: 259px;

}

.camion {
    width: 157px;

}

.clef {
    width: 138px;

}

.Mtikit {
    width: 259px;

}

.laptop {
    position: absolute;
    background-image: url(../../img/images-maintenance/ordinateur.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: -25px;
    width: 715px;
    height: 500px;
    padding: 45px 138px 30px 127px;
}

h1 {
    text-align: center;
    color: lavender;
    font-family: "Agbalumo", serif;
    font-weight: 400;
    font-style: normal;
}

h2 {
    font-style: italic;
    color: lavender;
    font-family: "Alkatra", serif;
    font-optical-sizing: auto;
    font-weight: 400;

}

.merci {
    position: absolute;
    bottom: 5px;
    right: 20px;
    font-size: 1rem;
    font-family: "Alkatra", serif;
    color: #896d28;
}

/* media queries mobile*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* premier div top logo plus icon perceuse et boite*/

    .top {
        height: 125px;
        padding-left: 10px;
        padding-bottom: 0px;
        gap: 0%;
        justify-content: space-around;

    }

    .logo {
        width: 53.623px;

    }


    .perceuse {
        width: 67px;


    }

    .boite {
        width: 67px;


    }

    .middle {

        height: 495px;

    }

    .laptop {

        top: 220px;
        width: 368px;
        padding: 14px 64px 10px 63px;
    }

    .Mmetikit {
        width: 114px;

    }

    .camion {
        width: 70px;

    }

    .clef {
        width: 54px;

    }

    .Mtikit {
        width: 128px;

    }

    h1 {
        font-size: large;
    }

    h2 {
        font-size: medium;
    }

}