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

body{
    background:#201e27;
    min-height:100vh;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.container{
    width:100%;
    max-width:1400px;

    padding:30px 20px;

    text-align:center;

    position:relative;
    z-index:10;
}

/* LOGOTYP */

.logo-wrapper{
    animation:floatLogo 6s ease-in-out infinite;
}

.logo{
    width:clamp(260px, 42vw, 520px);
    max-width:90vw;

    display:block;
    margin:auto;

    filter:
        brightness(0)
        saturate(100%)
        invert(31%)
        sepia(22%)
        saturate(847%)
        hue-rotate(145deg)
        brightness(89%)
        contrast(90%);
}

/* RUBRIK */

.title{
    margin-top:30px;

    font-family:'Cinzel', serif;
    font-size:clamp(1.8rem, 4vw, 3.8rem);
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:clamp(2px, 0.4vw, 6px);

    color:#30575f;
}

/* UNDERRUBRIK */

.subtitle{
    margin:18px auto 0;

    max-width:700px;

    font-family:'Cormorant Garamond', serif;
    font-style:italic;

    font-size:clamp(1.1rem, 1.8vw, 1.8rem);
    line-height:1.5;

    color:#30575f;
}

/* SPINNER */

.spinner{
    width:50px;
    height:50px;

    margin:35px auto 0;

    border:5px solid rgba(48,87,95,.15);
    border-top:5px solid #30575f;

    border-radius:50%;

    animation:spin 1s linear infinite;
}

/* PARTICLES */

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.particle{
    position:absolute;

    border-radius:50%;

    background:#ffcf61;

    opacity:.5;
}

.spark{
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#ffcf61;

    pointer-events:none;

    z-index:99999;
}

/* ANIMATIONER */

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatLogo{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}

@keyframes particleMove{
    0%{
        transform:
            translateY(0px)
            translateX(0px);
    }

    50%{
        transform:
            translateY(-120px)
            translateX(40px);
    }

    100%{
        transform:
            translateY(-240px)
            translateX(-40px);
    }
}

/* MOBIL */

@media (max-width:768px){

    .container{
        padding:20px 16px;
    }

    .logo{
        width:75vw;
    }

    .title{
        margin-top:20px;
    }

    .subtitle{
        margin-top:15px;
        padding:0 10px;
    }

/* MAINTENANCE ICON */

.maintenance-icon{
    position:relative;

    width:110px;
    height:110px;

    margin:40px auto 0;
}

.gear{
    position:absolute;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:5rem;

    color:#30575f;

    animation:gearSpin 10s linear infinite;
}

.wrench{
    position:absolute;

    right:-5px;
    bottom:-5px;

    font-size:2.3rem;

    animation:wrenchFloat 3s ease-in-out infinite;
}

@keyframes gearSpin{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes wrenchFloat{
    0%,100%{
        transform:
            translateY(0)
            rotate(-10deg);
    }

    50%{
        transform:
            translateY(-8px)
            rotate(10deg);
    }
}
}