@import url('http://fonts.cdnfonts.com/css/motiva-sans');

html {
  scroll-behaviour:smooth;
  box-sizing: border-box;
}

body {
  min-width:290px;
  color:#fff;
  background-color:black;
  font-family:'open sans', arial, sans-serif;
  line-height:1.5;
}

p{
  margin-bottom:10px;
}

/* Navigation */
#navbar {
  position:fixed;
  min-width:290px;
  top:0px;
  left:0px;
  width:400px;
  height:100%;
  max-height:100%;
  background-color:rgba(0, 0, 0, 0.85);
}

#navbar ul {
  height:88%;
  padding:0;
  margin:0;
  overflow-y:auto;
  overflow-x:hidden; 
}

/* Custom dot points */
.custom-list {
  list-style:none;
  padding-left:0;
}

.custom-list li{
  position:relative;
  padding-left:10px;  
}

.custom-list li:before {
  content:'';
  width:40px;
  height:30px;
  position:absolute;
  background-image: url('https://i.ibb.co/r2KzmcT/neon-arrow.png');
  background-size:cover;
  left:40px;
  top:50%;
  transform: translateY(-50%);
}

.custom-list ul li {
  margin:0; 
  padding:0; 
  
}

.custom-list a{
  display:block;
  font-size:16px;
  font-family:'Motiva Sans', sans-serif;
  padding:5px 90px;
  position:relative;
  text-decoration:none;
  cursor:pointer;
  width:260px;
  color: #fff;
  text-shadow:
      0 0 15px rgba(255, 255, 255, 0.5);
}

/*  Navbar- Changing  background colour */
.custom-list a:hover{
  text-shadow:none;
  color:#000;
  font-weight:none;
  -webkit-animation: 10000ms ease-in-out infinite color-change;
}

@-webkit-keyframes color-change {
  0% {
    background-color: rgba(253, 113, 202, 0.7);
  }
  40% {
    background-color: rgba(252, 77, 188, 0.7);
  }
  60% {
    background-color: rgba(194, 82, 248, 0.7);
  }
  80% {
    background-color: rgba(206, 123, 246, 0.7);
  }
  100% {
    background-color: rgba(253, 113, 202, 0.7);
  }
}


/* Makeup Header */
#make-up-logo {
  margin:0 10px;
  width:350px;
  height:auto;
}
#navbar header{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Main Image */
img{
  width:100%;
  height:auto;
  object-fit:cover; 
}

/* All images */
#main-doc img{
  box-shadow:1px 1px 15px black;
  margin-top:30px;
  margin-bottom:30px;
}

/** Main-text **/
#main-doc header{
  text-align: left;
  margin:0;
}

/* Main-doc color change */
#main-doc {
  position: absolute;
  margin-left:392px;
  padding:40px;
  margin-bottom:110px;
  animation: 10000ms ease-in-out infinite color-change;
}

@keyframes color-change {
  0% {
    background-color: rgba(253, 113, 202, 0.8);
  }
  40% {
    background-color: rgba(252, 77, 188, 0.8);
  }
  60% {
    background-color: rgba(194, 82, 248, 0.8);
  }
  80% {
    background-color: rgba(206, 123, 246, 0.8);
  }
  100% {
    background-color: rgba(253, 113, 202, 0.8);
  }
}

 #main-doc > .main-section {
  width:80%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:start;
  margin-left:10%;
}

section article {
  color:#000;
  font-family:'Motiva Sans', sans-serif;
  font-weight:200;
  font-size:16px;
  text-align:justify;
}

section {
  margin-top:30px;
}

/* Header */
header {
  font-family:'Motiva Sans', sans-serif;
  font-weight:900;
  color:#000;
  margin-top:40px;
  margin-bottom: 20px;
  font-size:2.5rem;
  text-transform:uppercase;
}

/* All images positioned left */
.center-img {
  display:flex;
  justify-content:space-between;
  align-items:start;
}

.center-img img{
  height:400px;
  width:300px;
  margin-right:40px;
}
.para-right p li{
  margin-left:5px;
}


/* All images centered right */

.center-right {
  display:flex;
  justify-content:space-between;
  align-items:start;
}

.center-right img{
  height:400px;
  width:300px;
  margin-left:30px;
}
.para-left p li{
  margin-right:5px;
  padding:10px;
}


/* Introduction */
#Introduction h4 {
  text-align:center;
  text-transform:uppercase;
  font-size:1.5rem;
}

.experts {
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}

.matin {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:45%;
  list-style:none;
}

.amanda {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:45%;
  list-style:none;
}

.matin img{
  height:80%;
  width:80%;
}

.amanda img{
  height:80%;
  width:80%;
}

/* Conceal for coverage */
.comparison {
  display:flex;
  justify-content:space-between;
}

.comparison img {
  height:auto;
  width:49%;
}

/* Stick on some false lashes */
.lashes li{
  padding:30px;
  text-align:left;
}

/* Reference */
.ref li{
    list-style:none;
}

@media only screen and (max-width:815px) {
  /* for mobile phones */
  
  /* Navigation */
#navbar {
  position:absolute;
  top:0;
  padding:0;
  margin:0;
  width:100%;
  max-height:155px;
  background-color:rgba(0, 0, 0, 0.5);
  z-index:1;
}
  
  .custom-list {
    display:flex;
    flex-direction:column;
    align-items:center;
  }
 
/* Makeup Header */
#make-up-logo {
  margin:0 10px;
  width:350px;
  height:auto;
}  
  header {
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  /* Main Image */
img{
  width:100%;
  height:300px;
  object-fit:cover; 
}
  /* Main-doc */
#main-doc {
  position: relative;
  margin-left:0;
  padding:20px;
  margin-bottom:110px;
}
  
 #main-doc > .main-section {
  width:80%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}  
  
 section article {
  color:#000;
  font-family:'Motiva Sans', sans-serif;
  font-weight:200;
  font-size:16px;
  text-align:justify;
} 
  
  header {
    font-size:20px;
  }  
  
/* All images positioned left */
.center-img {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.center-img img{
  height:100%;
  width:100%;
  margin-left:40px;
}  
  
/* All images centered right */

.center-right {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.center-right img{
  height:100%;
  width:100%;
  margin-right:40px;
}  
  
/* Introduction */
#Introduction h4 {
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
}  
 
.experts {
  display:flex;
  flex-direction:column;
  justify-content:center;
}  

.matin {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:100%;
  list-style:none;
}

.amanda {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:100%;
  list-style:none;
}  

  
}