/* SEA CARD */

#card-sea {
  /* background-color: #03396c;
  color: #fff; */
}
#card-sea {
  /*
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(197, 231, 250, 1) 100%
  );
  */
}

.waves {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: 0;
  z-index: 5;
  bottom: 0;
  position: absolute;
  left: 0px;
  float: left;
}

.parallax1 > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax2 > use {
  animation: move-forever2 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax3 > use {
  animation: move-forever3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax4 > use {
  animation: move-forever4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

.suncenter {
  position: absolute;
  top: 40%;
  left: 70%;
  transform: translate(-50%, -50%);
}
.cloud {
  position: relative;
  width: 300px;
  height: 100px;
  border-radius: 50px;
  background: #fff;
  box-shadow: inset -38px -12px 15px 3px rgba(84, 160, 240, 0.1);
  animation: mover 4s infinite linear;
}
.cloud:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 45px;
  background: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.cloud:after {
  content: "";
  position: absolute;
  top: -75px;
  right: 40px;
  background: #fff;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset -10px 16px 15px 3px rgba(84, 160, 240, 0.1);
}
.sun {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  background: #ffe208;
  border-radius: 50%;
  top: -100px;
  left: 50px;
  box-shadow: 0 0 15px rgba(255, 255, 8, 0.5);
  z-index: -1;
  animation: sol 20s infinite linear;
}
.sun li {
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 3px;
  background: #ffe208;
  box-shadow: 0 0 15px rgba(255, 255, 8, 0.5);
  border-radius: 50%;
}
.sun li:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg);
}
.sun li:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
}
.sun li:nth-child(3) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sun li:nth-child(4) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sun li:nth-child(5) {
  transform: translate(-50%, -50%) rotate(22.5deg);
}
.sun li:nth-child(6) {
  transform: translate(-50%, -50%) rotate(-22.5deg);
}
.sun li:nth-child(7) {
  transform: translate(-50%, -50%) rotate(67.5deg);
}
.sun li:nth-child(8) {
  transform: translate(-50%, -50%) rotate(-67.5deg);
}
@keyframes sol {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mover {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(50px);
  }
  100% {
    transform: translate(0);
  }
}