* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),10%,90%);
    --fg: hsl(var(--hue),10%,10%);
    --primary: white;
    --trans-dur: 0.3s;
    font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
    background-color:rgb(0, 37, 68);
    color: var(--fg);
    font: 1em/1.5 "DM Sans", sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}
.preloader {
    text-align: center;
    max-width: 20em;
    width: 100%;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 1s ease; /* Transition effect on opacity */
}
.preloader__text {
    position: relative;
    height: 1.5em;
}
.preloader__msg {
    animation: msg 0.3s 13.7s linear forwards;
    position: absolute;
    width: 100%;
}
.preloader__msg--last {
    animation-direction: reverse;
    animation-delay: 14s;
    visibility: hidden;
}
.pwd-icon {
    display: block;
    margin: 0 auto 1.5em auto;
    width: 8em;
    height: 8em;
}
.pwd__lines,
.pwd__head,
.pwd__body,
.pwd__arm,
.pwd__leg,
.pwd__wheel1,
.pwd__wheel2 {
    animation: pwdLines 2s ease-in-out infinite;
}
.pwd__lines {
    stroke: var(--primary);
}
.pwd__head {
    animation-name: pwdHead;
}
.pwd__body {
    animation-name: pwdBody;
}
.pwd__arm {
    animation-name: pwdArm;
}
.pwd__leg {
    animation-name: pwdLeg;
}
.pwd__wheel1 {
    animation-name: pwdWheel1;
    transform: rotate(-0.25turn);
    transform-origin: 40px 100px;
}
.pwd__wheel2 {
    animation-name: pwdWheel2;
    transform: rotate(0.25turn);
    transform-origin: 70px 100px;
}
.pwd__wheel-stroke {
    animation-name: pwdWheelStroke;
}
.pwd__track {
    stroke: hsla(var(--hue),10%,10%,0.1);
    transition: stroke var(--trans-dur);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
    .pwd__track {
        stroke: hsla(var(--hue),10%,90%,0.1);
    }
}

/* Animations */
@keyframes msg {
    from {
        opacity: 1;
        visibility: visible;
    }
    99.9% {
        opacity: 0;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes pwdLines {
    from,
    to {
        opacity: 0;
    }
    8%,
    92% {
        opacity: 1;
    }
}
@keyframes pwdHead {
    from {
        stroke-dashoffset: -62.83;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 62.83;
    }
}
@keyframes pwdBody {
    from {
        stroke-dashoffset: -30;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 30;
    }
}
@keyframes pwdArm {
    from {
        stroke-dashoffset: -28.28;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 28.28;
    }
}
@keyframes pwdLeg {
    from {
        stroke-dashoffset: -28.28;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 28.28;
    }
}
@keyframes pwdWheel1 {
    from {
        transform: rotate(-0.25turn);
    }
    to {
        transform: rotate(2.75turn);
    }
}
@keyframes pwdWheel2 {
    from {
        transform: rotate(0.25turn);
    }
    to {
        transform: rotate(3.25turn);
    }
}
@keyframes pwdWheelStroke {
    from,
    to {
        stroke-dashoffset: 75.36;
    }
    50% {
        stroke-dashoffset: 37.68;
    }
}

.fade-out {
    opacity: 0; /* Fully transparent */
}