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

:root {
    --line-right-angle: 0deg;
    --line-bottom-angle: 90deg;
    --line-left-angle: 180deg;
    --line-top-angle: 270deg;
    --line-neutral-angle: 135deg;
    --mini-clock-width: 50px;
    --mini-clock-hand-width: 50%;
    --mini-clock-hand-height: 3px;

    --gradient-start: #141e30;
    --gradient-end: #243b55;
    --digit-color: #1bc5f0;
    --mini-clock-bg-color: rgba(0, 0, 0, 0.1);
}

body {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    &.size2x3 {
        .digit {
            aspect-ratio: 2/3;
            width: 103px;
        }
    }

    &.size4x6 {
        .digit {
            aspect-ratio: 4/6;
            width: 209px;
        }
    }
}

.clock-pair {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.digit {
    display: flex;
    flex-direction: row;
    gap: 3px;
    flex-wrap: wrap;

    .mini-clock {
        position: relative;
        width: var(--mini-clock-width);
        aspect-ratio: 1/1;
        background: var(--mini-clock-bg-color);

        &::before, &::after {
            content: "";
            width: var(--mini-clock-hand-width);
            height: var(--mini-clock-hand-height);
            background: var(--digit-color);
            position: absolute;
            top: calc(50% - var(--mini-clock-hand-height) * 0.5);
            left: 50%;
            transform-origin: 0 50%;
            transition: all .3s linear;
        }

        &::after {
            transform: rotate(var(--angle-1));
        }

        &::before {
            transform: rotate(var(--angle-2));
        }

        &.angle-neutral {
            --mini-clock-hand-width: 3px;
            --mini-clock-hand-height: 3px;
            --angle-1: var(--line-neutral-angle);
            --angle-2: var(--line-neutral-angle);

            &::before, &::after {
                opacity: 0.1;
            }
        }

        &.angle-top-left {
            --angle-1: var(--line-top-angle);
            --angle-2: var(--line-left-angle);
        }

        &.angle-top-right {
            --angle-1: var(--line-top-angle);
            --angle-2: var(--line-right-angle);
        }

        &.angle-bottom-left {
            --angle-1: var(--line-bottom-angle);
            --angle-2: var(--line-left-angle);
        }

        &.angle-bottom-right {
            --angle-1: var(--line-bottom-angle);
            --angle-2: var(--line-right-angle);
        }

        &.angle-horizontal {
            --angle-1: var(--line-left-angle);
            --angle-2: var(--line-right-angle);
        }

        &.angle-vertical {
            --angle-1: var(--line-bottom-angle);
            --angle-2: var(--line-top-angle);
        }

        &.angle-top {
            --angle-1: var(--line-top-angle);
            --angle-2: var(--line-top-angle);
        }

        &.angle-bottom {
            --angle-1: var(--line-bottom-angle);
            --angle-2: var(--line-bottom-angle);
        }

        &.angle-left {
            --angle-1: var(--line-left-angle);
            --angle-2: var(--line-left-angle);
        }

        &.angle-right {
            --angle-1: var(--line-right-angle);
            --angle-2: var(--line-right-angle);
        }
    }
}