@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    font-size: 52px;
    color: transparent;
    font-family: "Poppins", serif;
  }
  
  body::before, body::after {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
  }
  
  body::before {
    text-shadow: 1.840334474em 0.4780732858em 7px rgba(0, 255, 73, 0.4), 1.314445969em 1.9105295711em 7px rgba(255, 0, 103, 0.4), -0.4217112728em 0.8612702884em 7px rgba(255, 0, 245, 0.3), 0.1839334712em 1.1635884213em 7px rgba(255, 90, 0, 0.4), 1.7779773185em 0.3440674021em 7px rgba(9, 255, 0, 0.2), 1.785640781em -0.0122661386em 7px rgba(255, 0, 8, 0.3), 0.0192423995em 1.1099928705em 7px rgba(198, 255, 0, 0.4), 2.0753556731em 1.4281006914em 7px rgba(255, 0, 203, 0.4), 0.8625139182em 0.9147682726em 7px rgba(255, 236, 0,0.4), 0.9175797057em 1.1049018532em 7px rgba(175, 0, 255,0.4), 0.5972906612em 1.4137365423em 7px rgba(0, 164, 255,0.4), 1.5524154353em -0.2365479901em 7px rgba(255, 174, 0,0.4), -0.1721660859em 1.4784351637em 7px rgba(255, 0, 171,0.4), 0.2246223176em 1.0566701961em 7px rgba(255, 0, 248,0.4), -0.4548997934em 1.3819982258em 7px rgba(57, 0, 255,0.4), 0.4191573935em 0.8573556675em 7px rgba(0, 255, 110,0.4), 1.4799593943em -0.4795333837em 7px rgba(0, 10, 255,0.4), 2.0490435745em 0.2466748861em 7px rgba(0, 255, 43,0.4), 1.6767849392em 1.5537382219em 7px rgba(0, 255, 207,0.4), 1.6188644369em 1.1953818897em 7px rgba(0, 255, 61,0.4), -0.0880552797em 1.5425278499em 7px rgba(0, 52, 255,0.4), 0.3059141498em 1.0679183169em 7px rgba(106, 0, 255,0.4), 2.4734957573em 0.1751200449em 7px rgba(166, 255, 0,0.4), 1.1153974074em 1.5606425249em 7px rgba(0, 156, 255,0.4), -0.4862612806em 2.296509205em 7px rgba(0, 130, 255,0.4), -0.0991283614em -0.3657612536em 7px rgba(0, 244, 255,0.4), -0.2361941542em 0.4329215935em 7px rgba(176, 255, 0,0.4), 0.150981538em 1.7136062633em 7px rgba(255, 185, 0,0.4), 2.0247742386em 1.7042320225em 7px rgba(255, 68, 0,0.4), 0.6066100276em 0.6283635646em 7px rgba(0, 255, 175,0.4), -0.0769930313em 1.3155035252em 7px rgba(126, 255, 0,0.4), 2.0853494494em 2.2705014136em 7px rgba(0, 176, 255,0.4), -0.4630272211em 2.1191174925em 7px rgba(0, 255, 55,0.4), 2.3403954928em 0.8648144648em 7px rgba(0, 255, 16,0.4), -0.0442097846em 2.3611213708em 7px rgba(255, 57, 0,0.4), -0.3478890863em -0.0548269294em 7px rgba(255, 0, 168,0.4), 1.1066987429em -0.2652099746em 7px rgba(0, 255, 129,0.4), 2.2840151463em 1.9196305103em 7px rgba(255, 176, 0,0.4), 0.3464302801em -0.4817165144em 7px rgba(56, 255, 0,0.4), 1.9923041893em -0.3642167158em 7px rgba(0, 255, 62,0.4), 1.2493487915em 1.0294568358em 7px rgba(255, 0, 92,0.4);
    animation-duration: 44s;
    animation-delay: -27s;
  }
  
  body::after {
    text-shadow: 0.1176293622em 2.445849542em 7px rgba(0, 114, 255, 0.4), 2.4794566299em 0.4389495463em 7px rgba(80, 255, 0,0.4), -0.190987703em 1.4770301509em 7px rgba(0, 255, 67,0.4), -0.1541613932em -0.4036699089em 7px rgba(255, 102, 0,0.4), 2.3301535519em -0.0976959129em 7px rgba(0, 255, 107,0.4), 1.709635964em 1.071130526em 7px rgba(230, 255, 0,0.4), 0.0751327042em 2.4508854952em 7px rgba(171, 255, 0,0.4), 0.2096331118em -0.258453465em 7px rgba(255, 181, 0,0.4), -0.24142607em 0.9756975627em 7px rgba(255, 0, 94,0.4), -0.183146862em 1.5413253079em 7px rgba(75, 255, 0,0.4), 1.6762547631em 0.8811447092em 7px rgba(0, 113, 255,0.4), 1.7744417638em -0.4407827917em 7px rgba(250, 255, 0,0.4), 0.3658876673em 1.2373347154em 7px rgba(255, 178, 0,0.4), -0.0186011933em -0.4300010709em 7px rgba(34, 255, 0,0.4), 2.4008650957em 1.1388859283em 7px rgba(0, 70, 255,0.4), 1.2857534475em 0.2971808649em 7px rgba(255, 0, 138,0.4), 0.6713413509em 1.5113306503em 7px rgba(0, 255, 212,0.4), 1.7734800818em 0.1752194811em 7px rgba(0, 5, 255,0.4), -0.4026416798em 0.4245059257em 7px rgba(0, 16, 255,0.4), 0.4945540696em 0.4943247996em 7px rgba(255, 216, 0,0.4), -0.404706667em -0.4072123153em 7px rgba(255, 0, 30,0.4), 1.3700448472em 1.2760371981em 7px rgba(135, 0, 255,0.4), 0.3321453581em -0.4001071843em 7px rgba(31, 0, 255,0.4), 2.0851715151em 0.6026136318em 7px rgba(255, 111, 0,0.4), 0.7879910937em 1.4333998648em 7px rgba(255, 0, 88,0.4), 2.0622075416em 1.9507783578em 7px rgba(52, 0, 255,0.4), 0.5273798264em 0.8339020905em 7px rgba(0, 255, 120,0.4), 2.311192858em 2.0506407159em 7px rgba(0, 255, 5,0.4), -0.1726816012em 0.3565005131em 7px rgba(255, 0, 17,0.4), 0.3401758496em 0.1201998794em 7px rgba(0, 255, 218,0.4), 0.1982532013em -0.1166878748em 7px rgba(0, 23, 255,0.4), 0.7152062234em 0.5673595438em 7px rgba(255, 207, 0,0.4), -0.0239703715em 1.5360522229em 7px rgba(255, 0, 72,0.4), 0.7057953766em 2.0159607888em 7px rgba(255, 0, 139,0.4), -0.2097269947em -0.3115916693em 7px rgba(255, 0, 154,0.4), 1.8723379012em 1.3505565734em 7px rgba(0, 255, 239,0.4), -0.4200576901em 0.9016637971em 7px rgba(0, 201, 255,0.4), 1.3150674315em 1.4540667682em 7px rgba(0, 255, 254,0.4), 0.5486595037em 1.491005025em 7px rgba(0, 190, 255,0.4), 2.2762954756em 2.1101483302em 7px rgba(32, 255, 0,0.4), 0.7710802516em 1.3461178812em 7px rgba(0, 255, 52,0.4);
    animation-duration: 43s;
    animation-delay: -32s;
  }
  
  @keyframes move {
    from {
      transform: rotate(0deg) scale(12) translateX(-20px);
    }
    to {
      transform: rotate(360deg) scale(18) translateX(20px);
    }
  }
*{
    margin: 0px;
    padding: 0px;
}
.wrapper{
    margin: 0 auto;
    height: 100vh;
    display: flex;
}
.content_cnr{
    width: auto;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}
.logo{
    width: auto;
    margin: 0 auto;
    text-align: center;
}
.logo img{
    max-width: 180px;
}
.contents{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    color: #072123;
}
.contents p{
    font-size: 18px;
}
.contents h1{
    font-size: 32px;
}
.construction {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.construction .bar {
    width: 10px;
    height: 40px;
    background: #086c73b6;
    animation: bounce 1.5s infinite;
}

.construction .bar:nth-child(2) {
    animation-delay: 0.2s;
}

.construction .bar:nth-child(3) {
    animation-delay: 0.4s;
}

.construction .bar:nth-child(4) {
    animation-delay: 0.6s;
}

.construction .bar:nth-child(5) {
    animation-delay: 0.8s;
}

.construction-text {
    font-size: 1rem;
    color: #c9d1d9;
    margin-top: 20px;
}
.bar{
    border-radius: 4px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}
/* Mobile Responsiveness */
@media (max-width: 600px) {
    .contents h1 {
        font-size: 1.6rem;
    }

    .contents p {
        font-size: 1rem;
        margin: 0;
    }

    .construction {
        gap: 5px;
        margin-top: 15px;
    }

    .construction .bar {
        width: 8px;
        height: 30px;
    }
}