* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #1d2630;
        background-image: url('https://icp.18z.fun/go/static/image/p1.jpeg')!important;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment:fixed;
            background-size:100% 100%;
            -webkit-background-size: cover;
            -o-background-size: cover;
        color: #fff;
        font-weight: 400;
        font-size: 1rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      main {
        padding: 2rem;
        flex: 1;
        display: flex;
        gap: 2rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

     
      main h2,
      main h3,
      main small{
          text-align:center;
      }
      main h3 p{
margin-top:20px;
font-style: italic;
font-weight:100;
max-width:600px
}
a{
    text-decoration: none;
    color:#fff;
}

@keyframes rota{
  to {transform: rotate(360deg);}
}

@keyframes opa{
  12.0% { opacity: 0.80; }
  19.5% { opacity: 0.88; }
  37.2% { opacity: 0.64; }
  40.5% { opacity: 0.52; }
  52.7% { opacity: 0.69; }
  60.2% { opacity: 0.60; }
  66.6% { opacity: 0.52; }
  70.0% { opacity: 0.63; }
  79.9% { opacity: 0.60; }
  84.2% { opacity: 0.75; }
  91.0% { opacity: 0.87; }
}

.spinner{
  font-size: 100px;
  width: 1em;
  height: 1em;
  margin: 10px auto;
  position: relative;
  list-style: none;
  border-radius: 50%;
  border: .01em solid rgba(150, 150, 150,0.15);
  background: rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 1.5em rgba(0,0,0,0.4);
}

.spinner:before{
  content: "\0020";
  position: absolute;
  width: .65em;
  height: .65em;
  border: .01em solid rgba(150, 150, 150, 0.15);
  border-radius: 50%;
  top: 17%;
  left: 17%;
  background: rgba(150, 150, 150, 0.1);
}

.spinner:after{
  content: "\0020";
  position: absolute;
  width: .25em;
  height: .25em;
  border: .01em solid rgba(150, 150, 150, 0.15);
  border-radius: 50%;
  top: 38%;
  left: 38%;
  background: rgba(150, 150, 150, 0.1);
}

.spinner li{
  width: .2em;
  height: .2em;
  position: absolute;
  border-radius: 50%;
}

/* blue */
.spinner li:nth-child(1){
  background: #0076c1;
  top: 0;
  left: 50%;
  margin-left: -.1em;
  transform-origin: 50% 250%;
  animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}

/* red */
.spinner li:nth-child(2){
  background: #ff003c;
  top: 60%;
  right: 20%;
  margin-top: -.1em;
  transform-origin: -50% 0;
  animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}

/* yellow */
.spinner li:nth-child(3){
  background: #fabe28;
  bottom: 0;
  left: 50%;
  margin-left: -.1em;
  transform-origin: 50% -150%;
  animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}

/* green */
.spinner li:nth-child(4){
  background: #88c100;
  top: 60%;
  left: 20%;
  margin-top: -.1em;
  transform-origin: 150% 0%;
  animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fade-in {
animation: fadeIn 1s ease-in-out forwards;
}