@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Train+One&display=swap');

@keyframes scrollBackground {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes spin {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes car-bop {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes dog-bop {
    0% {
        transform: translateY(-2px) rotate(-6deg);
    }
    50% {
        transform: translateY(-6px) rotate(0deg);
    }
    100% {
        transform: translateY(-2px) rotate(-7deg);
    }
}

:root {
    --spacing-1: 1rem;
    --spacing-1-double: calc(var(--spacing-1) * 2);
    --spacing-1-half: calc(var(--spacing-1) / 2);
    --color-bg: black;
    --color-front: #eddcef;
    --color-sky: #73869f;
    --saturation: 80%;
    --brightness: 60%;
    --contrast: 1.8;
    --celestial-body-top: 42cqw;
    --celestial-body-size: 8rem;
    --celestial-body-sun: url('../images/sun.svg');
    --celestial-body-moon: url('../images/moon.svg');
}

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

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: var(--color-bg);
    font-family: "Train One", system-ui;

    @media(width <= 40rem), (height <= 30rem) {
        background: var(--color-sky);
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: saturate(var(--saturation)) brightness(var(--brightness)) contrast(var(--contrast));

    &.night {
        --color-front: #cbbad3;
    }

    @media(width <= 40rem), (height <= 30rem) {
        align-items: flex-end;
    }
}

.container {
    container-type: size;
    position: relative;
    width: min(calc(100vw - var(--spacing-1-double)), 40rem);
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-sky);
    overflow: hidden;

    @media(width <= 40rem), (height <= 30rem) {
        width: min(100dvw, 140dvh);
    }
}

.background {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url('../images/background.svg') no-repeat center bottom;
    animation: scrollBackground 5s linear infinite;
}

.background--road {
    background: url('../images/road.svg') no-repeat center bottom;
    animation-duration: 3s;
}

.background--repeat {
    left: -100%
}

.car {
    position: absolute;
    z-index: 3;
    bottom: -4%;
    left: 20%;
    width: 70%;
    aspect-ratio: 2 / 1;
    object-fit: contain;

    [id*="wheel"] {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: spin 1.4s linear infinite;
    }

    #car {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: car-bop 2s ease-in infinite;
    }

    #dog {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: dog-bop 1s linear infinite;
    }

    #light {
        display: none;
    }

    .night & #light {
        display: block;
    }
}

.celestial-body {
    position: absolute;
    z-index: 1;
    top: var(--celestial-body-top);
    left: 73%;
    width: var(--celestial-body-size);
    height: var(--celestial-body-size);
    margin-top: 1rem;
    background: var(--celestial-body-sun);
    background-repeat: no-repeat;

    &.celestial-body--moon {
        background-image: var(--celestial-body-moon);
    }

    &.celestial-body--sun {
        background-image: var(--celestial-body-sun);
    }

    @media(width <= 40rem), (height <= 30rem) {
        --celestial-body-size: min(20dvw, 20dvh);
    }
}

.clock {
    position: absolute;
    top: 3rem;
    left: 8%;
    font-size: 6rem;
    font-weight: 800;
    color: var(--color-front);

    @media(width <= 40rem), (height <= 30rem) {
        top: 0;
        font-size: min(6rem, 22dvmin);
    }
}

.clock-face {
    display: inline-flex;
}

.divider {
    width: 3rem;
    flex: 0 1 0.2rem;
    margin-right: -0.2rem;
}

.divider--hidden {
    visibility: hidden;
}