* {
    margin: 0; padding: 0; border: 0;
    box-sizing:  border-box;
}
@-ms-viewport{
  width: device-width;
}

body {
    background-color: hsl(355, 90%, 80%);
    font-family: verdana;
    color: hsl(200, 90%,40%);
}

h1 {
      display: flex; /* converts to flex container */
    }

h1 span {
    flex: 1 0 auto; /* grow, shrink, basis */
    padding: 12px 0;
    text-align: center;
    font-size: 5em;
    background-color: hsl(200 100% 100% / .4);
    margin: 8px;
    
}

p.subtitle {
    text-align: center;
    background-color: rgba(255,255,255,.4);
    padding: 12px;
    margin: 0 8px;
    font-size: 2em;
    font-variant: small-caps;
    color: hsl(200, 90%,20%);
}

section.examples {
    margin: 8px;
    min-height: 200px;
    background-color: rgba(255,255,255,.6);
    padding: 3px 0;
    display: flex;
    flex-flow: row wrap; /* displays in a row, wraps when needed */
    justify-content: center;
}

.examples div { /* divs are block elements */
    border: 4px solid #345;
    margin: 8px;
    aspect-ratio: 16 / 9; /* preserve the aspect ratio with changing width */
    flex: 0 0 30%;
    min-width: 300px; /* min width for phones */
    position: relative; /* position relative for the parent */
   }

   /* direct child selector */
   .examples > div > p {
    position: absolute; /* use absolute position in a relative parent */
    top: 30px; left: 0px;
    background-color: hsl(200, 90%,40%);
    color: rgba(255,255,255,1);
    font-size: 1.5em;
    transform: rotate(-5deg);
    margin-left: -10px;
    padding: 4px 8px, 4px 4px;

   }
   .store-container > examples > example5 > div > p {
    position: absolute; /* use absolute position in a relative parent */
    top: 30px; left: 0px;
    background-color: hsl(200, 90%,40%);
    color: rgba(255,255,255,1);
    font-size: 1.5em;
    transform: rotate(-5deg);
    margin-left: -10px;
    padding: 4px 8px, 4px 4px;

   }

   div.example1 { /* border-radius */
    width: 240px; height: 240px;
    min-width: 240px; min-height: 240px; /* make ex1 different */
    border-radius: 50%; /* make this block a circle */
   }

   div.example2 { /* stripes out of gradients */
    background-image: repeating-linear-gradient(to bottom right, #FF69B4 0px, #FF69B4 20px, #FFFF23 21px, #FFFF23 60px, #FF69B4 61px);
   }
   
   div.example3 { /* transition color on hover */
    background-color: #FF69B4;
    transition: background-color .4s ease-in;  
   }

   div.example3:hover {
    background-color: #FFFF23;
   }

   div.example4 {
    background-color: darkblue;
   }

   div.example4:hover {
    border: 4px solid #FF69B4;
   }

  .store-container {
    line-height:0;
    margin: 50px auto;
    width: 50%;
  }
  .stroke {
    stroke: #0170bb;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
  }
  .round-end {
    stroke-linecap: round;
  }
  #store {
    animation: fadeIn 0.8s ease-in;
  }
  .border-animation {
    background-color: white;
    border-radius: 10px;
    position: relative;
  }
  .border-animation:after {
    content: "";
    background: linear-gradient(45deg, #ccc 48.9%, #0170bb 49%);
    background-size: 300% 300%;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    z-index: -1;
    animation: borderGradient 8s linear both infinite;
  }
  @keyframes borderGradient {
    0%,
    100% {
      background-position: 0% 100%;
    }
    50% {
      background-position: 100% 0%;
    }
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  #browser {
    transform: translateY(-100%);
    -webkit-animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
    animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
  }
  @keyframes moveDown {
    from {
      transform: translate(0, -100%);
    }
    to {
      transform: translate(0, 0);
    }
  }
  #toldo {
    animation: fadeIn 1s 1.4s ease-in forwards;
  }
  .grass {
    animation: fadeIn 0.5s 1.6s ease-in forwards;
  }
  #window {
    animation: fadeIn 0.5s 1.8s ease-in forwards;
  }
  #door {
    animation: fadeIn 0.5s 2s ease-in forwards;
  }
  #sign {
    transform-origin: 837px 597px;
    animation: pendulum 1.5s 2s ease-in-out alternate;
  }
  .trees {
    animation: fadeIn 0.5s 2.2s ease-in forwards;
  }
  #toldo,
  .grass,
  #window,
  #door,
  .trees,
  .cat,
  .cat-shadow,
  .box,
  .parachute,
  .tshirt,
  .cap,
  .ball,
  #text,
  #button,
  .sky-circle,
  .sky-circle2,
  .sky-circle3 {
    opacity: 0;
  }
  @keyframes pendulum {
    20% {
      transform: rotate(60deg);
    }
    40% {
      transform: rotate(-40deg);
    }
    60% {
      transform: rotate(20deg);
    }
    80% {
      transform: rotate(-5deg);
    }
  }
  .cat {
    transform-origin: 1145px 620px;
  }
  .cat-shadow {
    transform-origin: 1115px 625px;
  }
  #store:hover .cat {
    animation: catHi 3s 3s cubic-bezier(0.7, -0.5, 0.3, 1.4);
  }
  #store:hover .cat-shadow {
    animation: catShadow 4s 2s cubic-bezier(0.7, -0.5, 0.3, 1.4) alternate;
  }
  @keyframes catHi {
    0%,
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
    10%,
    60% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes catShadow {
    0%,
    100% {
      transform: translate(40px, -35px) scale(0.3);
    }
    10%,
    60% {
      opacity: 1;
      transform: translate(-5px, 10px) scale(0.5);
    }
    60% {
      opacity: 0;
    }
  }
  .box,
  .parachute {
    transform-origin: 430px 100px;
    animation: moveBox 14s 4s linear forwards infinite;
  }
  .parachute {
    animation: parachute 14s 4s linear forwards infinite;
  }
  @keyframes moveBox {
    0% {
      opacity: 0;
      transform: translate(0, -150px) rotate(20deg);
    }
    15% {
      opacity: 1;
      transform: translate(0, 100px) rotate(-15deg);
    }
    25% {
      transform: translate(0, 250px) rotate(10deg);
    }
    30% {
      transform: translate(0, 350px) rotate(-5deg);
    }
    35% {
      opacity: 1;
      transform: translate(0, 570px) rotate(0deg);
    }
    45%,
    100% {
      opacity: 0;
      transform: translate(0, 570px);
    }
  }
  @keyframes parachute {
    0% {
      transform: translate(0, -150px) rotate(20deg) scale(0.8);
      opacity: 0;
    }
    15% {
      transform: translate(0, 100px) rotate(-15deg) scale(1);
      opacity: 1;
    }
    25% {
      transform: translate(0, 250px) rotate(10deg);
    }
    30% {
      transform: translate(0, 350px) rotate(-5deg);
    }
    33% {
      transform: translate(0, 460px) rotate(0deg) scale(0.9);
      opacity: 1;
    }
    45%,
    100% {
      transform: translate(0, 480px);
      opacity: 0;
    }
  }
  .tshirt {
    animation: fadeInOut 42s 10s ease-in forwards infinite;
  }
  .cap {
    animation: fadeInOut 42s 24s ease-in forwards infinite;
  }
  .ball {
    animation: fadeInOut 42s 38s ease-in forwards infinite;
  }
  #text,
  #button {
    animation: fadeIn 1s 5s ease-in forwards;
  }
  @keyframes fadeInOut {
    5%,
    12% {
      opacity: 1;
    }
    20% {
      opacity: 0;
    }
  }
  .cloud {
    animation: clouds 50s linear backwards infinite;
  }
  .cloud2 {
    animation: clouds 40s 40s linear backwards infinite;
  }
  .plane {
    animation: clouds 30s linear backwards infinite;
    will-change: transform;
  }
  @keyframes clouds {
    from {
      transform: translate(-150%, 0);
    }
    to {
      transform: translate(150%, 0);
    }
  }
  .sky-circle {
    animation: fadeInOut 10s 5s ease-in infinite;
  }
  .sky-circle2 {
    animation: fadeInOut 12s 30s ease-in infinite;
  }
  .sky-circle3 {
    animation: fadeInOut 8s 40s ease-in infinite;
  }