* {
    box-sizing: border-box;}



body
{
color:#8F2C49;
background-color:#fee;
background-image:url(bow.jpg);
font-size:20px;
margin:10px;
}

h1
{text-align:center;
color:#8F2C49;
text-shadow:2px 1px 4px black;
font-size:40px;
text-transform: capitalize;
}

h2
{text-align:center;
font-size:30px;
color:#8F2C59;
text-shadow:1px 1px 2px black;
}
.skin
{text-align:center;
font-size:20px;
}
.navA{
padding: 20px 30px;
text-align:center;
 margin-right: 10px;
gap:12px;
display:flex;
justify-content: space-between;
}

.ab:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}

.ab:hover
{font-size:27;
text-shadow:2px 2px 1px pink;
text-decoration:none;}

.abc:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}
.abc:hover
{font-size:27;
text-shadow:2px 2px 1px pink;
text-decoration:none;}

.abcd:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}
.abcd:hover
{font-size:27;
text-shadow:2px 2px 1px pink;
text-decoration:none;}

.abcde:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}
.abcde:hover
{font-size:27;
text-shadow:2px 2px 1px pink;
text-decoration:none;}

.hero:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}
.hero:hover
{font-size:27;
text-shadow:2px 2px 1px pink;
text-decoration:none;}

.heroo:link
{color:pink;
text-shadow:1px 1px 2px black;
font-size:25px;
text-decoration:none;
}
.heroo:hover
{font-size:27;
text-shadow:2px 2px 1px hotpink;
text-decoration:none;}

a:active
{color:black;
font-size:29px;}


.articles {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;}

.article {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    transition: transform 0.3s;
}

.article:hover {
    transform: translatex(10px);}

.article img {
    width: 100%;
    border-radius: 8px;}

.article p {
    font-size: 16px;
    margin-bottom: 20px;}

.step
{text-align:center;

}
.step
 img{opacity:.5;
border:solid;
border-color:pink;}

/* Footer Styles */
.footer {
    background-color: #212121;
    color: white;
    padding: 60px;
    text-align: center;
    margin: 0px;
}

.footer p {
    margin: 10px ;
}

.footer a {
    color: #e91e63;
    text-decoration: none;
margin:0px;
}

.footer a:hover {
    text-decoration: underline;
}

/*skincare pages*/
.skin
{font-size:15px;
}


.skinP
{text-align:center;
}

.parts
{
text-align:center;
max-width: 100%;

}



/*haircare pages*/
.hair
{text-align:center;
}
.ce
{text-align:center;



/*toolsss*/

.decors{
display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;}


.decor{
    background-color:pink;
    padding:20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
    display:flex;}


.decor:hover{
    transform: translateY(10px);}

.decor img {
    width: 100%;
    border-radius: 8px;}

.decor p {
font-size: 16px;
    margin-bottom: 20px;}




/*makeup*/
.edit
{text-align: center;
}

/*aloveraaa*/

.vera img
{opacity:0.9;
max-width:100%;
}


/*acid*/
.pic
{opacity:.8;
max-width:100%;}

/*spf*/
.sp
{opacity:.9;
max-width:100%;}

/*onion*/

.on
{opacity:.6;
max-width:100%;
text-align:center;
}

.on:hover
{transform: scale(.5,.5);
opacity:.8;
}


/*conditioner*/

0
.jj 
{text-align:center;
opacity:.8;}




.jj:hover
{opacity:1;
transform:scale(0.7,0.7);}














</style>