@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&family=Changa+One&family=Comfortaa&family=DM+Sans:opsz,wght@9..40,200&display=swap');


* {
   margin: 0;
   padding: 0;
   justify-content: center;
}

body {
   background-color: #ededed;

}

a {
   text-decoration: none;
   color: #ffffff;
   background-color: #1b2130;
   padding: 8px 15px 5px 15px;
   font-size: 1.1em;
   margin-left: 18px;
   border-radius: 5px 5px 5px 5px;
   font-family: Comfortaa;
}


h1 {
   background-color: #222841;
   text-align: center;
   padding: 50px;
   color: white;
   font-family: arimo;
   font-size: 45px;
   margin-bottom: -15px;
   margin-right: 120px;
   
}


main {
width: 70%;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}


.navflex {
   display: flex;
   background-color: hotpink;
   min-height: 100px;
   padding-top: 50px;
   align-items: center;
   justify-content: center;
   width: 90%;
   margin: auto;
   margin-left: 8%
   
}

header {
   width: 100%;
   background-color: hotpink;
}

nav {
   padding-right: 100px;
   padding-top: 20px;
}





/* .forsideimg {
   margin: 8vh;
   width: 70%;
   display: flex;
   border: 5px solid hotpink;
   background-color: white;
   border-radius: 5px;
   margin: auto;
   margin-top: 60px;
   margin-bottom: 60px;
} */

.forsideimg {
   width: 100%;
   background-image: url(./images/great-hairstyle.jpg);
   background-repeat:no-repeat;
   background-color: white;
   border: 5px solid hotpink;
   border-radius: 5px;
   margin-top: 60px;
   margin-bottom: 60px;
   height: 350px;
   max-width: 1000px;
}




h2 {
   padding-top: 20px;
   padding-bottom: 7px;
   font-family: Comfortaa;
   text-decoration: none;
   font-weight: normal;
   font-size: 19px;
   color: black;
}
p {
   font-size: 13px;
   font-family: Comfortaa;
color: #464646;
padding-left: 20px;
padding-bottom: 10px;
padding-top: 20px;
}

.imgtext {
   padding: 120px;
   margin-left: 400px;
   font-family: Changa One;
   font-size: 2.2em;
   color: #1b2130;
}


.forside4img {
   display: flex;
   /* flex-wrap: wrap; */
   justify-content:space-around;
   /* width: 100%; */
   
}

@media screen and (min-width: 1640px) {
   .forside4img{
     width: 92%;
   }
   .Flexarticle{
      max-width: 87%;
    }
 }



.forsidesmallimg {
   border: hotpink 5px solid;
   margin-left: -5px;
   border-radius: 5px;
   box-shadow: 0px 5px 12px black;
}



.forsideflex4img {
 /* display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 justify-content: space-evenly; */
 width: 18%;
}

.forsideflex4img img {
width: 100%;
/* height: 100%; */
  }

  article {
border: 3px hotpink solid;
   background-color: white;
   padding: 10px;
padding-bottom: 40px;
border-radius: 5px;
  }



  .Flexarticle {
   display: flex;
   border-radius: 5px;
   /* justify-content: space-around; */
   margin-top: 60px;
   margin-bottom: 30px;
   max-width: 1000px;
   
  }


  .hairstyletext {
   background-color: hotpink;
   color: white;
   padding-top: 40px;
   border: 3px pink solid;
   border-radius: 5px;
  }
.hairtext {
   color: white;
   line-height: 2;
}



  .Daringtext {
padding-left: 20px;
  }

  .featured {
 background-color: #1c2036;
 color: white;
 margin-top: -22px;
 width: 150px;
 text-align: center;
 padding-bottom: 10px;
 margin-bottom: 20px;
 font-family: Comfortaa;
 padding-top: 12px;
  }

  .callus {
   margin-top: 20px;
   background-color: hotpink;
display: flex;
border: 3px pink solid;
border-radius: 5px;
margin-bottom: 50px;
  }

.skin {
   margin-top: -10px;
   margin-bottom: -3px;
}
.textnextimg {
   color: white;
   font-size: 20px;
   line-height: 1.8;
}
  .test {
align-items: center;

  }

  .smalltext {
   padding: 0;
  }
.featuredbox {
   display: flex;
   justify-content: left;
   padding-left: 20px;
}
.splitdiv {
   padding-left: 20px;
}

.Hairfeatured {
   background-color: #1c2036;
   color: white;
   width: 150px;
   text-align: center;
margin-left: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
font-family: Comfortaa;
padding-top: 12px;
margin-top: -49px;
}

.logo {
   background-color: rgba(255, 192, 203, 0.397);
   width: 120px;
   padding: 20px;
   /* margin-left: 200px; */
   height: 20px;
   display: flex;
   margin-left: 183px;
   margin-top: -15px;
}

.logoimg {
   padding-left: 14px;
   
}


.footerP {
   color: white;
   text-align: center;
   margin-left: 25%;
   margin-top: -10px;
}

footer {
   display: flex;
   flex-wrap: wrap;
   background-color: hotpink;
   height: 10vh;
   /* align-self: center; */
   color: white;
   padding-top: 50px;
}


a:hover {
   color: hotpink;
}

.logoimg:hover {
   opacity: 0.2;
}

.simon {
   text-decoration: none;
   padding: 0;
   margin: 0;
   background-color: rgba(255, 255, 255, 0);
   color: black;
   font-size: 25px;
}