body, html { height: 100%; }

body { background-color:#ffffff; margin: 0; padding: 0; font-family:Arial, Helvetica, sans-serif; color:#1f3862; }

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  background: url(../img/bg.webp) no-repeat center center; background-size: cover;
}


.background span {
  width: 70vmin;
  height: 70vmin;
  border-radius: 70vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 37;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.5;
}


.background span:nth-child(0) {
  color: #f6a439;
  top: 29%;
  left: 16%;
  animation-duration: 64s;
  animation-delay: -129s;
  transform-origin: 22vw 17vh;
  box-shadow: -80vmin 0 10.169930584944144vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(1) {
  color: #bcefe1;
  top: 74%;
  left: 53%;
  animation-duration: 130s;
  animation-delay: -54s;
  transform-origin: -11vw -2vh;
  box-shadow: -80vmin 0 10.331506894368166vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(2) {
  color: #ffe681;
  top: 48%;
  left: 66%;
  animation-duration: 44s;
  animation-delay: -99s;
  transform-origin: 2vw 21vh;
  box-shadow: -80vmin 0 10.022203372941059vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(3) {
  color: #a0d7e7;
  top: 7%;
  left: 86%;
  animation-duration: 96s;
  animation-delay: -78s;
  transform-origin: -8vw 23vh;
  box-shadow: 80vmin 0 10.44269702864401vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(4) {
  color: #84bbea;
  top: 73%;
  left: 63%;
  animation-duration: 94s;
  animation-delay: -23s;
  transform-origin: -7vw -16vh;
  box-shadow: 80vmin 0 10.096632529274016vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(5) {
  color: #94eacd;
  top: 17%;
  left: 16%;
  animation-duration: 122s;
  animation-delay: -27s;
  transform-origin: -23vw -23vh;
  box-shadow: -80vmin 0 10.96386026955216vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(6) {
  color: #94eacd;
  top: 37%;
  left: 74%;
  animation-duration: 29s;
  animation-delay: -18s;
  transform-origin: 8vw -21vh;
  box-shadow: 80vmin 0 10.532718923906325vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(7) {
  color: #82bcc8;
  top: 94%;
  left: 58%;
  animation-duration: 83s;
  animation-delay: -31s;
  transform-origin: 13vw 1vh;
  box-shadow: 80vmin 0 10.025303515261903vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(8) {
  color: #82bcc8;
  top: 9%;
  left: 52%;
  animation-duration: 72s;
  animation-delay: -2s;
  transform-origin: -1vw -17vh;
  box-shadow: 80vmin 0 10.516944508318698vmin currentColor;
  opacity: 0.5;
}
.background span:nth-child(9) {
  color: #f2a65c;
  top: 13%;
  left: 58%;
  animation-duration: 12s;
  animation-delay: -64s;
  transform-origin: 23vw 13vh;
  box-shadow: -80vmin 0 10.631078949250481vmin currentColor;
  opacity: 0.5;
}

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
a { color:#000; text-decoration:none; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }
  a:hover { color:#0c2244; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }
p, h1, h2, h3, h4, h5, h6, ul, li, img, iframe, form, table, td, tr { line-height:100%; font-weight:normal; margin:0;  padding:0;  border:none;  border-collapse:collapse; }
b, strong { font-family: Arial; font-weight: normal; }

/* scrollbar change start */
* { scrollbar-width: auto; scrollbar-color: #000 #ffffff; }
*::-webkit-scrollbar { width: 14px; }
*::-webkit-scrollbar-track { background: #ffffff; }
*::-webkit-scrollbar-thumb { background-color: #0c2244; border-radius: 5px; border: 3px solid #ffffff; }
/* scrollbar change end */


.spot { width:100%; height:100%; position: relative; z-index:2; font-weight: bold;
  display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
    .spot span { display: block; width: 640px; height: auto; margin:0 auto; text-align:center; }
    .spot span img { display: block; width: 60%; height: auto; margin:0 auto 10px auto; text-align:center; }
    .spot span p { font-size:22px; line-height: 140%; }
    .spot span p b { font-size:26px; }

    @media only screen and (max-width: 860px) { .spot span { width: 90%; }  }