body
{
    background: url("/sky.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0% center ;
    background-size: cover;
    animation-name: sky;
    animation-duration: 360s;
    animation-timing-function: linear ;
    animation-iteration-count: infinite;
    margin: 0px;
    padding: 0px;
    
}

@keyframes sky {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }

  .grid
  {
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 40px;
    font-weight: bold;
    display: grid;
    height: 100vh;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0px auto;
  }
  .kid
  {
    margin: 30px;
    max-width: 100%;
    width: 100%;
  }

  .starContainer
  {
    display: inline-block;
    letter-spacing: normal;
    width: 9%;
  }
  .sc1 {  width: 10%; }
  .sc2 {  width: 11%; }
  .sc3 {  width: 12%; }
  .sc4 {  width: 14%; }
  .sc5 {  width: 16%; }

  .starContainer img
  {
    width: 100%;
    height: auto;
    text-align: center;
  }

#bgAudio, #sfx
{
    display:none;
}

.star1
{
  animation-name: float1;
  animation-duration: 15s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star2
{
  animation-name: float2;
  animation-duration: 18s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star3
{
  animation-name: float3;
  animation-duration: 20s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star4
{
  animation-name: float4;
  animation-duration: 13s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star5
{
  animation-name: float5;
  animation-duration: 16s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star6
{
  animation-name: float6;
  animation-duration: 17s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star7
{
  animation-name: float7;
  animation-duration: 14s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star8
{
  animation-name: float8;
  animation-duration: 19s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star9
{
  animation-name: float9;
  animation-duration: 14s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}
.star10
{
  animation-name: float10;
  animation-duration: 13s;
  animation-timing-function: ease-in-out ;
  animation-iteration-count: infinite;
}

@keyframes float1 {
  0% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(9px) rotate(15deg); }
  100% { transform: translateY(0) rotate(-15deg); }
}
@keyframes float2 {
  0% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(10px) rotate(-15deg); }
  100% { transform: translateY(0)  rotate(10deg); }
}
@keyframes float3 {
  0% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(11px) rotate(12deg); }
  100% { transform: translateY(0) rotate(-12deg);}
}
@keyframes float4 {
  0% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(8px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(15deg); }
}
@keyframes float5 {
  0% { transform: translateY(0) rotate(-13deg); }
  50% { transform: translateY(9px) rotate(12deg); }
  100% { transform: translateY(0) rotate(-13deg); }
}
@keyframes float6 {
  0% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(8px) rotate(-15deg); }
  100% { transform: translateY(0) rotate(12deg); }
}
@keyframes float7 {
  0% { transform: translateY(0)rotate(-11deg); }
  50% { transform: translateY(0px)rotate(16deg); }
  100% { transform: translateY(0)rotate(-11deg); }
}
@keyframes float8 {
  0% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(13px) rotate(-14deg); }
  100% { transform: translateY(0) rotate(12deg); }
}
@keyframes float9 {
  0% { transform: translateY(0) rotate(-13deg); }
  50% { transform: translateY(9px) rotate(13deg); }
  100% { transform: translateY(0) rotate(-13deg); }
}
@keyframes float10 {
  0% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(7px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(15deg); }
}
.audioIcon
{
  background-image: url("/audio.png");
  background-size: 50px 50px;
}

.audioIcon--play
{
  background-image: url("/audio_playing.png");
  background-size: 50px 50px;
}

.audioIcon--mute
{
  background-image: url("/audio_muted.png");
  background-size: 50px 50px;
}