/*
 * example viewport 1420px x 612px = 43%
 * clouds.png 2247px x 190px
 */
.container-fluid.hw6 {
  padding: 0 0;
}

#animation-container {
  position: relative;
  width: 100%;
  padding-bottom: 43%;
}

#plane-container {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
 * Original Size: 347px x 150px.  150/347  = * 43%
 */
#plane {
  width: 25%;
  height: auto;
  margin-top: 5em;
}

/*#sky {*/
/*  position:fixed;*/
/*  top:0px;left:0px;*/
/*  width:100%;*/
/*  height:100%;*/
/*  text-align:center;*/
/*  margin:0px;*/
/*  padding:0px;*/
/*  background-color:#C0DEED;*/
/*  background: url(images/clouds.png) center top repeat-x;*/
/*  padding-top:300px;*/
/*  padding-bottom:10px;*/
/*}*/
#sky {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/clouds.png) center top repeat-x;
  background-color:#C0DEED;
  -webkit-animation: animatedBackground 30s linear infinite;
          animation: animatedBackground 30s linear infinite;
}

@-webkit-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

#banner {
  position: absolute;
  background-color: yellow;
  background: linear-gradient(90deg,
    rgba(255,248,0,1) 0%,
    rgba(255,182,5,1) 20%,
    rgba(255,161,113,1) 50%,
    rgba(255,182,5,1) 80%,
    rgba(255,248,0,1) 100%
  );
  border: 1px solid black;
  width: 20rem;
  height: 3rem;
  display: flex;
  align-content: center;
  justify-content: space-around;
  border-radius: 2em 2em;
  left: 0;
  bottom: 2em;
  -webkit-animation: moveBanner 20s ease forwards;
          animation: moveBanner 20s ease forwards;
  /*animation-fill-mode: forwards;*/
}

@-webkit-keyframes moveBanner {
  0% { left: 0; }
  50%   { left: calc(100% - 20rem); }
  100% { left: calc(50% - 10rem); }
}

@keyframes moveBanner {
  0% { left: 0; }
  50%   { left: calc(100% - 20rem); }
  100% { left: calc(50% - 10rem); }
}

#banner-message {
  display: flex;
  align-items: center;
  -webkit-animation: message 20s linear infinite;
          animation: message 20s linear infinite;
  /*animation-fill-mode: forwards;*/
}

#banner-message.no-animation {
  -webkit-animation: unset;
          animation: unset;
}

#banner.no-animation {
  -webkit-animation: unset;
          animation: unset;
  left: calc(50% - 10rem);
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    /* Very short durations means JavaScript that relies on events still works */
    -webkit-animation-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@-webkit-keyframes message {
  0% {
    font-size: 1em;
    transform: skewX(0deg);
  }
  50% {
    font-size: 1.4em;
    transform: skewX(-30deg);
  }
  100% {
    font-size: 1em;
    transform: skewX(0deg);
  }
}

@keyframes message {
  0% {
    font-size: 1em;
    transform: skewX(0deg);
  }
  50% {
    font-size: 1.4em;
    transform: skewX(-30deg);
  }
  100% {
    font-size: 1em;
    transform: skewX(0deg);
  }
}

@media (max-width: 800px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  html {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion) {
  #banner {
    -webkit-animation: unset;
            animation: unset;
    left: calc(50% - 10rem);
  }
  #banner-message {
    -webkit-animation: unset;
            animation: unset;
  }
}

#animation-button {
  position: absolute;
  top: 1em;
  right: 1em;
}

.hw6 hgroup {
  margin-top: 2em;
  display: block;
  padding: 0.5rem 1rem;
  color: #446b00;
  background: rgb(247,179,183);
  background: radial-gradient(circle, rgba(247,179,183,1) 0%, rgba(247,179,183,1) 77%, rgba(242,77,87,1) 100%);
  font-weight: bold;
  font-style: italic;
  border: 1px solid black;
  border-radius: 2em 2em;
  text-align: center;
}

.hw6 h1 {
  font-size: 1.4rem;
}

.hw6 h2 {
  font-size: 1.2rem;
}

.image-example {
  width: 100%;
}

em {
  font-weight: 600;
  color: #5E2612;
}

caption {
  caption-side: top;
  text-align: center;
  color: black;
  font-size: 1.4rem;
}

p.list-heading {
  margin-bottom: 0;
  font-weight: bold;
}