body {background-color: #ADB2B6;
background-image: url(/images/codejams/cloudtile3.png);
background-repeat:repeat-x;
overflow:hidden;
background-size:auto 40vh;
padding:0;
margin:0;
font-family: 'XTypewriter', 'Courier New', Courier, monospace;
}

@font-face {
  font-family: 'XTypewriter';
  src: url('/fonts/XTypewriter-Regular.woff');
  font-weight: 400;
  font-style: normal;
}

.cloud2 {animation:cloud1 100s linear infinite;
top:0px;
padding-left:100%;
position:absolute;}

.generaltext {margin:auto;
  width:60%;
  }

#waveaudio:hover {cursor:pointer;}
#mutewaveaudio:hover {cursor:pointer;}

.waveaudioctrls {position:relative;
top:20px;
}

  .generaltext p {padding:10px;
    background-image:url(/images/codejams/paperslip2.png);
    border:1px rgba(158, 155, 139, 0.514) solid;
    max-height:91px;
    overflow:auto;
  border-radius:3px;}
 
@keyframes cloud1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.wave1 {
  animation: bobbing 2.5s ease-in-out infinite;
  animation-direction: alternate;}

.wave2 {
animation: bobbing 2.3s ease-in-out infinite;
  animation-direction: alternate;
}
.oceangradient { background: rgb(79,80,82);
  background: linear-gradient(180deg, rgba(79,80,82,1) 0%, rgba(167,161,149,1) 100%); 
height:20%;
position:absolute;
top:44%;
width:100%;
display:none;}

  .wave3 {
  animation: bobbing 2s ease-in-out infinite;
  animation-direction: alternate;}

  .wave4 {
    animation: bobbing 2.3s ease-in-out infinite;
    animation-direction: alternate;}

    .wave5 {
      animation: bobbing 1.8s ease-in-out infinite;
      animation-direction: alternate;}

      .wave6 {
        animation: bobbing 1.5s ease-in-out infinite;
        animation-direction: alternate;}

.waves {
  width:100%;
  height:100px;
    position:absolute;
    top:35%;
}

.beach {background-image:url(/images/codejams/beach2.png);
position:absolute;
top: 45%;
width:100%;
height:55%;}

#mussell {width:50px;
  rotate:20deg;
  position:absolute;
  left:5%;
  bottom:65%;
}

#musselltxt {text-align:left;
  background:none;
  width:70%;
  border:none;
 }

 #musselltxt p { padding:10px;
  background-image:url(images/codejams/paperslip2.png);
  border:1px rgba(158, 155, 139, 0.514) solid;
  max-height:91px;
border-radius:3px;}

#gulltxt {text-align:left;
  background:none;
  width:70%;
  border:none;
 }

 #gulltxt p { padding:10px;
  background-image:url(/images/codejams/paperslip2.png);
  border:1px rgba(158, 155, 139, 0.514) solid;
  border-radius:3px;
  max-height:91px;
  width:auto;

}

#seaweed {position:absolute;
left:30%;}

#seaweedtxt {text-align:left;
  background:none;
  width:70%;
  border:none;
 }

 a {color:black;}

 a:hover {color:rgb(122, 122, 122);}

 #seaweedtxt p { padding:10px;
  background-image:url(/images/codejams/paperslip2.png);
  border:1px rgba(158, 155, 139, 0.514) solid;
  border-radius:3px;
  max-height:91px;
  width:auto;

}

.exit {position:absolute;
bottom:0;
left:0;}

#gull {width:160px;
position:absolute;
left:27%;
bottom:30%;}


#umbrella {
position:absolute;
left:55%;
bottom:50%;
}

#umbrellatxt {text-align:left;
  background:none;
  width:70%;
  border:none;
 }

 #umbrellatxt p { padding:10px;
  background-image:url(/images/codejams/paperslip2.png);
  border:1px rgba(158, 155, 139, 0.514) solid;
  max-height:91px;
 }

 #exittxt {text-align:left;
  background:none;
  width:70%;
  border:none;
 }

 #exittxt p { padding:10px;
  background-image:url(/images/codejams/paperslip2.png);
  border:1px rgba(158, 155, 139, 0.514) solid;
  max-height:91px;
 }

@keyframes bobbing {
  0% {
      transform: translateY(2px);
  }
  100% {
      transform: translateY(-5px);
  }
}


@keyframes swing {
0% {
    transform: rotate(5deg);
}
50% {
    transform: rotate(-5deg);
}
100% {
    transform: rotate(5deg);
}
}


.ocean {background-image:url(/images/codejams/oceanimdying.png);
  background-repeat:repeat-x;
  width:100%;
height:500px;
position:absolute;
padding-top:2%;
top:36%;
animation: bobbing 3s ease-in-out infinite;
    animation-direction: alternate;
}

/* Marquee styles */
.marquee {
  --gap: 1px;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  gap: var(--gap);
  min-width: 100%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

.marquee__content {
  animation: scroll 60s linear infinite;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

li {
  list-style-type: none;
}