body {
padding-left: 50px;
padding-right: 50px;
font-size: 1em;
line-height: 30px;
font-family: 'Libre Baskerville', 'sans-serif';
text-align: justify;
word-spacing: 2px;
}
.txt {
padding-top: 50px;
padding-bottom: 50px;
}
h2 {
margin-bottom: 50px;
text-align: center;
font-weight: bold;
color: #ee33bb;
}
@font-face{ 
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: normal;
src: url('libre-baskerville/LibreBaskerville-Regular.otf');
}
@font-face{ 
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: bold;
src: url('libre-baskerville/LibreBaskerville-Bold.otf');
}
@font-face{ 
font-family: 'Libre Baskerville';
font-style: italic;
font-weight: normal;
src: url('libre-baskerville/LibreBaskerville-Italic.otf');
}
.top-image {
display: flex;
min-height: 500px;
background-image: url("img/logo.jpg");
background-size: contain;
background-position: 50% 0;
background-repeat: no-repeat;
}
.button {
display: inline-block;
margin-top: 50px;
margin-bottom: 50px;
padding: 15px;
color: #ffffff;
font-size: 1.1em;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
border-radius: 10px;
background-color: #f055cc;
transition: background-color 200ms ease;
}
.button:hover {
background-color: #ee33bb;
}

.aboutMeLeft {
display: inline-block;
width: 45%;
}
.aboutMeRight {
display: inline-block;
width: 45%;
padding-left: 30px;
vertical-align: top;
}
.aboutMeIMG {
width: 95%;
height: 100%;
max-width: 500px;
min-height: 600px;
border-radius: 10px;
border-bottom-right-radius: 25px;
background-image: url("img/karine.jpg");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}

.lesSoins {
text-align: center;
vertical-align: top;
}
.soin {
display: inline-block;
overflow: hidden;
width: 30%;
min-width: 200px;
max-width: 300px;
margin-top: 50px;
margin-left: 1%;
margin-right: 1%;
padding: 15px;
color: #ffffff;
font-size: 1.1em;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
border-radius: 10px;
background-color: #f055cc;
}

.produit {
width: 100%;
min-width: 200px;
max-width: 300px;
}

@media screen and (max-width:990px) {
.top-image {
min-height: 500px;
background-position: 50% 10%;
background-size: contain;
}
}
@media screen and (max-width:780px) {
.top-image {
min-height: 400px;
background-position: 50% 20%;
background-size: contain;
}
}
@media screen and (max-width:480px) {
.top-image {
min-height: 400px;
background-position: 50% 30%;
background-size: contain;
padding-top: 0px;
}
.top {
padding-top: 0px;
}
.aboutMeLeft {
display: inline-block;
width: 100%;
}
.aboutMeRight {
display: inline-block;
width: 100%;
padding-left: 0;
vertical-align: top;
}
.aboutMeIMG {
width: 100%;
}
}