/* Name: Lee Yan Rong
   Adm No : P1843455
   Class:DISM/FT/1A/23
   Closet Dreamer(CA1) Stylesheet
*/

/*default style for webpages*/
html {
  font-size: 12px;
}
a, article, body, div, figure, figcaption, footer, header, h1, h2, h3, img, nav, p {
  border: 0;
  padding: 0;
  margin: 0;
}

/* body */
body {
  max-width: 1280px;
  margin: 0 auto;
  background-color:white;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}
 
/* header section */
/*set background to ivory colour only if the image is not found*/
header{
  background: url("images/headerbg.jpg") #fff8dc;
}

/*Fix the logo in the webpage and at the front of other elements*/
.logo{
  position: fixed;
  top: 1.5em;
  left: 2em;
  z-index: 1;
}

/*Title*/
h1 {
  padding: 1em;
  text-align: center;
}
h2{
  padding: 1.0em;
  text-align: center;
  font-size: 2.5em;
  font-weight: bolder;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
h3{
  padding: 1.0em;
  text-align: center;
  font-size: 2.5em;
  font-weight: bolder;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* site navigation bar in horizontal and change the colour of the link when the client hover, 
  visit and click on it*/
nav.sitenavigation {
  padding: 0 0 1em;
  color: #34180f;
  text-align: center;
}
nav.sitenavigation p{
  display: inline-block;
  margin: 0.5em;
  font-family: 'Concert One', cursive;
  font-size: 1.875em;
}
nav.sitenavigation a:link{
  text-decoration: none;
  color: #34180f;
}
nav.sitenavigation a:visited{
  color: #696565;
}
nav.sitenavigation a:hover{
  font-size:1.2em;
  color: #dd4f67;
}
nav.sitenavigation a:focus{
  color: #dd4f67;
  position: relative;
  top: 1px;
  left: 1px;
}

/* main content */
article {
  padding: 0 3% 2em;
  background-color: #ffffff;
  overflow: auto;
}
article p {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 1.8em;
}

/*article in about us web page*/
article .about {
  margin:0 8em;
}

/*Enlarge the first letter of the paragraph*/
article .about :first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.9em;
  font-weight: bold;
}

/*Centralize the picture in index page*/
article .news {
  text-align: center;
}
article .news figure.not2 {
  text-align: center;
  padding: 0.8em;
}
article figure.productpost {
  text-align: center;
}
article figure.picture {
  padding: 0 0 1.5em 0;
  text-align: center;
}
article .voucher {
  margin:0 15em;
} 

/*Centralize the article in contact us webpage*/
article .contact {
  padding: 0 0 0.4em; 
  text-align: center;
}
article .maps {
  text-align: center;
  width: 60%;
  position: relative;
  margin: auto;
}
article .maps figcaption {
  font-size: 1.5em;
  font-weight: 500;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 0.5em;
  margin-bottom: 2em;
}

/*Centralize and smaller the font size in product page*/
article #motto {
  text-align: center;
  font-size: 1em;
  padding: 0 0 1.8em;
}
 
/*link change the colour of the link when the client hover, 
  visit and click on it*/
a:link{
  text-decoration:none;
  color:#5454e6;
}

/*site of class .about which is the link in about us web page*/
.about a:link{
  text-decoration: none;
  color: #5454e6;
}
.about a:visited{
  color: #8a2be2;
}
.about a:hover{
  color: #98fb98;
  position: relative;
  top: 1px;
  left: 1px;
}
.about a:focus{
  color: #98fb98;
}

/*site of class .maps which is the link in contact us web page*/
.maps a:link{
  color:#5454e6;
}
.maps a:hover{
  color: #98fb98;
  position: relative;
  top: 1px;
  left: 1px; 
}

/*site of class .cart which is the link in product web page*/
.cart a:link{
  font-weight: 800;
  font-size: 3em;
  color: #5454e6;
}
.cart a:hover{
  color:#98fb98;
  position: relative;
  top: 1px;
  left: 1px;
}

/* put product in table form */
* {
  box-sizing: border-box;
}
/*each row in the table can put 3 images*/
.column {
  position: relative;
  float: left;
  width: 33.33%;
  text-align: center;
  margin-bottom: 3em; 
}
.row figcaption{
  font-size: 1.4em;
  padding: 0.5em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*clear float*/
.row::after {
  content: "";
  clear: both;
  display: table;
}
/*slide the description of product from the left when the client hover to the picture*/
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.column:hover .overlay {
  margin-right: 2em;
  width: 100%;
}
/*description text and let it slide to the center of the products' image*/
.text {
  color:#757373;
  font-size: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.cart{
  text-align: center;
  margin-bottom: 1.5em;
}

/*shopping cart*/
.shopping {
  display: flex;
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  margin-top: 2em;
  margin-bottom: 1em;
  margin-right: 2em;
  margin-left: 2em;
}
.col-50 {
  -ms-flex: 50%; 
  flex: 50%;
}
.col-75 {
  -ms-flex: 75%; 
  flex: 75%;
}
.col-50,
.col-75 {
  padding: 0 16px;
}
.container {
  background-color: #f2f2f2;
  padding: 2em 3em 3em 2em;
  border: 1px solid lightgrey;
  border-radius: 3px;
}
input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
label {
  margin-bottom: 10px;
  display: block;
}
.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}
/*the checkout button*/
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin-left: 15em;
  border: none;
  width: 50%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}
.btn:hover {
  background-color: #45a049;
}

/* footer section */
footer {
  padding: 0.6em;
  background-color: #34180f;
  color: #fffff0;
  text-align: center;
}
footer p {
  padding: 0.8em;
  text-align: center;
  font-size: 1.5em;
  font-weight: bolder;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/*social networking sites and the link of the social networking sites will change colour when
  the client hover and click on it*/
.fa {
  padding: 1em;
  font-size: 30em;
  width: 15px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa-facebook {
  color: #fffff0;
}
.fa-facebook:hover{
  font-size: 1.2em;
  color: #7878fd;
}
.fa-instagram{
  color: #fffff0;
}
.fa-instagram:hover{
  font-size:1.2em;
  color: #dda0dd;
}
.fa-pinterest{
  color: #fffff0;
}
.fa-pinterest:hover{
  font-size:1.2em;
  color: #f79595
}
.fa-twitter{
  color: #fffff0;
}
.fa-twitter:hover{
  font-size:1.2em;
  color: #a9deff;
}

/* print styles */
@media print {
  body, h1, article, footer {
    color: rgb(0,0,0);
    background-color: #ffffff;
  }
  body {
    max-width: 100%;
    border: 0;
  }
  h1 {
    font-size: 2.6em;
    padding: 0;
  }
  h2 {
    font-size: 2.2em;
  }
  article p {
    margin: 0.4em 0 0;
  }
  /*the navigation bar will not be printed*/
  nav{
    display: none;
  }
}
@media (max-width: 1280px) {
  .row {
    flex-direction: column-reverse;
  }
}
@page {
  margin: 0.75in;
}