/*
  STYLE GUIDE STYLING 
  Default styling for the style guide 
*/
body {
  font-family: "Coiny", serif;
  font-weight: 400;
  width: 100%;
  background-color: #FFF4E2;
  margin: 0;
  padding: 0;
}

.element {
  padding-bottom: 2rem;
  margin: 0 10rem;
  border-top-width: 0.01rem;
  border-top-style: solid;
  color: #523E30;
}
h1{
  font-weight: 700;
  text-align: center;
  color: #523E30;
  font-size: 3rem;
  margin: 4rem 0 1rem ;

}
.main-title{
  font-weight: 400;
  font-size: 10rem;
  margin: 3rem 0 0 ;
  color: #FFF4E2;
  -webkit-text-stroke: 0.25rem #523E30;
}
/* Source: https://kinsta.com/blog/css-text-outline/ */
.sub-title{
  margin: 0 0 2rem;
  color: #523E30;

}
.caption{
  margin: 0 20rem 3rem;
  text-align: center;
  color: #523E30;

}
main{
  background-color: #FFD4DE;
  width: 100%;
  border: 0.25rem solid #523E30;
  padding: 0;
}
.introduction{
  text-align: center;
  padding: 2rem;
  margin: 0;
}

h2 {
  font-family: "Coiny", serif;
  font-weight: 400;
  text-align: center;
  font-size: 2.25rem;
  margin: 3rem 0 1rem;
  color: #523E30;
}

h3 {
  font-family: "Coiny", serif;
  font-weight: 400;
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
}


p {
  margin: 0;
  font-family: "Comfortaa", serif;
  font-weight: 400;
  line-height: 1.9rem;
  font-size: 1rem;
}
a{
  color: #8C1C13;
}


code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  line-height: 1.2rem;
  color: black;
  display: block;
  margin: 0 1rem;
}

em{
  margin-left: 1rem;
  font-size: 0.9rem;
}
.sample-code{
  background-color: #FFD4DE; 
  border: 0.1rem solid #523E30;
  padding: 1rem; 
  width: 13rem;
  border-radius: 1.25rem; 
  margin: 1.25rem 0; 
  word-wrap: break-word; 

}


/* 
  TEXT ELEMENTS -------------------
*/
.demo{
  text-align: left;
  margin-top: 4rem  ;
}
.demo2{
  text-align: left;
  font-family: "Coiny", serif;
  font-weight: 400;
  margin: 0;
}

.color-code{
  margin-left: 3rem;
  display: inline-block;
  margin-top: 0.5rem;
}
.color-display{
  margin: 0 ;
}

.dot1{
  margin-left: 0rem ;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #523E30;
  border-radius: 50%;
  display: inline-block;
}
.dot2{
  height: 2.5rem;
  width: 2.5rem;
  background-color: #C1DD90;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12rem ;

}
.dot3{
  height: 2.5rem;
  width: 2.5rem;
  background-color: #FFD4DE;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12rem ;

}
.dot4{
  height: 2.5rem;
  width: 2.5rem;
  background-color: #CBA182;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12rem ;
}
.grid{
  display: grid;    
}
li{
  line-height: 1.75rem;
}



/* 
  INTERACTIVE ELEMENTS -------------------
*/
.link{
  color: #523E30;
  font-size: 0.95rem;
  transition-property: color;
  transition-property: font-size;
  transition-duration: 0.25s;
}
.link:hover, .link:focus{
  text-decoration: none;
  color:#523E30;
  background-color: #C1DD90;
  font-size: 1rem;
}

.button-nav{
  margin-top: 1rem;
  font-family: "Comfortaa", serif;
  font-weight: 400;
  font-size: 0.75rem;
  display: inline-block;
  background-color: #C1DD90;
  color: #523E30;
  padding: 1rem;
  border-radius: 10rem;
  text-decoration: none;
  transition-property: background-color; 
  transition-property: padidng; 
  transition-property: font-size; 
  transition-duration: 0.25s;
}

.button-nav:hover, .button-nav:focus {
  background-color: #FFD4DE ;
  color: #523E30;
  border: 0.1rem solid #523E30;
  font-size: 0.95rem;
  padding: 1rem;
}

input{
  border: 1px solid #735751;
  border-radius: 0.4rem;
  margin-left: 0.3rem;
  padding: 0.3rem;
}
img{
  width: 10rem; 
  height: 10rem; 
  margin-top: 0.75rem;
  /* border-radius: 1.25rem; */
  transition-property: width, height;
  transition-duration: 0.25s;
  
}

img:hover, img:focus{
  width: 11.5rem;
  height: 11.5rem; 
}

figure{
  margin: 0.5rem 1rem;
}
figcaption{
  font-size: 0.6rem;
  line-height: 1rem;
  font-family: "Comfortaa", serif;
  font-weight: 400;
}


/* 
  COMBINED ELEMENTS -------------------
*/
.container{  
  padding: 1rem 1rem 0;
  border-radius: 1.25rem;
  border: 0.1rem solid #523E30;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition-duration: 0.25s;
  transition-property: background-color; 
  text-align: center;
  margin-top: 3rem;
}
.container:hover, .container:focus{
  background-color: #523E30 ;
  border: 0.1rem solid #FFF4E2;
  color: #FFF4E2;
}

.container p{
  text-align: left;
  margin-left: 1rem;
}
.container h3{
  text-align: left;
  margin-left: 1rem;
}
.container figcaption{
  text-align: left;
}
.square {
  display: inline-block;
  position: relative;
  margin-right: 8rem;
  border-radius: 0.5rem;
  left: 8rem;
  bottom: 2rem;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #C1DD90;
  transition-duration: 0.25s;
}
.square:hover, .square:focus{
  background-color: #FFD4DE;
  height: 2.7rem;
  width: 2.7rem;
  left: 8.2rem;

}
.add-item{
  position: relative;
  bottom: 0.4rem;
}
.add-item img:hover, .add-item img:focus{
  background-color: #FFD4DE;
}
.add-item img{
  pointer-events: none;
  /* left: 4.9rem;
  bottom: 3.4rem; */
  width: 1.8rem;
  height: 1.8rem;
}

/* CITATION --------------------------
 */
li{
  text-align: left;
  margin-right: 5rem;
  word-wrap: break-word; 
  font-family: "Comfortaa", serif;
  font-weight: 400;
}
li a{
  color: #523E30;
}
.button-container {
  display: flex; 
  justify-content: center;
  align-items: center; 
}
.container1{
  padding: 1rem 1rem 1.5rem;
  border-radius: 1.25rem;
  border: 0.1rem solid #523E30;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  margin-top: 3rem;
}
 /* NAVIGATOR */
 header {
  background-color: #C1DD90;
  width: 100%;

}
.menu-container a{
  font-family: "Comfortaa", serif;
  white-space: nowrap;
  font-weight: 400;
  padding: 0.8rem 2.46rem;
  text-decoration: none;
  color: #523E30;
  font-size: 0.8rem;
  transition-property: color;
  transition-duration: 0.25s;
}

.menu-container a:hover, .menu-container a:focus {
  text-decoration: none;
  background-color: white;
  border: 0rem solid #523E30;
  border-radius: 10rem;
}

.menu-container {
  display: flex;
  margin-top: 0.5rem;
  height: 2.5rem;
  justify-content: center;
  text-align: center;
  background-color: #ffdce1; 
  width: 33rem; 
  border-radius: 10rem;
  border: 0.1rem solid white;
  margin-left: auto; 
  margin-right: 2rem;
}

.main-menu{
padding: 1.5rem;
}
.main-menu img{
width: 4rem;
margin-left: 10rem;
height: auto;
transition-property: width, height;
transition-duration: 0.25s;
}
.main-menu  img:hover,.main-menu img:focus {
filter: drop-shadow(3px 3px 5px #FFD4DE); 
}

.cart-img img{
display: flex;
width: 2rem;
height: 2rem;
border-radius: 0;
margin-top: 0.6rem;
margin-right: 10rem;
transition-property: width, height;
transition-duration: 0.25s;
}