body{
    margin:0;
    font-family: 'Darker Grotesque', sans-serif;
    line-height: 1;
    
}
h1{
    font-family: 'Darker Grotesque', sans-serif;
    font-size: 50px;

}
header h1 {
    font-family: 'Darker Grotesque', sans-serif;
    font-weight: normal;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 30px;
    position: absolute;
    top: 30px;
    left: 30px;
}

h2{
    font-family: 'Cardo', serif;
    font-size: 60px;
}

/* header styles*/
header {
    background-color: #ffffff;
    background-image: url( header\ picture.jpg) ;
    padding-top: 320px;
    padding-bottom: 320px;
    color: white;
    background-position: center center;
    background-size: cover,cover;
    background-image:  linear-gradient(90deg, rgba(27, 27, 27, 0.493)50%,rgba(225,224,219, 0.582)50% ),url( header\ picture.jpg ); 
    
}
header a {
    color: black;
    text-decoration: none;
}
header a:hover { 
    text-decoration: underline; 
}

header nav {
    font-size: 20px;
    line-height: 30px;
    position: absolute;
    top: 30px;
    right: 30px;
}
header nav ul {
    list-style: none; 
}
header nav li {
    display: inline;
    margin-left: 50px; 
}
header h2{
    margin-right: 40px;
    text-align: left;
    color:black;

    
}
header p{
    text-align: left;
    margin-right: 40px;
    color:white;
    width:450px;
    margin-left: 30px;

}
p{
    font-size:22px;

}


.transition-four {margin-top:30px;text-align:center;}
.transition-four  ul {font-size:24px; display:inline;}
.transition-four  ul li {display:inline; padding-right:40px;}
.transition-four  ul li a {text-decoration:none; color:rgb(0, 0, 0);-webkit-transition: color.3s linear,border.3s linear; -moz-transition: color  .3s linear,border.3s linear;; -ms-transition: color  .3s linear,border.3s linear; -o-transition: color .3s linear,border.3s linear; transition: color .3s linear,border.3s linear;}
.transition-four  ul li a:hover{color:rgb(255, 255, 255); border-bottom:solid;}
/*items*/
#items{
    text-align: left;
    font-size: 40px;
    font-family: 'Cormorant Infant', serif;

    margin-right: 40px;
    padding-top: 120px;
    padding-bottom: 230px;
}
#items ul{
    list-style: none; 
    margin: bottom 50px;
}
#items li{
    margin-right: 50px; 
    padding-top: 20px;

}
#items a {
    color: black;
    text-decoration: none;
}
#items a:hover { 
    text-decoration: underline;
}

.hiddenimg {
    display: none;
    position: absolute ;
    left: 400px;
    padding-bottom:50px;
    
    
}
  
.hiddentxt {
    font-weight: bold;
    color: black;

}
  
.hiddentxt a {
    color: black;
    text-decoration: none;
}
  .hiddenclick {
    font-weight: bold;
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .hiddenclick a {
    color: black;
    text-decoration: none;
  }
  
  .hiddenclick a:visited {
    color: black;
    text-decoration: none;
  }
  
  .hiddentxt:hover ~ .hiddenimg {
    display: block;
   

  }
  
  .hiddenclickimg {
    display: none;
  }
  
  
  
  
  /* MISC */
  pre {
    background-color: #DDD;
    padding: 10px;
    width: 350px;
    margin-left: 50px;
    margin-right: 50px;
  }
  
  body {
    margin: auto;
    
  }
/*perfume 1 and 2*/
#perfume1{
    background-color: #e1e0db;
    overflow:hidden;
    background-size: auto 110%, cover;
    background-position: center center;
    padding-top: 100px;
    padding-bottom: 100px;
    background-attachment:fixed;

}


#perfume1 figure{
    text-align: center;
}
#perfume1 figcaption{
   
  box-sizing: border-box;

}
#perfume1 figcaption span{
   
    font-size: 18px;
       
}

 .fig1 img {
    filter: grayscale( 20% ) blur( 3px ) brightness( 70% )
    saturate( 100% );
    transition: 0.5s;
    }
    .fig1:hover img {
      filter: grayscale( 0% ) blur( 0px ) brightness( 150% )
      saturate( 100% );
      }


/*perfume 3*/
#perfume3 {
    background-image:url(dirtyque.jpg);
    padding-top: 240px;
    padding-bottom: 240px;
    overflow:hidden;
    background-size:  cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center


}
#perfume3 figure{
    text-align: center;
    width: 700px;
    padding-left: 60px;
   

}
#perfume3 figure span{
   
    font-size: 18px;
       
}

/* Chanel- Perfume 4 */
#perfume4{
    background-image:url(chanel-background.jpg);
    padding-top: 230px;
    padding-bottom: 230px;
    overflow:hidden;
    background-size: cover, cover;
    background-position: center center;
    background-attachment:fixed;
    text-align: center;



}
#perfume4 figcaption p{
    padding: 0px 50px;
    width:800px;

}
#perfume4 figcaption span{
   
    font-size: 18px;
       
}
table {
    border: 1px solid black;
    background-color: #e1e0dba9;
    display:flex;
    align-items: center;
    justify-content: center

  }
  


/* Rozu perfume */
#perfume5{
    
    padding-top: 100px;
    padding-bottom: 100px;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center
    

}

 #perfume5 figcaption span{
   
    font-size: 18px;
       
}  
.flip-box {
    background-color: transparent;
    width: 400px;
    height: 600px;
    border: 1px solid #f1f1f1;
   
  }
  
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-box-back {
    background-color: #e1e0db;
    color: #0000006e;
    transform: rotateY(180deg);
  }
/* Perfume 6 */
#perfume6{
    background-image:url(jomalone.jpg);
    padding-top: 270px;
    padding-bottom: 270px;
    overflow:hidden;
    background-size: cover, cover;
    background-position: center center;
    background-attachment:fixed;

}
#perfume6 figure{
    text-align: center;
    color:black;
    padding-bottom: 20px;
}
#perfume6 figure p{
    padding-top: 50px;
}
#perfume6 figcaption span{
   
    font-size: 18px;
       
}
/* Perfume 7- Gipsy Water */
#perfume7{
   
    overflow:hidden;

}

#perfume7 h2{
   
    font-size: 50px;
    margin-right: 200px;
    margin-top: 170px;
    
}
#perfume7 p{
    margin-right: 50px;
}
#perfume7 figcaption span{
   
    font-size: 18px;
       
}

.container {
    display: flex;
    align-items: left;
    justify-content: left
  }
  
  img {
    max-width: 100%;
    
  }
  
  .image {
    flex-basis: 50%
  }
  
  .text {
    
    padding-left: 20px;
  }
  
  


/* Perfume 8 */

#perfume8{
    background-color: black;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow:hidden;
    background-size: cover, cover;
    background-position: center center;
    background-attachment:scroll;

}
#perfume8 figure{
    text-align: center;
    color:white;

    
}
#perfume8 figure img{
    margin-left: 20px;

}
#perfume8 figure h2{
    color:white;
}
#perfume8 figure span{
    color:white;
    font-size: 18px;
    
       
}
.fig2 {
    transition: 0.5s ease-in-out;
    }
  .fig2:hover {
      transform: translateY( -20px ) scale( 1.05 );
      box-shadow: 0 15px 20px -10px rgba( 0, 0, 0, 0.75 );
      }
/* intro*/
#myinfo{
    padding-top: 190px;
    padding-bottom: 270px;
}
.infopics {
    width: 250px;
    height: 450px;
    margin-left: 75px;
    margin-bottom: 40px;
    margin-top: 30px;
    float: right;
    border-radius: 30px;
    
}


.infotitle {
    text-align: left;
    font-size: 35px;
    font-weight: 600;
    margin-left: 40px;
    margin-top: 40px;
    padding-top: 50px;
    
}


.infointro {
    text-align: left;
    font-size: 18px;
    font-style: italic;
    margin-left: 40px;
    width:700px;

}


.infopara {
    text-align: left;
    font-size: 20px;
    margin-left: 40px;
    padding-top: 60px;

}

.social{
    display: block;
    width: 40%;
    margin-left: 90px;
    color:black
    }


  
/* Return to top button*/
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: rgb(7, 7, 7);
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgb(0, 0, 0);
}
#return-to-top:hover i {
    color: rgb(255, 255, 255);
    top: 5px;
}