header,nav, main, article, footer{
  display: block;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul{
  list-style: none;
}
body{
  color: #373737;
  background: #faf8f6;
}
.container{
  border: 10px solid #FFCCCB;
}
.container-inner{
  padding: 3rem 0;
  max-width: 570px;
  margin: auto;
}
.inset{
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 3px solid #ccc;
}
h1{
  margin-top: 4rem;
  font-size: 2.5rem;
  text-align: center;
}
h2{
  margin-top: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}
h3{
  font-size: 1.125rem;
  margin-top: 1rem;
}
footer{
  text-align: center;
  background: #FFCCCB;
  padding: 4rem 4rem;
  color: #515151;
}
.credit{
  margin-top: 3rem;
}

/* signal once */
.trigger1,
.trigger2,
.trigger3{
  position: relative;
}
.trigger1::after,
.trigger2::after,
.trigger3::after{
  content: "\f25a";
  display: block;
  position: absolute;
  top: 50%;
  left: 10%;
  width: 2rem;
  height: 2rem;
  opacity: 0;
  font-family: "FontAwesome";
  transform: translate(-50%,-50%);
  
  animation: signal-pointer 1.7s linear 0.7s 2 normal forwards;
}
@keyframes signal-pointer{
  0%  {
    transform: translate(-50%, calc(-50% + 20px) );
    opacity: 0.7;
    animation-timing-function: ease-in;
  }
  100%{
    transform: translate(-50%, -50%);
    opacity: 0.0;
  }
}



.trigger1::before,
.trigger2::before,
.trigger3::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 10%;
  width: 15px;
  height: 15px;
  opacity: 0;
  border-radius: 50%;
  
  transform: translate(-50%,-50%) scale(0,0);
  transform-origin: 50% 50%;
  
  animation: signal-ripple 1.7s linear 0.7s 2 normal forwards;
}
.trigger1::before{
  background: #389CFF;
}
.trigger2::before{
  background: #FFD000;
}
.trigger3::before{
  background: #D10C57;
}
@keyframes signal-ripple{
  0%  {
    transform: translate(-50%,-50%) scale(0,0);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  50%  {
    transform: translate(-50%,-50%) scale(1.6,1.6);
    opacity: 0.25;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translate(-50%,-50%) scale(2.3,2.3);
    opacity: 0;
  }
}