/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: #ddd3dd;
  background-image: url("felt.png");
  color: #1c2124;
  font-family: 'Averia Sans Libre', cursive;
  font-style: italic;
}

p, section, h1, h2, h3, h4, h5, footer {
  color: #1c2124;
  text-align: center;
  font-family: 'Averia Sans Libre', cursive;
}

h1#sitename {
 font-family: 'Averia Serif Libre', cursive;
 font-size: 3em;
 font-weight: 700;
 font-style: italic;
 background: white;
 line-height: 1.4em;
 border-top: 1px solid rgba(128, 128, 128, 0.4);
 border-bottom: 1px solid rgba(128, 128, 128, 0.4);
 box-shadow: 0px 2px 4px rgba(156, 156, 156, 0.3);
}

h1#sitename .char1, h1#sitename .char2, h1#sitename .char8, h1#sitename .char9, h1#sitename .char10, h1#sitename .char16, h1#sitename .char17, h1#sitename .char18, h1#sitename .char19  {
  color: #84307B;
}

h1#sitename .char3, h1#sitename .char4, h1#sitename .char5, h1#sitename .char6, h1#sitename .char7 { 
  color: #2AB74E;
}

h1#sitename .char11, h1#sitename .char12, h1#sitename .char13, h1#sitename .char14, h1#sitename .char15 {
  color: #584df9;
}

#welcome {
  line-height: 0.6em;
  font-size: 1.6em;
  margin: 1em 0 -3em;
  padding: 0.1em 0;
  background: rgba(221, 211, 221, 0.6);
  border-top: 1px solid rgba(128, 128, 128, 0.4);
  border-bottom: 1px solid rgba(128, 128, 128, 0.4);
  /* box-sizing: border-box; */
  /* display: inline-block; */
  box-shadow: 0px 2px 4px rgba(156, 156, 156, 0.3);
}

section#fol {
  font-size: 50px;
  height: calc(4 * 3.5em);
}

.flower-of-life {
  margin: 3em auto 50px;
  font-size: 50px;
  width: calc(3 * 4em);
  height: calc(3 * 4em);
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  //border: 1px solid #ddd3dd;
  box-sizing: border-box;
}

div#fol-pseudo-wrapper {
  width: calc(4 * 4em);
  height: calc(4 * 4em);
  font-size: 50px;
  margin: calc(3 * -4em - 1em) auto 0;
  overflow: hidden;
  border-radius: 50%;
  margin-top: -15em;
  background-repeat: no-repeat;
  background-position: center;
}

.petal {
  width: 4em;
  height: 4em;
  position: absolute;
  margin: auto 0;
  box-sizing: border-box;
  top: -4em;
  left: -4em;
  border-radius: 50%;
  border: 1px solid rgba(169, 169, 169, 0.5);
  background: rgba(#fff, .3);
  text-align: center;
  z-index: 2;
}

#petal14pseudo, #petal16pseudo, #petal17pseudo, #petal19pseudo {
  width: 4em;
  height: 4em;
  position: absolute;
  margin: 3.985em;
  box-sizing: border-box;
  top: -4em;
  left: -4em;
  border-radius: 50%;
  text-align: center;
  z-index: 3;
  opacity: 0.5;
}

#petal14pseudo, #petal19pseudo {
  animation: rotate 20s linear infinite; 
  -webkit-animation: rotate 20s linear infinite; 
}

#petal17pseudo, #petal16pseudo {
  animation: rotate 20s linear infinite; 
  -webkit-animation: rotateback 20s linear infinite; 
}

#petal1 { top: 0em; left: 4em; background: rgba(255, 0, 0, 0.3); z-index: 999; }
#petal2 { top: 2em; left: 4em; z-index: 988; rgba(169, 169, 169, 0.5); }
#petal3 { top: 4em; left: 4em; background: url("jess-eye-med2.png"); background-repeat: no-repeat; background-position: center; }
#petal4 { top: 6em; left: 4em; }
#petal5 { top: 8em; left: 4em; background: url("etsy-logo2.png") 50% 50% no-repeat, url("a42080-0.8.png"); z-index: 998; }

#petal6 { top: 1em; left: 2.3em; background: rgba(42, 183, 78, 0.3); }
#petal7 { top: 3em; left: 2.3em }
#petal8 { top: 5em; left: 2.3em }
#petal9 { top: 7em; left: 2.3em; background: rgba(132, 48, 123, 0.3); }

#petal10 { top: 1em; left: 5.76em; background: rgba(255, 255, 0, 0.3); }
#petal11 { top: 3em; left: 5.76em }
#petal12 { top: 5em; left: 5.76em }
#petal13 { top: 7em; left: 5.76em; background: rgba(165, 42, 42, 0.3); }

#petal14 { top: 2em; left: .52em; background-image: url("baby.png"); background-position: 53% 24%; background-size: 169%; z-index: 998; }
  #petal14pseudo { border: 2px dashed rgba(0, 0, 255, 1) }

#petal15 { top: 4em; left: .52em; background: rgba(88, 77, 249, 0.3); }
#petal16 { top: 6em; left: .52em; background: url("bag-circle-small.png"); }
  #petal16pseudo { border: 2px dashed rgba(255, 0, 0, 1) }

#petal17 { top: 2em; left: 7.5em; background: url("tattoo-circle-small.png") 34% 100%; z-index: 999; }
  #petal17pseudo { border: 2px dashed rgba(0, 255, 255, 1) }
#petal18 { top: 4em; left: 7.5em; background: rgba(255, 126, 0, 0.3); }
#petal19 { top: 6em; left: 7.5em; background: url("flower-button-one.png") center; }
  #petal19pseudo { border: 2px dashed rgba(0, 255, 255, 1) }

/*
.petal:nth-child(20) { top: 0em; left: .27em }
.petal:nth-child(21) { top: 4em; left: .27em }
.petal:nth-child(22) { top: 1.5em; left: -.6em }
.petal:nth-child(23) { top: 3.5em; left: -.6em }
*/

/* Center of Circle
.petal:after {
content: '';
position: absolute;
width: 1px;
height: 1px;
background: #f00;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
} */

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

@-webkit-keyframes rotateback {
    from{
        -webkit-transform: rotate(180deg);
    }
    to{
        -webkit-transform: rotate(0deg);
    }
}

.mail{
  font-size: 5em;
  font-style: normal;
  display: inline-block;
  color: #6A915D;
  background: none;
}

.faffbook {
  position: relative;
  font-size: 20px;
  height: 2em;
  width: 2em;
  background: #6A5D91;
  display: inline-block;
  border-radius: 0.3em;
  margin-bottom: 2px;
  margin-left: 0.5em;
}

.faffbook::before {
  left: 0.85em;
  top: 0.7em;
  position: absolute;
  display: block;
  content: " ";
  height: 0.3em;
  width: 0.85em;
  background: #ddd3dd;
}

.faffbook::after {
  left: 1.1em;
  top: 0.1em;
  position: absolute;
  display: block;
  content: " ";
  height: 1.5em;
  width: 0.3em;
  border-radius: 0.4em 0 0 0;
  border: 0.3em solid #ddd3dd;
  border-right: 0;
  border-bottom: 0;
}

footer {
  margin: 0 auto 2em;
}