* {
    margin: 0; padding: 0;
}

div[id='loader'] {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;

    opacity: 1;

    transition: 0.5s opacity;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 32px;
}

div[id='loader'][class='fade-out'] {
    opacity: 0;
}

div[id='loader'] > div[class='brand'] {
    display: flex;

    align-items: center;

    gap: 16px;

    img:first-child {
        width: 50px;
    }

    img:last-child {
        width: 150px;
    }
}


/* HTML: <div class="loader"></div> */
.spinner {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
            radial-gradient(farthest-side,#F77B1B 94%,#0000) top/6px 6px no-repeat,
            conic-gradient(#0000 30%,#F77B1B);

    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);

    animation: l13 1s infinite linear;
}
@keyframes l13{
    100%{transform: rotate(1turn)}
}

span[id='counter'] {
    position: absolute;

    right: 25px; top: 25px;

    color: white; font-size: 96px;
}